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

Question

目标
我想在浏览器(尤其是 Chrome)中录制/生成带有自定义视频(例如 .mp4、.webm)和相机录制的视频。

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

什么在起作用
我可以使用 MediaRecorder录制我的相机，并与我的视频并排播放录制，并将录制的视频下载为 webm。
挑战
我在将视频和摄像头并排合并到一个视频文件中时遇到了困难。
我的调查
多流混合器
我首先研究了 MultiStreamMixer 并用它构建了一个演示(参见 codepen)。

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

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

我们首先将流一个一个地渲染到屏幕外的 Canvas 上。

从 Canvas 捕获流作为输出视频流

使用 AudioContext 单独生成音频流, createMediaStreamSource , createMediaStreamDestination等

合并音频和视频流并作为单个流输出。

使用MediaRecorder记录混合流。

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

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

最初我以为是因为我没有为 Canvas 正确设置一些设置。但后来我发现，即使是 my MultiStreamMixer demo或 the WebRTC demo (你在录音中看不清茶壶上的文字)用 Canvas 生成模糊的视频。
我在 webrtc 小组中询问是否可以解决此问题。同时我查看了 ffmpeg.jsffmpeg.js
我认为这会“有效”，但是 the file is too large .让客户等待下载这个 23MB 的 JS 文件是不切实际的。
我没有尝试过的其他方法
以上是我目前的调查。
另一个想法是并排播放视频和录制的视频，并使用屏幕录制 API 录制合并的版本。 ( Example)。但这将要求客户等待与初始记录相同的时间来记录屏幕/标签。
将视频上传到服务器并在服务器中完成工作将是我最后的手段。

Answer 1

真正的答案是，要合并两个视频文件，您将不得不获取这两个单独的文件并在它们上运行一些东西来合并它们。您不能获取两个视频输入流(在这种情况下是网络摄像头和视频)，然后以这种方式将一个放在另一个旁边。
你可以做的是:

保持视频的独立性，并将一个 html5 播放器叠加在另一个之上。应该可以工作，但同步会很痛苦。

使用 ffmpeg.js(如果你在本地缓存它，压缩它并让加载看起来很漂亮，真的没那么糟糕)

将视频 block 发送到服务器进行转码