Description
Following the instructions here: Video SDK - web - Video Firefox fails to perform normally with 2 or more participant video feeds. The videos start blinking black and glitching out. The docs suggest that you can use the individual elements across all browsers. Is this a known issue? Do I need to attempt to use the single HTML canvas instead? I would rather use the documentation code that follows with individual elements – seems to be working on all other browsers. And docs say “previously you could only use the single canvas method” implying the individual one should work now?
Error?
Video feeds go in and out and flash black screen
How To Reproduce Steps to reproduce the behavior including: 1. Listen for particpant video streams
*2. attempt to render more than 1 participant video:
stream.attachVideo(USER_ID, RESOLUTION).then((userVideo) => {
document.querySelector(‘video-player-container’).appendChild(userVideo)
})
*3. Firefox 124.0.1 ( 64 bit )
It’s a known limitation. When the page doesn’t enable SharedArrayBuffer, Firefox only allows one video-player element per video-player-container element.
You can determine how to implement this using the stream.isSupportMultipleVideos() method. If the return value is false, then each video-player element needs a parent video-player-container element.
For Safari I’m able to render up to 4 videos at a time – is that the known max? I’ve tried both tactics:
1 video-player-container with multiple videos under it
Multiple video-player-containers with single videos under it ( like FireFox fix)
However I run into the same error each time in that Safari is subscribed to its max of 4 video feeds.
The specific 2 errors are as follows:
“There are too many active WebGL contexts on this page, the oldest context will be lost.”
"Error: {type: “INVALID_OPERATION”, reason: “subscribe video counts greater than maximum size (4)”}
Any ideas on this? Even when I introduce pagination i’m running into this issue – is there anything beyond stream.detachVideo(userId) to properly cleanup?