Video is freezes if joined 4 or more participants

Description
We’re encountering a video freezing issue on Zoom Video SDK when there are four or more participants, and the console is showing a “webglcontextlost [ID]” message.

Video working fine, if below 4 participants.

Any suggestions on how to fix this?

Browser Console Error
webglcontextlost participants-canvas-1

Which Web Video SDK version?
1.8.10

Video SDK Code Snippets
const renderVideo = (stream, client, isHost) => {
if (!stream.isCameraTaken()) {
const session = client.getSessionInfo();
setTimeout(() => {
stream.startVideo({ videoElement: document.querySelector(isHost ? ‘#e-self-view-video’ : ‘#participants-video-’ + session.userId), hd: stream.isSupportHDVideo() }).then(() => {
// if MediaStreamTrackProcessor is not supported
if (!(typeof MediaStreamTrackProcessor === ‘function’)) {
// render video on HTML Canvas Element
stream.renderVideo(document.querySelector(isHost ? “#e-self-view-canvas” : “#participants-canvas-” + session.userId), session.userId, 320, 180, 0, 0, 2).then(() => {
// show HTML Canvas Element in DOM
document.querySelector(isHost ? “#e-self-view-canvas” : “#participants-canvas-” + session.userId).style.display = ‘block’;
document.querySelector(isHost ? “#e-self-view-video” : “#participants-video-” + session.userId).style.display = ‘none’;
}).catch((error) => {
console.log(error);
})
} else {
// show HTML Video Element in DOM
stream.renderVideo(document.querySelector(isHost ? “#e-self-view-canvas” : “#participants-canvas-” + session.userId), session.userId, 320, 180, 0, 0, 2).then(() => {
// show HTML Canvas Element in DOM
document.querySelector(isHost ? “#e-self-view-canvas” : “#participants-canvas-” + session.userId).style.display = ‘block’;
document.querySelector(isHost ? “#e-self-view-video” : “#participants-video-” + session.userId).style.display = ‘none’;
}).catch((error) => {
console.log(error);
})
}
}).catch((error) => {
console.log(error)
})
}, 5000);
}
}

To Reproduce(If applicable)
Steps to reproduce the behavior:

  1. Starting a session
  2. In our scenario 6 Participants are joining. Issue occurs while joining 4 and above participants.
  3. Enabling video by each participants.
  4. Videos are freezes for all.

Device (please complete the following information):

  • Device: Mac, HP, Acer Desktop and laptops
  • OS: Mac, Windows
  • Browser: Google chrome

Additional context
We have checked over all zoom forums, and we tried below steps.

  1. We tried and corrected with network quality.
  2. We tried and corrected with video quality.
  3. Handled the canvas and videos as per the zoom documentation.

Hey @rajkumarmayavaram

Thanks for your feedback.

Did you enable SharedArrayBuffer on your site?

Are you rendering both self and other participants’ videos on the same canvas?

Would you mind reporting the issue to us with client-side telemetry if possible?

Thanks
Vic

@vic.yang
We have reviewed the above links.

I’ve uploaded the requirements as an image for your reference.

According to the documentation for the Zoom Video SDK, how can we fulfill our requirement within a single canvas ?

We want to render each participants videos like the above image.

Hey @rajkumarmayavaram

To achieve the desired effect in your picture, I have provided two reference solutions:

  1. If you have enabled SharedArrayBuffer, the bottom layer of the visualization area will be an entire canvas. You will need to calculate the coordinates of the host and participant video and then draw them. Other content can be overlaid on the canvas element as DOM elements.

  2. If SharedArrayBuffer is not supported, please make sure to set enforceMultipleVideos to true in the init method. This will divide the presentation of the video into two parts: the host view using a canvas, and other participants using a canvas. Other content will remain as DOM elements.

Let me know if you have any further questions or need additional assistance.

Thanks
Vic

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.