【愚公系列】2022年04月 微信小程序-多人音视频对话

举报
愚公搬代码 发表于 2022/04/12 15:34:17 2022/04/12
【摘要】 前言微信小程序开发多人音视频对话首先得去小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。相关属性:一级类目/主体类型二级类目小程序内容场景教育在线视频课程网课、在线培训、讲座等教育类直播医疗互联网医院,公立医院问诊、大型健康讲座等直播医疗私立医疗机构/金融银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金...

前言

微信小程序开发多人音视频对话首先得去小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。

相关属性:

一级类目/主体类型 二级类目 小程序内容场景
教育 在线视频课程 网课、在线培训、讲座等教育类直播
医疗 互联网医院,公立医院 问诊、大型健康讲座等直播
医疗 私立医疗机构 /
金融 银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金融 金融产品视频客服理赔、金融产品推广直播等
汽车 汽车预售服务 汽车预售、推广直播
政府主体帐号 / 政府相关工作推广直播、领导讲话直播等
IT 科技 多方通信 在线会议
快递业与邮政 寄件/收件 视频客服

开通该组件权限后,开发者可在 joinVoIPChat 成功后,获取房间成员的 openid,传递给 voip-room 组件,以显示成员画面。

属性 类型 默认值 必填 说明 最低版本
openid string 进入房间用户的 openid 2.11.0
mode string camera 对话窗口类型,自身传入 camera,其它用户传入 video 2.11.0
device-position string front 仅在 mode 为 camera 时有效,前置或后置,值为front, back 2.11.0
binderror eventhandle 创建对话窗口失败时触发 2.11.0

一、多人音视频对话

相关API接口说明:

  • 创建/加入房间:wx.joinVoIPChat
  • 离开房间:wx.exitVoIPChat
  • 更新房间麦克风/耳机静音设置:wx.updateVoIPChatMuteConfig
  • 监听房间成员变化:wx.onVoIPChatMembersChanged
  • 监听房间成员通话状态变化:wx.onVoIPChatSpeakersChanged
  • 监听通话中断:wx.onVoIPChatInterrupted
  • 监听实时语音通话成员视频状态变化:wx.onOnVoIPVideoMembersChanged

1.wxml

<!-- wxml -->
<voip-room class="video" v-for="item in openid_list" :key="item" :openid="item" :mode="my_openid == item ? 'camera': 'video'"/>

2.js

// js
async joinRoom(){
  // 获取自己的openid;
  const my_openid = await getOpenId();
  this.my_openid = my_openid.openid;

  // 加入房间并获取openid列表
  const result = await getOpenIdList(cache.join_param);
  this.openid_list = result.openIdList;

  // 订阅视频成员, 避免人超过两个显示不了视频.
  wx.subscribeVoIPVideoMembers({
    openIdList: result.openIdList,
    success(res){
      console.log('subscribeVoIPVideoMembers ok', res);
    },
    fail(err){
      console.log('subscribeVoIPVideoMembers fail', err);
    }
  })

  // 成员变化时修改openid列表;
  wx.onVoIPChatMembersChanged((result) => {
    console.log('member change', result);
    this.openid_list = result.openIdList;
  })

  // 视频成员变化时重新订阅视频成员
  wx.onVoIPVideoMembersChanged((result)=>{
    wx.subscribeVoIPVideoMembers({
      openIdList: result.openIdList,
      success(res){
        console.log('subscribeVoIPVideoMembers ok', res);
      },
      fail(err){
        console.log('subscribeVoIPVideoMembers fail', err);
      }
    })
  })
}

备注:
getOpenId() 函数用于获取自己的openid,getOpenIdList() 封装了wx.joinVoIPChat返回值为房间中的人的openid列表,最后别忘记退出房间时调一下wx.exitVoIPChat。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。