我也遇到了相同的问题,当有第二位成员加入时,在第一位手机上是不能看到第二位成员的画面,也是显示黑色占位框,有声音,但不能显示画面,第二位成员的手机可以正常显示2个人的画面,求解
通过wx.joinVoIPChat调用voip-room 后加入的成员不能及时显示画面,求解?通过 wx.joinVoIPChat API调用成员后, 第一个加入的成员可以正常显示, 第二个成员能显示出黑色占位框,有声音,但不能显示画面,如果占击分享后返回,则可以刷新 出画面 加入时界面 [图片] 点击邀请后界面 [图片] 源码: wxml <view class="view_room" wx:if="{{m1.indexOf(openIdList, cid) > -1}}"> <block wx:for="{{openIdList}}" wx:key="*this"> <voip-room openid="{{item}}" mode="{{selfOpenId === item ? 'camera' : 'video'}}"></voip-room> </block> <block wx:for="{{blankview}}" wx:key="*this"> <view class="view_yq"> <view>+ 邀请</view> <button open-type="share" title="邀请"></button> </view> </block> </view> <view class="room_esc" wx:else> 房间已经被解散! </view> <view style="display:none;color:#fff"> {{openIdList.length}} - {{joinVoIPChat}} <view>{{openIdList}}</view> <view>signature:{{signature}}</view> <view>nonceStr:{{nonceStr}}</view> <view>timeStamp:{{timeStamp}}</view> <view>groupId:{{groupId}}</view> <view>cid:{{cid}}</view> <view>selfOpenId:{{selfOpenId}}</view> <view>session_key:{{session_key}}</view> </view> <view style="height:60px;"></view> <view class="room_menu"> <view bindtap="goMuteConfig" data-v="muteMicrophone"><text class="fal fa-microphone{{room_menu[1]}}"></text>{{room_menu[0]}}</view> <view bindtap="goMuteConfig" data-v="muteEarphone"><text class="fal fa-volume{{room_menu[4]}}"></text>{{room_menu[3]}}</view> <navigator bindtap="goExit" wx:if="{{selfOpenId == cid}}"><text class="fal fa-power-off"></text>结束面试</navigator> <navigator target="miniProgram" open-type="exit" wx:else><text class="fal fa-power-off"></text>退出面试</navigator> </view> <wxs module="m1"> function defineIndexOf(str, val) { return str.indexOf(val); } module.exports = { indexOf: defineIndexOf } </wxs> js const app = getApp() Page({ /** * 页面的初始数据 */ data: { groupId : '', joinVoIPChat:'0', openIdList:[], blankview: ['','','',''], room_menu:['开启话筒', '', false, '开启声音', '', false], yq_img:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ selfOpenId: app.globalData.openid, session_key: app.globalData.session_key, cid: ( options.cid != '' && options.cid != undefined ) ? options.cid : app.globalData.openid, }) wx.showLoading({mask: false }) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var _this =this; //设置是否保持常亮状态。仅在当前小程序生效,离开小程序后设置失效 wx.setKeepScreenOn({ keepScreenOn: true }) wx.request({ url: app.api_url + 'Room/index/' + app.globalData.openid + '/' + app.globalData.userid, data: {openid:_this.data.cid, session_key:app.globalData.session_key}, header: { 'content-type': 'application/x-www-form-urlencoded' }, method: 'POST', success(res) { _this.setData(res.data) //加入 (创建) 实时语音通话 wx.joinVoIPChat({ signature: res.data.signature, nonceStr: res.data.nonceStr, timeStamp: res.data.timeStamp, groupId: res.data.groupId, roomType: 'video', success(res){ console.log(res) _this.setData({ openIdList: res.openIdList, blankview: Array.apply(null,{length: (4 - res.openIdList.length) }) }) wx.hideLoading(); }, fail(res){ _this.setData({ joinVoIPChat:'fail' + res.errCode + res.errMsg }) } }) //订阅视频画面成员。对于视频房间,当成员超过两人时需进行订阅,否则只能看到最先加入房间的两人画面。 wx.subscribeVoIPVideoMembers({ openIdList: _this.data.openIdList, success(res){ console.log('subscribeVoIPVideoMembers success') } }) //监听实时语音通话成员在线状态变化事件。有成员加入/退出通话时触发回调 wx.onVoIPChatMembersChanged(function(res){ _this.setData({ openIdList: res.openIdList, blankview: Array.apply(null,{length: (4 - res.openIdList.length) }) }) //订阅视频画面成员。对于视频房间,当成员超过两人时需进行订阅,否则只能看到最先加入房间的两人画面。 wx.subscribeVoIPVideoMembers({ openIdList: _this.data.openIdList, success(res){ console.log('subscribeVoIPVideoMembers success_b') } }) }) } }) setInterval(function(){_this.onShow;console.log('setInterval 10')}, 10000); }, goMuteConfig:function(e){ if( e.currentTarget.dataset.v == 'muteMicrophone' ){ if( this.data.room_menu[1] == '' ){ this.setData({room_menu: ['关闭话筒', '-slash', true, this.data.room_menu[3], this.data.room_menu[4], this.data.room_menu[5]]}) }else{ this.setData({room_menu: ['开启话筒', '', false, this.data.room_menu[3], this.data.room_menu[4], this.data.room_menu[5]]}) } }else{ if( this.data.room_menu[4] == '' ){ this.setData({room_menu: [this.data.room_menu[0], this.data.room_menu[1], this.data.room_menu[2],'关闭声音', '-slash', true]}) }else{ this.setData({room_menu: [this.data.room_menu[0], this.data.room_menu[1], this.data.room_menu[2],'开启声音', '', false]}) } } wx.updateVoIPChatMuteConfig({ muteConfig:{ muteMicrophone: this.data.room_menu[2], muteEarphone: this.data.room_menu[5] } }) }, goExit:function(){ wx.exitVoIPChat(); // wx.redirectTo({url: 'index'}) wx.navigateBack({delta:1}) }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { wx.exitVoIPChat(); }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { var _this = this return { title: '邀请您加入远程面试', path: '/pages/call/share?cid=' + app.globalData.openid, imageUrl: _this.data.yq_img, success: function (res) { console.log('转发成功' + app.globalData.openid) } } } })
2020-10-12