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

相关文章
|
4月前
|
移动开发 监控 小程序
mPaaS常见问题之音视频通话微信小程序通话界面录制为画中画模式如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
|
编解码 移动开发 小程序
浅尝云游戏音视频小程序
云电脑、云办公、云会议、云游戏等等云概念,在不平凡的 2020,依然此起彼伏,你方唱罢我登场!它们似乎在告诉着我们什么:5G 时代不会平凡?还是说正为某项能颠覆产业的技术应用而蛰伏着?
|
小程序 开发者
【愚公系列】2022年04月 微信小程序-实时音视频录制
【愚公系列】2022年04月 微信小程序-实时音视频录制
284 0
【愚公系列】2022年04月 微信小程序-实时音视频录制
|
小程序 开发者
【愚公系列】2022年04月 微信小程序-实时音视频播放
【愚公系列】2022年04月 微信小程序-实时音视频播放
246 0
【愚公系列】2022年04月 微信小程序-实时音视频播放
|
Web App开发 开发工具
常青:小程序音视频能力再升级
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/82670672 ...
1193 0
|
编解码 网络协议 视频直播
腾讯技术分享:微信小程序音视频技术背后的故事
1、引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富。而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过。
3421 0
|
20天前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
225 65
|
13天前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `&lt;swiper&gt;` 实现,二是利用 Nut UI 的 `&lt;nut-swiper&gt;` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
5天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
19 3
|
13天前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享

热门文章

最新文章