Description
I’ve implemented 2 different views: grid view (same as in your sample app) and view where there is full screen video and scrollable panel with 8 video tiles to right. After 2-3 switching between views I see warning from topic and all videos disappears. Although at the same time everyone can see me (if they didn’t switch between views). And if I turn off camera then instead video I see last frame from video flows other users.
Warning
WARNING: Too many active WebGL contexts. Oldest context will be lost.
Web Video SDK version
1.0.2
Screenshots
Device (please complete the following information):
OS: Windows 10
Browser: Chrome
Latest Browser Version
Additional context
Warning count increase after every views switching.
I invoke stopRenderVideo after switching between views (for the old canvas) and invoke startRenderVideo for new
bVideoOn is true for users which I doesn’t see
If I repeat similar steps in your Sample app (1. go to /video 2. turn on video 3. back to / 4. repeat from 1), I see the same warning and error below
The same error appears for me (not always and not for all)
It appears you may not be using the canvas elements correctly, and it may be causing the issues with garbage collection. I see you are calling stopRender on the old canvas and startRender on the new one, but typically, you should be called on the exact same canvas.
In addition, our API allows users to draw multiple streams on a single canvas, so I would encourage you to take a closer look at our demo app.
If you are able to reproduce the issue on our sample app, and provide steps to reproduce with screenshots of the problem, then that’d be a helpful for us to investigate further.
Please check my question above (‘Additional context’ section, point 4).
Start Sample app (demo app) with several participants who has camera turn on. Next steps for one of them.
Go to /video
Go to back
Repeat more than 5-6 times from step 2.
And unfortunately I can’t using the same canvas because one of view have scrollable video tiles panel. Also If I go to /video, then go to /, and come back to /video, then your canvas will updated (because ‘/video’ page will be fully re-render). In my example old canvas destroying as same as in your.
After reviewing your use case with our SDK Engineers, we suggest the following:
We noticed that the SDK version you are using is 1.0.2. Can you try upgrading to 1.0.3?
What is the reason you need to repeat step 2 and 3 5-6 times? Do you run into this issue via normal use-cases? It is possible that this rapid switching doesn’t allow the JS engine enough time to garbage-collect the WebGL contexts.
Can you elaborate on “scrollable video tiles panel”? We suggest using a single canvas split into 8, not 8 different canvases.
“In my example old canvas destroying as same as in your” → Can you also clarify how? While the use-case is similar, the way canvas/video is invalidated/used/cleared might be different;
Ultimately, the error does indicate that the user has too many “live” Web GL contexts at any one time. If you are truly just using grid view (with 1 active context, split into 9 different subparts) and your scrollable view (with ~9 active contexts), are properly switching between the two – making sure to terminate any videos attached to any canvas elements – then this should theoretically be within the maximum allowable contexts.
The fact that it isn’t must mean there are too many active contexts, or perhaps your workstation is limited in processing power and cannot handle the 9 contexts.
As mentioned above, the “correct” approach is to have a single canvas that is treated as having 8 sub-pieces. You should be able to refer to our gallery view code in the sample app to have a better idea on how you could split it.
"What is the reason you need to repeat step 2 and 3 5-6 times? " - i have 2 views. And participants can freely switch between them whenever they want. I can’t count on them to do it with little frequency, or not at all.
Can you elaborate on “scrollable video tiles panel”? - I’ve implemented 2 context in this view. The first one to display the main participant in full screen (he is always 1 and his video must be full screen), the second is to display the rest of the participants. To render the context, I use pretty much the same useRenderVIdeo hook that you have. The only differences are that I divided the logic of your one large useEffect into several useEffects, and isShallowEqual compares the entire array, not just the first element. The second view uses only one context and is identical to yours in the demo app.
Can you also clarify how? - Stop all render videos for every context on view + fully destroying canvas element after hiding view component.
Now I tried to make 2 views, in each of which one context. The problem repeated itself. So I conclude that the number of simultaneous contexts on one view does not matter.
So… then I will implement one context for all views. Which is not very convenient, because I will have to abandon scrolling and make different pagination for each view. Since one of them will now always have a different number of video tiles. Depending on the screen size…
