录制视频和音频并上传到服务器

Question

我想为网站添加视频录制功能。我一直在搜索并尝试所有可能的可用解决方案，但还没有任何工作正常。
我尝试了以下解决方案

WebRTC
我知道使用 WebRTC 我们可以从网络摄像头和麦克风获取流。我发现了很多关于相同内容的文章，但其中 none 解释了如何从该流中提取 blob 并将其保存或上传到服务器。我得到的是通过创建 blob 对象 URL

来获取 userMediaStream 并在浏览器中显示它

navigator.getUserMedia  = navigator.getUserMedia ||
                      navigator.webkitGetUserMedia ||
                      navigator.mozGetUserMedia ||
                      navigator.msGetUserMedia;

var video = document.querySelector('video');

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true, video: true}, function(stream) {
   video.src = window.URL.createObjectURL(stream);
}, errorCallback);
} else {
  video.src = 'somevideo.webm'; // fallback.
}

如何从此流中提取对象以便保存或上传到服务器？

RecorRTC
RecordRTC 是 Mauz Khan 为 video/video 录音编写的库，实际上很好。使用这个库我可以录制视频和音频，但是有一些问题如下
- 在 chrome 中，我得到两个 Blob 对象，一个用于音频，一个用于视频，为了生成最终文件，我需要将这些文件合并到最终视频文件中。我正在使用 FFMPEG 转换和合并服务器上的文件。
- 虽然在服务器上转换文件需要很长时间，但它在短视频上工作正常，但问题从长录制文件开始。我得到 Array memory out of exception 记录更多 4 min 并且当 blob 大小超过 10 MB
MediaStreamRecorder
这是 Mauz Khan 的另一个库，它在特定时间间隔后提供记录的 blob。我认为这将解决我的内存异常问题。所以我实现如下
- 按时间间隔获取 blob 块 post 到服务器
- 使用FFMPEG
- 最后使用 FFMPEG 完整视频文件
- 问题是当小 blob 块保存到小视频文件中时，文件的起始字节似乎已损坏，因此它在每个小文件的开始时间和所有文件合并到最终完成的视频后被挂起，视频挂起，每个间隔
- 长视频也开始挂了

我现在想用纯javascriptWebRTC UserMedia API来录制视频，但现在我真的很震惊，因为连一篇解释How to record video with audio and upload to server的文章都没有。每篇文章或答案仅显示 get UserMedia and show stream in video tag 作为上例中的显示代码。我已经在这上面花了很多时间。请提出任何解决方案。如果有收费的图书馆或服务也可以。

Answer 1

我知道这个答案来晚了，但现在有一个标准的形式可以在本地执行此操作：MediaRecorder，目前在 Chrome 和 Firefox 中受支持。

有您想要的客户端功能示例 here。然后，您可以获取该 blob 并将其作为 POST 请求的一部分上传到服务器。通过这种方式，您可以获得仍然可以在服务器上进行转码的 WebM（例如使用 ffmpeg）。

录制视频和音频并上传到服务器

Record video and audio and upload to the server

html

javascript

audio

video

webrtc