Javascript 在一个WebGL画布中渲染多个视频流

我想问那些使用过的人，如何修改它，使其仅使用一个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内容，而浏览器会允许它？

从未使用过该库，但由于您负责传递HTMLCanvasElement，因此每次传递相同的内容都会使它对每个实例使用相同的WebGL上下文，就像您要求的那样

const canvas=document.createElement（'canvas'）；
const gl1=canvas.getContext（'webgl'）；
const gl2=canvas.getContext（'webgl'）；
log（“相同对象：”，gl1==gl2）排序，但考虑使用数组或对象，而不是25个单独的VAR。不确定你的意思，我的代码中的每个玩家都有单独的画布。e、 canvas，canvas2，等等。这就是你的意思吗？是的，如果你希望库使用一个webgl上下文，那么你只需要将相同的，单个canvas元素传递给你的所有实例。啊，是的，你是对的。这可能就是解决方案，我问这个问题的原因是因为作者建议可以玩更多的画布，因为它使用WebGL，所以一个选项卡上只能有5-6个播放器。我认为更好的方法是我所做的：