Захват рабочего стола MediaStream с наложением веб-камеры

Question

В настоящее время я пытаюсь создать приложение на основе WebRT C с использованием MediaStream для захвата экрана компьютера и сохранения его в видеофайл. У меня он работает, НО, теперь я пытаюсь добавить дополнительный слой к записанному видео, чтобы появилась веб-камера.

Насколько я понимаю, с API Media Streams я не могу использовать два видео источники одновременно. Поэтому я решил нарисовать захваченное видео на элементе Canvas, наложить на него веб-камеру и получить поток с Canvas. Но у меня возникают проблемы, и я не могу заставить его работать

Я пытаюсь создать что-то вроде того, что есть в Loom, с захватом рабочего стола и веб-камерой, расположенными сверху по кругу.

Я хотел бы знать, иду ли я в правильном направлении. Если бы вы построили что-то подобное, как бы вы к этому подошли?

Answer 1

Если можете, лучше всего, вероятно, передать два потока MediaStream: один для камеры, а другой для скринкаста.
Тогда это просто css наложение двух элементов.

Конечно, вы также можете выполнить композицию на стороне эмиттера, отрисовав оба видео в HTMLCanvasElement, а затем потоковое воспроизведение MediaStream, сгенерированного из этого холста, с использованием его метода captureStream, но я думаю, это закончится быть более неэффективным, чем вариант с двумя потоками, и качество потоков холста обычно довольно плохое ...