# Cannot Render Video When 2nd Participant Joins Session

**URL:** <https://devforum.zoom.us/t/cannot-render-video-when-2nd-participant-joins-session/102514>\
**Category:** Web\
**Tags:** api, video-sdk\
**Created:** [January 25, 2024, 7:29am UTC](https://devforum.zoom.us/t/cannot-render-video-when-2nd-participant-joins-session/102514 "2024-01-25T07:29:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jennav](https://avatars.discourse-cdn.com/v4/letter/j/c4cdca/32.png) [@jennav](https://devforum.zoom.us/u/jennav)\
**Post date:** [January 25, 2024, 7:29am UTC](https://devforum.zoom.us/t/cannot-render-video-when-2nd-participant-joins-session/102514/1 "2024-01-25T07:29:23Z")

</div>

**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:

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

```

**Video SDK Code Snippets**

```auto
// 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]);

```

```auto
// 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)

---

<div class="post-metadata">

**Author:** ![jennav](https://avatars.discourse-cdn.com/v4/letter/j/c4cdca/32.png) [@jennav](https://devforum.zoom.us/u/jennav)\
**Post date:** [January 30, 2024, 12:31am UTC](https://devforum.zoom.us/t/cannot-render-video-when-2nd-participant-joins-session/102514/2 "2024-01-30T00:31:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ekaansh.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/ekaansh.zoom/32/55004_2.png) [@ekaansh.zoom](https://devforum.zoom.us/u/ekaansh.zoom)\
**Post date:** [January 31, 2024, 11:38am UTC](https://devforum.zoom.us/t/cannot-render-video-when-2nd-participant-joins-session/102514/3 "2024-01-31T11:38:35Z")

</div>

Closed on January 31, 2024, 11:38am UTC