Closed shitudouya closed 3 months ago
开发环境:vue3 + trtc-sdk-v5@5.5.2 问题描述:我模仿了官方示例,使用了右侧成员列表等布局,当切换布局的时候,之前容器id渲染到其他位置,导致DOM结构变化,视频不渲染了,我尝试使用trtc.on(TRTC.EVENT.VIDEO_PLAY_STATE_CHANGED, handleVideoStateChange)来解决问题:
const handleVideoStateChange = async (event) => { let { state, userId, streamType } = event; if (state === "PAUSED") { if (userId) { if (streamType === TRTC.TYPE.STREAM_TYPE_MAIN) { await nextTick(); await trtc.updateRemoteVideo({ userId, view: `${userId}_main`, streamType, }); } else { await nextTick(); await trtc.updateRemoteVideo({ userId, view: `${userId}_screen`, streamType, }); } } else { await nextTick(); await trtc.updateLocalVideo({ view: "local", }); } } };
发现切换的前几次可以正常渲染了,但是我多次切换测试后容器依旧变空白,video没有渲染了,我不知道该采用啥思路来解决这种问题,希望能解答
您好,这个问题监听播放状态可能不会很准确,因为涉及到这也是 “UI 操作导致的副作用”
这里可以直接在切换布局后 + nextTick() UI 更新完成时,直接统一调用一遍 updateRemoteVideo({ view: '你期待的新布局 id' })
nextTick()
updateRemoteVideo({ view: '你期待的新布局 id' })
可以尝试一下,有疑问我们可以再一起探讨
非常感谢,经过尝试,目前显示正常了。
开发环境:vue3 + trtc-sdk-v5@5.5.2 问题描述:我模仿了官方示例,使用了右侧成员列表等布局,当切换布局的时候,之前容器id渲染到其他位置,导致DOM结构变化,视频不渲染了,我尝试使用trtc.on(TRTC.EVENT.VIDEO_PLAY_STATE_CHANGED, handleVideoStateChange)来解决问题:
发现切换的前几次可以正常渲染了,但是我多次切换测试后容器依旧变空白,video没有渲染了,我不知道该采用啥思路来解决这种问题,希望能解答