如何在浏览器(特别是Chrome)中将视频和摄像机合并在一起？
目标
我想记录/生成一个视频在浏览器(特别是Chrome)与定制视频(如.mp4，.webm)和相机并排录音。
--------------------------------------------------
| | |
| Some Custom Video | My Camera |
| | |
--------------------------------------------------什么在起作用
我可以使用MediaRecorder录制我的相机，并与我的视频同时播放录音，并以webm的形式下载录制的视频。
挑战
我正面临着将视频和摄像机合并成一个单独的视频文件的困难。
我的调查
MultiStreamMixer
我首先研究了MultiStreamMixer并用它构建了一个演示(参见码页)。
它的问题是，它伸展视频内容，以适应他们在相同的大小。我可以为这两个流指定不同的宽度/高度，但它并不像预期的那样工作。我的相机被剪掉了。
自定义混合器
我看了一下MultiStreamMixer的源代码，发现问题是因为其简单的布局逻辑。因此，我把它的源代码作为参考，并建立了我的自定义混合器。见码页。
它的工作方式：
- 我们首先将流逐个呈现到屏幕外的画布上。
- 将画布中的流捕获为输出视频流
- 音频流分别使用
AudioContext、createMediaStreamSource、createMediaStreamDestination等生成。 - 合并音频和视频流，并输出为一个单一流。
- 使用
MediaRecorder记录混合流。
它为视频/摄像机增加了黑色的边距，不会拉伸视频。
然而，我发现录音非常模糊，如果你在你的相机前挥动你的手在录制。
最初，我认为这是因为我没有为画布设置一些正确的设置。但后来我发现，即使是我的MultiStreamMixer演示或WebRTC演示 (在录音中你无法清楚地看到茶壶上的文本)也会用画布生成模糊的视频。
我想在webrtc小组看看我是否能解决这个问题。与此同时，我查看了ffmpeg.js
ffmpeg.js
我认为这“可行”，但文件太大了。让客户等待下载这个23 be的JS文件是非常重要的。
其他我没试过的方法
以上是我迄今为止的调查。
另一个想法是同时播放视频和录制的视频，并使用屏幕记录API来记录合并版本。(示例)。但这需要客户等待与初始记录相同的时间才能记录屏幕/选项卡。
上传视频到服务器并在服务器上工作将是我最后的选择。
回答 2
Stack Overflow用户
发布于 2021-04-29 14:02:23
真正的答案是，要合并两个视频文件，就必须将两个单独的文件进行合并，并在它们上运行一些东西来合并它们。你不能拿两个视频输入流(在这种情况下，摄像头和视频)，而只是把一个放在旁边的方式。
你能做的就是：
- 保持视频是独立的，只是覆盖一个html5播放器在另一个之上。应该可以工作，但是同步将是一种痛苦。
- 使用ffmpeg.js (如果您在本地缓存、压缩它并使加载看起来很漂亮的话，它真的不会那么糟糕)
- 将视频块发送到服务器以进行代码转换
Stack Overflow用户
发布于 2021-07-05 14:30:42
有一个老生常谈的说法是“便宜、快、好”，你只能选择其中的2种。如果你增加视频的信息含量(比如，在镜头前挥动你的手)，就必须出现以下情况之一:帧速率必须下降，质量必须下降，输出比特率必须上升。
Webrtc是为支持视频会议而设计的，在这种场景中，高帧速率比高质量更重要。您可能必须操作SDP以请求更高的比特率。这也可能是做这项工作的错误工具。
https://stackoverflow.com/questions/63140918
复制相似问题
腾讯云开发者
