问题回顾

小程序多人视频通话过程中出现黑屏现象,经过排查发现小程序官方组件live-play在接收推流之后初始化了上下文,导致了无法出现视频画面。

解决方案

  1. 针对初始化上下文无法显示画面的问题,选择在初始化完成之后手动对视频组件的播放功能进行手动调用,即加上stopplay方法:

    1. stream.playContext().stop();
    2. stream.playContext().play();
  2. live-player组件在第一次渲染时会自动播放画面,说明渲染和更新的动作会导致自动播放的效果有偏差。故可以考虑为每次streamList的变化重新渲染而不是更新组件的上下文。

    1. <live-player wx:if="item.hasVideos || item.hasAudios"></liver-player>

    方案评估

    筛选出两种解决方案,综合需求分析,第一种方案会产生无法预期的效果。例如:视频通话模块被重复播放是否会继续影响后续的通话效果以及另外的不可预期的效果。而采用第二种方式不会受其他原因的影响,展示单纯的渲染或者不渲染组件,并且符合需求的展示逻辑,避免了组件被重复的更新,优化了界面的性能。故:采取第二种解决方案。