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

Question

目标

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

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

什么工作

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

挑战

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

我的调查

多流混合器

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

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

定制混音器

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

它的工作方式：

• 我们首先将流逐个渲染到屏幕外的画布上。
• 从画布捕获流作为输出视频流
• 音频流使用单独产生AudioContext，createMediaStreamSource，createMediaStreamDestination等。
• 合并音频和视频流并作为单个流输出。
• 使用MediaRecorder记录混合流。

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

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

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

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

ffmpeg.js

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

其他我没试过的方法

以上是我目前的调查。

另一个想法是并排播放视频和录制的视频，并使用屏幕录制 API 录制合并版本。（示例）。但这将要求客户等待与初始录制相同的时间来录制屏幕/选项卡。

将视频上传到服务器并在服务器中进行工作将是我最后的手段。

Answer 1

真正的答案是，要合并两个视频文件，您必须获取两个单独的文件并对其运行某些操作以合并它们。您不能采用两个视频输入流（在本例中为网络摄像头和视频）并以这种方式将一个放在另一个旁边。

你可以做的是：

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