WebGLContextLost - Multiple Canvas

Continuing the discussion from WebGLContextLost:

Hi
I am facing the same issue reported above. I need to render multiple participants on multiple canvases as per our requirement.

When i try to switch video feed from one canvas to another a few times, I get the following error:

Too many active WebGL contexts. Oldest context will be lost.

webglcontextlost WebGLContextEvent

SDK Version:
1.5.1

To Reproduce
Steps to reproduce the behavior:

  1. Create two canvases with 2 different video streams
  2. switch the video streams between the canvases multiple times

Screenshots
webgl

Device (please complete the following information):
OS: Windows
Browser: Chrome - version: 107.0.5304.88

Have you found any solution/workaround for the bug ?

Thanks
Ashish

Hi

After a moment of research, I understood that i won’t be able to reach the expected results because of the problem you are facing.
But it’s been almost a year since I posted my issue, and it seems that you can now display stream in video element :

I replaced Zoom by Jitsi which is using video element to display stream and I never met limitations due to performance.

Hope it will help you

Hi @ALanois

Thanks for the info. If it is not inconvenient, could you please describe the issues that you faced due to this error? I am still working on a test server within a controlled environment. As such the impact is minimal for now. It would be helpful if you can share your experience so that I can be better prepared for production release.

Thanks
Ashish

Hi @ashish.beetle

Here is my issue:
I needed to display each participant in a separate canvas to get more customization capabilities like rounded video and moving them from top to bottom based on the last speakers.

When 2 or 3 participants were in the room, there was no problem to have couples of canvas in the page, but when more participants joined the browser sent error due to WebGlContextLost which come when your browser consumes too much from your CPU.

I tried to remove hidden canvas instead of hiding them with style to limit CPU consumption, but when a canvas is created, it comes with a WebGlContext which is not destroyed when the canvas is removed from the DOM.

Video element doesn’t have that kind of limitation, that’s why I go for this solution.

1 Like

Hey @ashish.beetle @ALanois

Thanks for sharing your experience with Video SDK Web.

Remotion, using the Video SDK Web in their application, shared a way how to render remote user video streams. Our quest to build Zoom in web: 3 treasure chests we unlocked along the way

Hope this article will give you some help.

Thanks
Vic