javascript - 我们可以将多个 html5 <video> 流合并到一个 .mp4 文件中吗？

Question

我有两个视频，一个用于流式传输我的网络摄像头，另一个用于共享我的桌面屏幕/窗口。我需要将这两个媒体流合并为一个，以便我可以将其另存为 .mp4 文件并通过 WebRTC 进行广播。 p>

Answer 1

我能够通过将两个 VIDEO(流)标签绑定(bind)到 DIV 标签中来组合它们。

       <div id="elementToShare">
         <video id="webcamVideo" controls loop autoplay class="webcam">No Support.</video>
         <video id="screenshareVideo" controls loop autoplay class="screenshare">No Support.</video>
       </div>

然后，我使用 DIV 标签作为 Canvas ，使用 RecordRTC 将两个视频录制为一个视频。图书馆 Muaz Khan .

   var elementToShare = document.getElementById('elementToShare');
   var canvasRecorder = RecordRTC(elementToShare,{
      type : 'canvas',
      recorderType: CanvasRecorder
   }); 

但是这种方法的问题是，我无法使用我使用的 Canvas 记录来自网络摄像头的音频流 ffmpeg_asm.js 。由于 js 文件的大小为 18mb，因此需要花费大量时间来加载和处理视频文件。

据我所知，WebRTC 仍处于初级阶段，我希望能够出现一些有效的东西来实现这些目标。

注意:我只能在 Google Chrome 中实现上述功能，因为现阶段 Mozilla Firefox 提供的支持有限。而Safari没有提供WebRTC support所以从一开始就不存在。

编辑1:使用Node.js作为服务器支持来为上述应用程序提供服务，提高了性能和视频处理能力。例如:如果没有 Node.js，ffmpeg_asm.js 无法处理大于 2200k 的视频比特率。