【愚公系列】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产品过程中遇到的各种挑战
258 0
|
编解码 移动开发 小程序
浅尝云游戏音视频小程序
云电脑、云办公、云会议、云游戏等等云概念,在不平凡的 2020,依然此起彼伏,你方唱罢我登场!它们似乎在告诉着我们什么:5G 时代不会平凡?还是说正为某项能颠覆产业的技术应用而蛰伏着?
|
小程序 开发者
【愚公系列】2022年04月 微信小程序-实时音视频录制
【愚公系列】2022年04月 微信小程序-实时音视频录制
384 0
【愚公系列】2022年04月 微信小程序-实时音视频录制
|
小程序 开发者
【愚公系列】2022年04月 微信小程序-实时音视频播放
【愚公系列】2022年04月 微信小程序-实时音视频播放
364 0
【愚公系列】2022年04月 微信小程序-实时音视频播放
|
Web App开发 开发工具
常青:小程序音视频能力再升级
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/82670672 ...
1252 0
|
Web App开发 编解码 算法
微信多媒体团队梁俊斌访谈:聊一聊我所了解的音视频技术
本文内容由“微信多媒体团队”整理发布。 1、引言 广州TIT创意园,这里是腾讯在广州的研发团队所在地,LiveVideoStack采访了微信多媒体内核中心音视频算法高级工程师梁俊斌(Denny)。
3187 0
|
Web App开发 移动开发 iOS开发
小程序音视频能力技术负责人解读“小程序直播”
策划 / LiveVideoStack 责编 / 包研 一夜之间,“小程序+直播”成为多媒体开发者热议的话题。
2420 0
|
7月前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
4月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
997 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
11月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
2485 7

热门文章

最新文章