Remote participant video player not working

Hey @m.martins

After making a few code changes, it can now work:

  • In useZoomVideo.tsx, within the toggleVideo method, I removed the call to mediaStream.detachVideo after stopVideo. Since both self-view and remote-view rendering use ParticipantContainer, there’s no need for an additional detach video here.

    const toggleVideo = async () => {
      const userId = zoomClient!.getCurrentUserInfo().userId;
      if (mediaStream!.isCapturingVideo()) {
       // mediaStream!.stopVideo().then(() => mediaStream!.detachVideo(userId));
       mediaStream!.stopVideo();
      } else {
        mediaStream!.startVideo();
      }
    };
    
  • In ParticipantContainer.tsx, within the useEffect, you originally only handled the scenario where bVideoOn is true, but you missed the scenario where it’s false. Therefore, you need to call detachVideo to unbind the user from the video-player.

    useEffect(() => {
      if (participant.bVideoOn) {
        mediaStream.attachVideo(participant.userId, 3, videoPlayerRef.current);
      }else{
        mediaStream.detachVideo(participant.userId,videoPlayerRef.current);
      }
    }, [participant,mediaStream]); 
    

Please feel free to reach out if you have any further questions or require additional assistance.

Thanks
Vic

2 Likes