Я пытаюсь создать что-то похожее на
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;
Это показывает только веб-камеру. Я хочу иметь возможность размещать веб-камеру над записью экрана.