评论

voip-room 使用参考

voip-room给我调到头大, 于是放出代码供各位参考.

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);
          }
        })
      })
    }
最后一次编辑于  2021-07-31  
点赞 0
收藏
评论

6 个评论

  • 末末
    末末
    2023-03-14

    请问下,这个音视频功能是面对所有人开放,谁点击都可以进入还是类似于腾讯会议那种创建一个会议,有链接还有对应的的会议号进入呢?

    2023-03-14
    赞同
    回复
  • 冯良忠
    冯良忠
    2022-12-16

    三个人以上的时候,前面的人退出就会卡住后面的人 !解决了没?怎么解决?

    2022-12-16
    赞同
    回复 1
    • Shen
      Shen
      2023-10-16
      请问解决了吗
      2023-10-16
      回复
  • Carl May
    Carl May
    2022-06-08

    请问下楼主,wx.onVoIPChatSpeakersChanged(function callback)

    这个接口是否有效,我调用后好像没效果...


    2022-06-08
    赞同
    回复
  • 热河
    热河
    2022-04-25

    大佬,按照你的代码,还是出现了先进的退出后面人卡住,超过三个人会黑屏的问题。能不能指点一下

    2022-04-25
    赞同
    回复
  • 淼淼
    淼淼
    2022-01-18

    有没有做过点击放大这个功能啊?

    2022-01-18
    赞同
    回复
  • 麻瓜
    麻瓜
    2022-01-10

    请问,先进入的人退出后后面的画面会卡住,有遇到吗?

    2022-01-10
    赞同
    回复 5
    • ruinb0w
      ruinb0w
      2022-01-13
      遇到过, 加上这两个就好
      2022-01-13
      回复
    • 麻瓜
      麻瓜
      2022-01-24回复ruinb0w
      我加过这段代码,可还是不行,就是三个人以上的时候,前面的人退出就会卡住后面的人!
      2022-01-24
      回复
    • 淼淼
      淼淼
      2022-03-25回复麻瓜
      解决了吗?遇到同样问题了。只有有人退出时才会出现。
      2022-03-25
      回复
    • 热河
      热河
      2022-04-25回复麻瓜
      同遇到这个问题,先进入的人退出,就会卡住第二个人的视频,即使再进也只有一个视频能动,有一个格子还是黑屏的。但是后进的人推出再进就不会就这个问题。两个人就存在这种问题了,大佬解决了吗。
      2022-04-25
      回复
    • ruinb0w
      ruinb0w
      2022-09-02
      方便的话给个代码片段我看看
      2022-09-02
      回复
登录 后发表内容