问题背景

小程序的多人视频通话,经常出现黑屏现象,导致部分用户无法正常参与到视频通话中。经过初步的分析和定位,发现:当与会过程中有用户关闭了摄像头和音频权限后,参与会议的其他使用者会看到屏幕上该用户所占的视频画面位置被移除。当该用户重新开启了摄像头或者音频权限后,用户的画面出现黑屏。

产生原因

经过分析,查找到微信小程序的官方组件live-play会在接收到其他与会者操作权限更改后的推送流后进行上下文的初始化操作,从而导致了画面无法正常进行播放的异常现象。

解决方案

针对分析出来的原因,指定了两套解决方案:

  1. 为模块手动调用停止(stop)和播放(play)的方法,从而手动更新显示画面。
  2. 在模板渲染时加上逻辑判断,让live-player组件及时根据流推送的信息进行渲染而不是初始化。

综合评估两种解决方案,因为第一种方案会产生不可预期效果,最终采用第二种解决方案。

最终效果

在完成了方案的实施之后,经过反复验证,小程序的视频通话组件可以正常使用,不再因为某个用户的权限操作而出现黑屏的情况。
image.pngimage.png
image.png
image.png