Объединение и позиционирование двух медиапотоков - PullRequest
Новая
       183

Объединение и позиционирование двух медиапотоков

0 голосов
/ 10 июля 2019

Я пытаюсь произвести что-то похожее на
https://recordscreen.io/
Позиционирует камеру пользователя над экраном записи

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

/**
 * Edge has a slightly incorrect implementation of getDisplayMedia
 * Typescript currently uses this so typing is incorrect
 */
const screenMediaStream = await (navigator.getDisplayMedia ? 
    navigator.getDisplayMedia(constraints) :
    (navigator.mediaDevices as any).getDisplayMedia(constraints)    
) as MediaStream;

const cameraMediaStream = await navigator.mediaDevices.getUserMedia({
    audio: true, 
    video: { width: 150, height: 150 }
});

const combinedMediaStream = new MediaStream([...cameraMediaStream.getTracks(), ...screenMediaStream.getTracks()]);

screenVideoElement.srcObject = combinedMediaStream;

Показывает только веб-камеру. Я хочу иметь возможность расположить веб-камеру поверх экрана записи.

...