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);
}
})
})
}