我正在尝试制作类似于
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;
这仅显示网络摄像头。我希望能够将网络摄像头放置在屏幕录制的顶部。
最佳答案
基本上,您必须在 Canvas 中以适当的位置和尺寸渲染两个流,以便屏幕捕获流,它将具有全窗口和高度。对于用户相机流捕获,它将位于左下角,大小为 150X150。现在您必须开始将这些流写入 Canvas 。通过 captureStream() 方法,我们可以访问组合的视频流并开始使用它。
关于javascript - 合并和定位两个媒体流,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56971870/