1

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?

quarks
  • 33,478
  • 73
  • 290
  • 513

1 Answers1

2

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...

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Not sure what you mean, each player in my code have separate canvases. e.g. canvas, canvas2, etc. Is that what you mean? – quarks Apr 21 '20 at 03:18
  • 2
    Yes, if you wish the library to use a single webgl context, then you just have to pass the same, single canvas element to all your instances. – Kaiido Apr 21 '20 at 03:23
  • 1
    Ah yes, you're correct. That may be the solution, the reason I asked this is because the author suggested to be able to play more canvas since it uses WebGL so it's limited to like 5-6 players on one tab. I think the better approach is what I did: https://stackoverflow.com/questions/61336406/rendering-canvas-context-in-worker-thread-for-smooth-playback – quarks Apr 21 '20 at 05:18