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

Posted 2023-04-18

【中文标题】我们可以将多个 html5 <video> 流合并到一个 .mp4 文件中吗？

【英文标题】：Can we combine multiple html5 <video> streams into one .mp4 file?

【发布时间】：2016-09-21 03:39:54

【问题描述】：

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

【参考方案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 标签作为 canvas 将两个视频记录为一个使用RecordRTC library by Muaz Khan。

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

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

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

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

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

【参考方案2】：

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

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

【讨论】：

是的，我希望实时合并这些流。我对 MCU 是什么以及它如何工作感到困惑。我还计划将这些流作为单个流进行广播，因此在服务器端处理它们可能会产生开销。

我忍不住了。 MCU 代表漫威电影宇宙。

Server Side Mixer for WebRTC streams 您可以使用具有录音功能的服务器端实时混音器。