组合和定位两个媒体流

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;

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

Answer 1

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