Render multiple video streams in one WebGL canvas

Question

I'd like to ask those who have used JSMPEG, how do you modify it to use only one WebGL canvas for multiple video streams?

I'm doing something like this:

const player1 = new JSMpeg.Player(url, {canvas: canvas, disableGl: false, autoplay: true, audioBufferSize: audioBuff, videoBufferSize: videoBuff});
const player2 = new JSMpeg.Player(url, {canvas: canvas2, disableGl: false, autoplay: true, audioBufferSize: audioBuff, videoBufferSize: videoBuff});
const player3 = new JSMpeg.Player(url, {canvas: canvas3, disableGl: false, autoplay: true, audioBufferSize: audioBuff, videoBufferSize: videoBuff});
const player4 = new JSMpeg.Player(url, {canvas: canvas4, disableGl: false, autoplay: true, audioBufferSize: audioBuff, videoBufferSize: videoBuff});
const player5 = new JSMpeg.Player(url, {canvas: canvas5, disableGl: false, autoplay: true, audioBufferSize: audioBuff, videoBufferSize: videoBuff});

and so on... trying 25 players/canvases.

For 5 players the browser can handle it, adding more crashes the browser (tested with Chrome/Firefox). I'm wondering if there's a way to just use "one big canvas" to handle the WebGL stuff and that the browser would allow it?

Answer 1

Never used that library, but since you are responsible for passing the HTMLCanvasElement, passing the same every time will make it use the same WebGL context for every instance, just like you asked for.

const canvas = document.createElement('canvas');
const gl1 = canvas.getContext('webgl');
const gl2 = canvas.getContext('webgl');

console.log( "same object:", gl1 === gl2 );

But I doubt the library will work well doing so...