【愚公系列】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。

相关文章
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
542 0
|
小程序 开发者
【愚公系列】2022年04月 微信小程序-实时音视频录制
【愚公系列】2022年04月 微信小程序-实时音视频录制
615 0
【愚公系列】2022年04月 微信小程序-实时音视频录制
|
小程序 开发者
【愚公系列】2022年04月 微信小程序-实时音视频播放
【愚公系列】2022年04月 微信小程序-实时音视频播放
547 0
【愚公系列】2022年04月 微信小程序-实时音视频播放
|
编解码 移动开发 小程序
浅尝云游戏音视频小程序
云电脑、云办公、云会议、云游戏等等云概念,在不平凡的 2020,依然此起彼伏,你方唱罢我登场!它们似乎在告诉着我们什么:5G 时代不会平凡?还是说正为某项能颠覆产业的技术应用而蛰伏着?
|
Web App开发 开发工具
常青:小程序音视频能力再升级
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/82670672 ...
1411 0
|
Web App开发 编解码 算法
微信多媒体团队梁俊斌访谈:聊一聊我所了解的音视频技术
本文内容由“微信多媒体团队”整理发布。 1、引言 广州TIT创意园,这里是腾讯在广州的研发团队所在地,LiveVideoStack采访了微信多媒体内核中心音视频算法高级工程师梁俊斌(Denny)。
3575 0
|
Web App开发 移动开发 iOS开发
小程序音视频能力技术负责人解读“小程序直播”
策划 / LiveVideoStack 责编 / 包研 一夜之间,“小程序+直播”成为多媒体开发者热议的话题。
2636 0
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
630 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
573 0
在线课堂+工具组件小程序uniapp移动端源码
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
5683 3