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

---

前言

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

相关属性：

开通该组件权限后，开发者可在 joinVoIPChat 成功后，获取房间成员的 openid，传递给 voip-room 组件，以显示成员画面。

一、多人音视频对话

相关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'"/>
1
2

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);
      }
    })
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

备注：
getOpenId() 函数用于获取自己的openid，getOpenIdList() 封装了wx.joinVoIPChat返回值为房间中的人的openid列表，最后别忘记退出房间时调一下wx.exitVoIPChat。