Рендеринг нескольких видеопотоков на одном холсте WebGL - PullRequest
Новая
       77

Рендеринг нескольких видеопотоков на одном холсте WebGL

1 голос
/ 21 апреля 2020

Я хотел бы спросить тех, кто использовал 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 и что браузер разрешил бы это?

1 Ответ

2 голосов
/ 21 апреля 2020

Никогда не использовал эту библиотеку, но, поскольку вы несете ответственность за передачу HTMLCanvasElement, каждый раз, когда вы передаете одно и то же, он будет использовать один и тот же контекст WebGL для каждого экземпляра, как вы и просили. 

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

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

Но я сомневаюсь, что библиотека будет хорошо работать при этом ...

...