---

前言

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

相关属性：

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

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

1. 【愚公系列】2022年04月 微信小程序-实时音视频录制

   文章目录 前言 一.实时音视频录制 1.js代码 2.wxml代码 3.效果 前言 小程序的实时音视频播放需要先去微信开发者平台开通权限,「开发」-「接口设置」中自助开通该组件权限. 类目属性如下: ...

2. 2022年04月 微信小程序-富文本和文本的使用

   前言 富文本格式(Rich Text Format)即RTF格式,又称多文本格式,是由微软公司开发的跨平台文档格式.大多数的文字处理软件都能读取和保存RTF文档.它是一种方便于不同的设备.系统查看的文 ...

3. 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-02周边站点-获取位置和城市信息

   文章目录 前言 1.相关API 一.获取位置和城市信息 前言 1.相关API 逆地址解析:提供由经纬度到文字地址及相关位置信息的转换能力,广泛应用于物流.出行.O2O.社交等场景.服务响应速度快.稳定 ...

4. 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-01周边站点

   文章目录 前言 1.公交车站的意义 2.公交车站的作用 一.周边站点 1.wxml 2.js 3.wxss 4.实际效果 前言 1.公交车站的意义 转变现有出行模式,倡导公共交通和混合动力汽车.电动车 ...

5. 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-06站点查询

   文章目录 前言 1.相关API 2.相关案例 一.站点搜索 1.wxml 2.js 3.效果 总结 前言 1.相关API 接口地址:https://api.jisuapi.com/transit/st ...

6. 【愚公系列】2022年04月 微信小程序-地图的使用之面聚合

   文章目录 前言 一.面聚合 1.wxml 2.js 3.wxss 4.实际效果 前言 地图基础属性: 属性 类型 默认值 必填 说明 最低版本 longitude number 是 中心经度 1.0. ...

7. 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-03周边站点-获取周边站址

   文章目录 前言 1.相关API 2.相关案例 一.获取周边站址 总结 前言 1.相关API 接口地址:https://api.jisuapi.com/transit/nearby 返回格式:JSON, ...

8. 【愚公系列】2022年04月 微信小程序-项目篇(公交查询)-04周边站点-地图展示

   文章目录 前言 1.相关API 一.地图展示 1.js 2.wxml 前言 1.相关API 本文使用的是百度地图API,百度地图JavaScript API是一套由JavaScript语言编写的应用程 ...

9. 【愚公系列】2022年04月 微信小程序-项目篇(祝福语)-01 首页页面设计

   文章目录 前言 一.首页页面设计 1.首先上图 2.全局样式设置 3.搜索框设计 3.1 页面效果 3.2 WXML 3.2 WXSS 3.3 JS 4.类别设计 3.1 页面效果 3.2 WXML ...

最新文章

1. $g.$utils.实用工具类
2. Soldier and Badges
3. 用神经网络分类原子和圆
4. 《Photoshop Lab修色圣典(修订版)》—第1课深入讨论
5. 关于正点原子STM32的MDK例程移植到IAR中遇到的错误解决方法 __use_no_semihosting
6. 信息类产品检测培训讲义-EN55024
7. 面向对象进阶-反射（二）重要知识点
8. Cortex M3 NVIC与中断控制
9. 计算机应用领域变化,计算机应用领域与发展阶段.ppt
10. bzoj1232[Usaco2008Nov]安慰奶牛cheer*
11. ImageX instead of Ghost
12. 微博先锋：Twitter系统结构分析
13. 推荐5个免费的项目管理工具
14. InsetGAN ：基于多个stylegan2-ada生成器拼接的全身人像生成（2203.InsetGAN for Full-Body Image Generation）
15. 软件测试技术学习总结
16. 使用CSS制作图片相框以及图片放大旋转效果
17. win+L 锁屏快捷键 失效
18. 【18】微信小程序：05-WePY简介、WePY的安装与运行、WePY文件介绍、WePY框架开发规范与使用
19. 领带的打法10种——男士必看（图）
20. ARC120E - 1D Party

热门文章

1. 第六届“飞思卡尔”杯智能汽车竞赛赛后总结
2. 对比同行CMS程序，迅睿CMS有哪些优势
3. springboot+mybatis plus+code generate+mysql + swagger ui简单demo
4. 4.2.3 适配GNURadio的USRP驱动安装与检测过程
5. fastadmin开发之多数据库操作
6. 压缩和解压缩——gzip、gunzip、bzip2、bunzip2
7. phpstorm xdebug简洁教程
8. ARChon 分析之一：下载使用ARChon
9. Jitsi Meet Electron Desktop 在树莓派4中的编译
10. android-支持多种屏幕[声明适用于 Android 3.2 的平板电脑布局] 七