我们可以将多个html5 <video>流组合成一个.mp4文件吗？

Question

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

Answer 1

我能够将两个 VIDEO （流）标记合并为一个 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 标记作为画布，使用RecordRTC Muaz Khan的ffmpeg_asm.js库将两个视频录制为一个。

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

但是使用这种方法的问题是，我无法使用我使用WebRTC support的画布从我的网络摄像头录制音频流。由于js文件的大小 18mb ， 需要花费大量时间来加载和处理 视频文件。

据我所知，WebRTC仍然处于初级阶段，我希望能够有效地实现这些目标。

注意：我只能在谷歌浏览器中实现上述功能，因为此阶段Mozilla Firefox提供的支持有限。虽然Safari没有提供{{3}}所以它从一开始就没有了。

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

Answer 2

您打算实时组合流吗？ 如果是，您需要一个MCU将这两个流合并为一个流并为您记录此流。

作为一个选项，您可以在服务器端记录这些流，然后使用ffmpeg混合流。