合并和定位两个媒体流

Question

我试图做出类似于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;

这只显示网络摄像头。我希望能够将网络摄像头放置在屏幕录制的顶部。

- Reece Ward

Answer 1

基本上，您需要在画布中以适当的位置和尺寸呈现两个流，对于屏幕捕获流，它将占据整个窗口的宽度和高度。对于用户相机流捕获，它将位于左下角，大小为150X150。现在，您需要开始将这些流写入画布。使用captureStream()方法，我们可以访问组合视频流并开始使用它。

- user6250