voip-room 使用参考
发布于 3 年前 作者 yzeng 1993 次浏览 来自 分享

voip-room给我调到头大, 于是放出代码供各位参考.
示例为uniapp, 语法为vue, 原生小程序请自行替换.

首先是voip-room组件的使用, 要注意mode的设置, 如果渲染的 voip-room 组件的openid属性对应自己的openid则mode属性要设为camera, 如果不是要设置为video.

<!-- wxml -->
<voip-room class="video" v-for="item in openid_list" :key="item" :openid="item" :mode="my_openid == item ? 'camera': 'video'"/>

相应的js代码如下

  • getOpenId() 函数用于获取自己的openid 很简单自己去写
  • getOpenIdList() 封装了wx.joinVoIPChat返回值为房间中的人的openid列表 很简单, 同样自己去写
  • 最后别忘记退出房间时调一下wx.exitVoIPChat
// 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);
          }
        })
      })
    }
回到顶部