Блог

Я разрабатываю приложение для видеочата с помощью веб-SDK React, Redux и Zoom.

То, что я пытаюсь сделать, это создать камеру (canvas API) для каждого пользователя при входе в комнату, а затем удалить при выходе из комнаты.

Я реализовал описанную выше функцию, но каждый раз, когда входят новые участники или уходят текущие участники, все камеры сбрасываются и выключаются.

Я думаю, что это как-то связано с состояниями и повторной передачей.

Вот мой основной фрагмент кода этой функции.

 const Session = () =gt; {  ... otherStates  const stream = useRef({})  const [ sessionUsers, setSessionUsers ] = useState([]) // This is the state for currentParticipants.   useEffect(() =gt; {  ... otherListeners.   client.on('peer-video-state-change',async(payload) =gt; {  const { action, userId } = payload    try {  await participantsRender(action,userId)  } catch (error) {  console.log(error)  }  })   client.on('user-added', (user) =gt; {  const participants = client.getAllUser();  setSessionUsers(participants)  })   client.on('user-removed', (user) =gt; {  const participants = client.getAllUser();  setSessionUsers(participants)  })    },[client])   const participantsRender = async(action,userId) =gt; {  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() =gt; { // 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 } ) =gt; {  if (!state) return lt;gt;lt;/gt;   return state.map((item,index) =gt; (  lt;div className = "canvas_container" key = {item.userId}gt;  lt;span className = "canvas_name_container"gt;  lt;p className = "canvas_name_self"gt;{item.userId || ''}lt;/pgt;  lt;/spangt;  lt;canvas className = "canvas" data-canvas_id = {item.userId}gt;lt;/canvasgt;  lt;/divgt;  ))  })    return (  lt;divgt;  lt;div className = "canvas_list_container"gt;  lt;CanvasRenderer state = {sessionUsers} /gt; // This is the renderer for cameras.  lt;/divgt;  lt;/divgt;  ) }  

Похоже, что вы используете несколько полотен для рендеринга видео. Это не рекомендуется. Если вам нужно управлять несколькими участниками сеанса, мы рекомендуем вам вести список участников, использовать один холст и программно решать, какие из них следует рисовать на холсте. Если вы знакомы с React, вы можете обратиться к приложению react-sample-app.