如何在浏览器（尤其是 Chrome）中将视频和摄像头录制合并在一起？

Posted 2023-03-13

【中文标题】如何在浏览器（尤其是 Chrome）中将视频和摄像头录制合并在一起？

【英文标题】：How to merge video and camera recording together in browser (Chrome especially)?

【发布时间】：2020-11-18 07:04:50

【问题描述】：

目标

我想在浏览器（尤其是 Chrome）中录制/生成带有自定义视频（例如 .mp4、.webm）和摄像头并排录制的视频。

--------------------------------------------------
|                        |                       |
|  Some Custom Video     |       My Camera       |
|                        |                       |
--------------------------------------------------

什么工作

我可以使用MediaRecorder 来录制我的相机，并与我的视频并排播放录制的视频，并将录制的视频下载为 webm。

挑战

我在将视频和摄像头并排合并为一个视频文件时遇到了困难。

我的调查

多流混合器

我首先研究了 MultiStreamMixer 并用它构建了一个演示（参见 codepen）。

它的问题是它会拉伸视频内容以适应它们的大小。我可以为这两个流指定不同的宽度/高度，但它不能按预期工作。我的相机被裁剪了。

自定义混音器

我查看了 MultiStreamMixer 的源代码，发现问题在于其简单的布局逻辑。所以我把它的源代码作为参考，构建了我的自定义混音器。见codepen。

它的工作方式：

我们首先将流一个一个地渲染到屏幕外的画布上。 从画布中捕获流作为输出视频流 使用AudioContext、createMediaStreamSource、createMediaStreamDestination等单独生成音频流。 合并音频和视频流并作为单个流输出。 使用MediaRecorder录制混流。

它会为视频/相机添加黑色边距，并且不会拉伸视频。

但是，如果您在录制时在相机前挥手，我发现录制非常模糊。

最初我以为是因为我没有为画布正确设置一些设置。但后来我发现即使是my MultiStreamMixer demo或the WebRTC demo（你在录音中看不清茶壶上的文字）也会用画布生成模糊的视频。

我在 webrtc 小组中询问是否可以解决此问题。同时我查看了ffmpeg.js

ffmpeg.js

我认为这会“工作”，但the file is too large。让客户等待下载这个 23MB 的 JS 文件是不切实际的。

其他我没试过的方法

以上是我目前的调查。

另一个想法是并排播放视频和录制的视频，并使用屏幕录制 API 录制合并版本。 (Example)。但这需要客户等待与初始记录相同的时间才能记录屏幕/标签。

将视频上传到服务器并在服务器中完成工作将是我最后的选择。

【问题讨论】：

你解决了吗？如果是这样，你是怎么做到的。我很好奇。

【参考方案1】：

这个问题的真正答案是，要合并两个视频文件，您将不得不获取这两个单独的文件并在它们上运行一些东西来合并它们。您不能同时获取两个视频输入流（在本例中为网络摄像头和视频），然后以这种方式将一个放在另一个旁边。

你可以做的是：

保持视频独立，仅将一个 html5 播放器叠加在另一个之上。应该可以，但同步会很痛苦。 使用 ffmpeg.js（如果你在本地缓存它，压缩它并让加载看起来很漂亮，真的没那么糟糕） 将视频块发送到服务器进行转码

【参考方案2】：

有句老话叫“便宜、快、好”，3个只能选2个。如果增加视频的信息量（比如在镜头前挥手） ，必须发生以下情况之一： 帧率必须下降， 质量必须下降， 输出比特率必须提高。

Webrtc 旨在支持视频会议，在这种情况下，高帧率比高质量更重要。您可能必须操纵 SDP 以请求更高的比特率。它也可能是适合这项工作的错误工具。