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

文章目录

前言
一、多人音视频对话
- 1.wxml
- 2.js

前言

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

相关属性：

一级类目/主体类型	二级类目	小程序内容场景
教育	在线视频课程	网课、在线培训、讲座等教育类直播
医疗	互联网医院，公立医院	问诊、大型健康讲座等直播
医疗	私立医疗机构	/
金融	银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台（港股/美股）、消费金融	金融产品视频客服理赔、金融产品推广直播等
汽车	汽车预售服务	汽车预售、推广直播
政府主体帐号	/	政府相关工作推广直播、领导讲话直播等
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

一、多人音视频对话

1.wxml

代码语言：javascript复制

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

2.js

代码语言：javascript复制

// 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。

tcp/ip 云直播访问管理小程序 javascript

0 人点赞

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

文章目录

前言

一、多人音视频对话

1.wxml

2.js

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