Video from participant’s cameras does not appear even though the camera initialization and attachment to a container is successful

Video SDK
1

All integrations were made following the Zoom Video SDK documentation.
I’m having some unsolved issues in the documentation.

When a participant turns on their camera, a black screen appears for the other participants, no video is displayed.

The participant who turned on the camera in this case was ID 16786432. In DOM, after the participant turns on their camera, the result is this:

<video-player-container classname="ZoomMeeting_videoPlayerContainer__G9DcX"
    style="min-height: 700px; border: 1px solid var(--brd-color); border-radius: 5px; padding: 0.5rem; position: relative; display: block;">
    <div class="ZoomMeeting_focusedUsersWrapper__No4Ue">
        <ul class="user-list ZoomMeeting_focusedUserList__gFAkH" style="grid-template-columns: repeat(2, 1fr);">
            <div class="video-cell ZoomMeeting_focusedVideoCell__C9G0d">
                <span class="ZoomMeeting_userName__Ic8sd">Yan ADM</span>
            </div>
            <div class="video-cell ZoomMeeting_focusedVideoCell__C9G0d">
                <video-player data-userid="16786432" classname="ZoomMeeting_videoPlayer__en__2" node-id=""
                    media-type="video" style="display: block;">
                    <div style="width: 100%; height: 100%;">
                    </div>
                </video-player>
                <span class="ZoomMeeting_userName__Ic8sd">Yan Ramos</span>
            </div>
        </ul>
    </div>
    <video-player node-id="16786432" data-userid="16786432" media-type="video" style="display: block;">
        <div style="width: 100%; height: 100%;">
        </div>
    </video-player>
</video-player-container>

Below is the excerpt cited in the documentation I used:

export const renderParticipantVideos = async (client, stream, sessionParticipants, videoContainer) => {
    const participants = client.getAllUser()
    const existingVideos = Array.from(videoContainer?.children || [])
    const existingUserIds = existingVideos.map(video => video.getAttribute('data-userid'))

    const usersToRender = participants?.filter(p => p.bVideoOn && !existingUserIds.includes(p.userId)) || []

    // Renderiza novos vídeos
    for (let i = 0; i < usersToRender.length; i++) {
        try {
            if (!existingUserIds.includes(usersToRender[i]?.userId.toString())) {
                const userVideo = await stream?.attachVideo(usersToRender[i]?.userId, 3)
                userVideo.setAttribute('data-userid', usersToRender[i]?.userId)
                videoContainer?.appendChild(userVideo)
            }
        } catch (error) {
            console.error('Error rendering video for user: ', usersToRender[i]?.userId, error)
        }
    }
}

The documentation states that the enforceMultipleVideos option must be activated for multiple camera rendering to work correctly, so when starting the session, I pass this parameter:

export const tryJoinSession = async (client, sessionName, user, updateSessionInfos, updateSessionParticipants) => {
    try {
        const jwt = await getVideoSDKJWT(sessionName);
        await client.init('pt-BR', 'Global', { patchJsMedia: true }, { leaveOnPageUnload: true }, { enforceMultipleVideos: true })

        const joinResponse = await client.join(sessionName, jwt, `${user?.firstName} ${user?.lastName}`, '123')
        if (joinResponse?.zoomID) {
            updateSessionInfos({ isJoined: true, zoomInfos: client.getSessionInfo(), hostInfos: client.getCurrentUserInfo() })
            updateSessionParticipants(client.getAllUser())
            return joinResponse
        }
    } catch (error) {
        console.error("Error joining session:", error)
        throw error
    }
}

I also saw in the documentation that activating SharedArrayBuffer is optional for better performance, but not necessary for camera rendering to work, so I didn’t activate it.

Below is more information about the versions and system I am using:
Video SDK version: 1.12.5
React version: 18
Next JS version: 14.2.2
OS: Windows 11
Browser: Google Chrome
Browser Version 129.0.6668.70 (Official Build) (64 bits)

2

Hey @dev_lxpead

Thanks for your feedback.

Could you help check the style of the video-player element? By default, the element doesn’t have an initial height. We recommend applying the following CSS rule to the video-player element.

video-player {
  // width:xxxpx;
  aspect-ratio: 16/9; // default ratio is 16/9, but can update it base on the sending ratio 
}

Thanks
Vic

3

Hello! Thanks for the feedback @vic.yang !
I applied the adjustment to the video-layer container style, but the camera still isn’t rendered on the page.

I had two questions while debugging:
1 - Does the Shared Array Buffer have to be active for the video rendering to work?

2 - When calling document.querySelector(‘video-player-container’).appendChild(userVideo), should something else be done? Isn’t this execution responsible for already bringing the student’s video?

I believe the problem may be in one of these two points.

4

Hey @dev_lxpead

Does the Shared Array Buffer have to be active for the video rendering to work?

It’s not required. Enabling SharedArrayBuffer will improve the performance.

When calling document.querySelector(‘video-player-container’).appendChild(userVideo), should something else be done? Isn’t this execution responsible for already bringing the student’s video?

No additional actions should be required if both the UserID and style are correct.

Thanks
Vic

5

Hello @vic.yang thanks for your feedback!

I found the problem while debugging point by point:
The container with the video-cell class was a

tag, when I changed it to a tag the cameras started to be displayed on the page.
In the end the HTML structure looked like this:

<div classname="ZoomMeeting_videoPlayerContainer__G9DcX"
    style="min-height: 700px; border: 1px solid var(--brd-color); border-radius: 5px; padding: 0.5rem; position: relative; display: block;">
    <div class="ZoomMeeting_focusedUsersWrapper__No4Ue">
        <ul class="user-list ZoomMeeting_focusedUserList__gFAkH" style="grid-template-columns: repeat(2, 1fr);">
            <div>
                <video-player-container class="video-cell ZoomMeeting_focusedVideoCell__C9G0d">
                    <span class="ZoomMeeting_userName__Ic8sd">Yan ADM</span>
                </video-player-container>
            </div>
            <span class="ZoomMeeting_userName__Ic8sd">Yan Ramos</span>
    </div>
    </ul>
</div>
<video-player node-id="16786432" data-userid="16786432" media-type="video" style="display: block;">
    <div style="width: 100%; height: 100%;">
    </div>
</video-player>
</div>