【愚公系列】2022年04月 微信小程序-多人音视频对话
【摘要】 前言微信小程序开发多人音视频对话首先得去小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。相关属性:一级类目/主体类型二级类目小程序内容场景教育在线视频课程网课、在线培训、讲座等教育类直播医疗互联网医院,公立医院问诊、大型健康讲座等直播医疗私立医疗机构/金融银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金...
前言
微信小程序开发多人音视频对话首先得去小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。
相关属性:
一级类目/主体类型 | 二级类目 | 小程序内容场景 |
---|---|---|
教育 | 在线视频课程 | 网课、在线培训、讲座等教育类直播 |
医疗 | 互联网医院,公立医院 | 问诊、大型健康讲座等直播 |
医疗 | 私立医疗机构 | / |
金融 | 银行、信托、基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金融 | 金融产品视频客服理赔、金融产品推广直播等 |
汽车 | 汽车预售服务 | 汽车预售、推广直播 |
政府主体帐号 | / | 政府相关工作推广直播、领导讲话直播等 |
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)