Question

我正在建立一个网页，用户可以在其中创建视频消息，如下所示：

首先，视频消息开始使用来自主视频设备的流进行录制。
在录制开始后的任何给定时间，用户可以“添加”另一个视频设备的流。该流可以完全替换第一个流，或者可以同时看到两个流（这取决于我）。
用户必须能够将其视频消息保存在文件中，然后将其发送给另一个用户，该用户应该能够查看所有记录的流。

到目前为止，我所做的是使用canvas元素绘制要显示的流（首先是第一个设备的流，然后是另一个设备的流），并使用以下行记录画布流：

const stream = canvas.captureStream(30);
const options = { mimeType: 'video/webm' };
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = (e) => {
  if (e.data.size > 0) {
    recordedChunks.push(e.data);
  }
};
mediaRecorder.onstop = () => {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const file = new File([blob], 'message');
};

这有点奏效，只是所生成的文件似乎缺少一些元数据（Example，请在Chrome上观看它，并注意，第一次复制该视频时，该时间似乎突然改变了）有时，这样录制的视频根本无法在PC上（使用VLC）复制。（这会给我的客户带来很多麻烦，因此我需要对其进行修复。）

还有其他方法可以记录或混合两个或多个视频流，以实现有效的视频文件吗？

请注意，直到用户选择第二流，我才知道它的尺寸。

不确定这是否重要，但是我将在电子应用程序上使用它来录制网络摄像头的视频，然后录制屏幕或窗口（如您在我发布的视频示例中所见）。

如何使用MediaRecorder录制两个或更多视频流或将其混合在一起？

0 个答案: