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

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

相关属性:

image.png


image.png

一、多人音视频对话

相关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。

相关文章
|
6月前
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
100 0
|
编解码 移动开发 小程序
浅尝云游戏音视频小程序
云电脑、云办公、云会议、云游戏等等云概念,在不平凡的 2020,依然此起彼伏,你方唱罢我登场!它们似乎在告诉着我们什么:5G 时代不会平凡?还是说正为某项能颠覆产业的技术应用而蛰伏着?
|
小程序 开发者
【愚公系列】2022年04月 微信小程序-实时音视频录制
【愚公系列】2022年04月 微信小程序-实时音视频录制
303 0
【愚公系列】2022年04月 微信小程序-实时音视频录制
|
小程序 开发者
【愚公系列】2022年04月 微信小程序-实时音视频播放
【愚公系列】2022年04月 微信小程序-实时音视频播放
259 0
【愚公系列】2022年04月 微信小程序-实时音视频播放
|
Web App开发 开发工具
常青:小程序音视频能力再升级
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/82670672 ...
1208 0
|
编解码 网络协议 视频直播
腾讯技术分享:微信小程序音视频技术背后的故事
1、引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富。而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过。
3490 0
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
463 7
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
518 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
111 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
78 6

热门文章

最新文章