如何保持活动相机不变，并在每个新连接上仅更新添加/删除的用户相机？

Question

我正在用React、Redux和Zoom Web SDK开发一个视频聊天应用程序。

我试图做的是在进入房间时为每个用户创建相机(画布API(，然后在离开房间时移除。

我实现了上面的功能，但每次新参与者进入或当前参与者离开时，所有摄像头都会重置并关闭

我认为这与各州和重新招标有关。

以下是我的核心代码片段。

const Session = () => {
... otherStates
const stream = useRef({})
const [ sessionUsers, setSessionUsers ] = useState([]) // This is the state for currentParticipants.
useEffect(() => {
... otherListeners.
client.on('peer-video-state-change',async(payload) => {
const { action, userId } = payload

try {
await participantsRender(action,userId)
} catch (error) {
console.log(error)
}
})
client.on('user-added', (user) => {
const participants = client.getAllUser();
setSessionUsers(participants)
})
client.on('user-removed', (user) => {
const participants = client.getAllUser();
setSessionUsers(participants)
})

},[client])
const participantsRender = async(action,userId) => {
if (!action || !userId) return console.log('Empty Param')
const canvas = document.querySelector(`.canvas[data-canvas_id="${userId}"]`)
if (action === 'Start'){
await stream.current.renderVideo(canvas, userId, 640, 360, 0, 0, 2);
} else if (action === 'Stop') {
await stream.current.stopRenderVideo(canvas, userId);
} else {
console.log('error')
}
}
const toggleVideo = async() => { // This is a feature to start/stop video for the user.
if (!stream) return
const uid = client.getCurrentUserInfo().userId
const canvas = document.querySelector(`.canvas[data-canvas_id="${uid}"]`)
if(!stream.current?.isCapturingVideo()) {
try {
await stream.current?.startVideo();
stream.current?.renderVideo(canvas, uid, 640, 360, 0, 0, 2);
} catch (error) {
console.log(error)
}
} else if (stream.current.isCapturingVideo()){
try {
await stream.current.stopVideo()
stream.current?.stopRenderVideo(canvas, uid)
} catch (error) {
console.log(error)
}
}
}
const CanvasRenderer = React.memo(( { state } ) => {
if (!state) return <></>
return state.map((item,index) => (
<div className = "canvas_container" key = {item.userId}>
<span className = "canvas_name_container">
<p className = "canvas_name_self">{item.userId || ''}</p>
</span>
<canvas className = "canvas" data-canvas_id = {item.userId}></canvas>
</div>
))
})

return (
<div>
<div className = "canvas_list_container">
<CanvasRenderer state = {sessionUsers} /> // This is the renderer for cameras.
</div>
</div>
)
}

Answer 1

您似乎正在使用多个画布进行视频渲染。不建议这样做。如果您需要在一个会话中管理多个参与者，我们建议您可以维护一个参与者列表，使用一个画布，并以编程方式决定应该在画布上绘制哪个。如果您熟悉React，可以参考React示例应用程序。