Cannot Render Video When 2nd Participant Joins Session

Video SDK Web
,
1

Description
Hello, I cannot render the video of the 2nd participant that joins the session.

Steps to Reproduce:

  • Participant A joins the session
  • Participant B joins the session. Participant B can see both Participant A, and their self-view video, in the session.
  • Error - Participant A can see their self-view video in the session, but cannot see Participant B’s video in the session.

Browser Console Error
There is no error in the console. Which makes me think I am just not using the SDK correctly. I have checked that I am passing in the correct userId, and the correct <canvas> element to the stream.render() function. So I am not really sure what I am doing wrong.

Which Web Video SDK version?
I am using the VideoSDK CDN. Here is the code snippet:

       await client.init('en-US', 'CDN', {
          stayAwake: true,
        });

Video SDK Code Snippets

// useZoomVideo.ts

  const renderRemoteParticipant = useCallback(() => {
    try {
      const participantViewCanvasElement = document.getElementById(
        REMOTE_PARTICIPANT_VIEW_CANVAS_ID
      ) as HTMLCanvasElement;
      const localParticipantId = zoomClient.getCurrentUserInfo()?.userId;
      const remoteParticipants = (zoomClient.getAllUser() || []).filter((user) => user.userId !== localParticipantId);

      remoteParticipants.forEach(async (user) => {
        if (user.bVideoOn) {
          try {
            await mediaStream?.renderVideo(
              participantViewCanvasElement,
              user.userId,
              REMOTE_PARTICIPANT_VIEW_WIDTH,
              REMOTE_PARTICIPANT_VIEW_HEIGHT,
              0,
              0,
              2
            );
            setIsParticipantVideoEnabled(true);
          } catch (e) {
            console.log('@@@ error, render video: ', e);
          }

        } else {
          setIsParticipantVideoEnabled(false);
        }
      });
    } catch (e) {
      console.error('renderRemoteParticipant error', e);
    }
  }, [zoomClient, mediaStream, setIsParticipantVideoEnabled]);


  const onParticipantChange = (payload: ParticipantPropertiesPayload) => {
    console.log(`onParticipantChange, ParticipantPropertiesPayload: ${JSON.stringify(payload)}`);
    renderRemoteParticipant();
  };

  useEffect(() => {
    zoomClient.on('connection-change', onConnectionChange);
    zoomClient.on('media-sdk-change', onMediaSDKChange);

    // listen for participants joining and leaving
    zoomClient.on('user-added', onParticipantChange);
    zoomClient.on('user-removed', onParticipantChange);
    zoomClient.on('user-updated', onParticipantChange);
    return () => {
      zoomClient.off('connection-change', onConnectionChange);
      zoomClient.off('media-sdk-change', onMediaSDKChange);
      zoomClient.off('user-added', onParticipantChange);
      zoomClient.off('user-removed', onParticipantChange);
      zoomClient.off('user-updated', onParticipantChange);
    };
  }, [zoomClient]);


// RemoteParticipantView.tsx

import { Box, styled } from '@mui/material';
import {
  REMOTE_PARTICIPANT_VIEW_CANVAS_ID,
  REMOTE_PARTICIPANT_VIEW_HEIGHT,
  REMOTE_PARTICIPANT_VIEW_WIDTH,
} from '../constants';
import VideocamOffIcon from '@mui/icons-material/VideocamOff';
import useZoomVideo from '../hooks/useZoomVideo';

const RemoteParticipantVideoOff = styled('div')({
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  color: 'white',
  opacity: 0.5,
});

function RemoteParticipantView() {
  const { isRemoteParticipantVideoEnabled } = useZoomVideo();

  return (
    <Box display="flex" justifyContent="center" sx={{ background: 'black' }}>
      {!isRemoteParticipantVideoEnabled && (
        <RemoteParticipantVideoOff>
          <VideocamOffIcon fontSize="large" />
        </RemoteParticipantVideoOff>
      )}
      <canvas
        data-testid="remote-participant-view-video"
        id={REMOTE_PARTICIPANT_VIEW_CANVAS_ID}
        width={REMOTE_PARTICIPANT_VIEW_WIDTH}
        height={REMOTE_PARTICIPANT_VIEW_HEIGHT}
      ></canvas>
    </Box>
  );
}

export default RemoteParticipantView;

To Reproduce
Steps to reproduce the behavior:

  • Participant A joins the session
  • Participant B joins the session. Participant B can see both Participant A, and their self-view video, in the session.
  • Error - Participant A can see their self-view video in the session, but cannot see Participant B’s video in the session.

Screenshots

  • When there is a 2nd participant that has joined the session, and I am already in the session, their video does not render on the canvas

Device (please complete the following information):

  • Device: MacBook Pro
  • OS: Sonoma 14.1.1
  • Browser: Chrome
  • Browser Version: Version 120.0.6099.234 (Official Build) (arm64)
2

Issue was fixed, it turned out to be a React issue, closing this case.