在一个WebGL画布中呈现多个视频流

Question

我想问那些使用JSMPEG的人，如何修改它以仅将一个WebGL画布用于多个视频流？

我正在做这样的事情：

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});

依此类推...尝试25位玩家/画布。

对于5个播放器，浏览器可以处理它，并增加浏览器的崩溃（已通过Chrome / Firefox测试）。我想知道是否有一种方法可以仅使用“一个大画布”来处理WebGL内容，并且浏览器会允许它？

Answer 1

从未使用过该库，但是由于您负责传递HTMLCanvasElement，因此每次传递相同的值将使它对每个实例使用相同的WebGL上下文，就像您要求的一样。

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

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

但是我怀疑图书馆这样做会很好...