合并和定位两个媒体流

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;
这仅显示网络摄像头。我希望能够将网络摄像头放置在屏幕录像的顶部。

我正在尝试产生类似于https://recordscreen.io/的东西，它将用户的摄像头放在屏幕录像上，我现在已经分别获得了两个流。我已经尝试过将位置... ...

Answer 1

基本上，必须在画布中使用适当的位置和尺寸来呈现两个流，以截取其将在整个窗口中显示的流和高度。对于用户摄像机流捕获，它将在左下角以150X150大小显示。现在，您必须开始将这些流写入画布。并且使用captureStream（）方法，我们可以访问组合的视频流并开始使用它。