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

Question

我想在网站上添加视频录制功能。 我一直在寻找并尝试所有可能的解决方案，但没有任何工作正常。
我试过下面的解决方案

• WebRTC
  我知道使用WebRTC我们可以从网络摄像头和麦克风获取流。 我发现了很多关于相同的文章，但没有一个解释了如何从该流中提取blob并保存或上传到服务器。 我得到的是获取userMediaStream并通过创建blob对象URL在浏览器中显示它
  

   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编写的用于视频/视频录制的库，实际上很好。 使用这个库，我能够录制视频和音频，但是有一些问题，如下所示

  • 在Chrome中我得到两个Blob对象一个用于音频，一个用于视频，为了生成最终文件，我需要将这些文件合并到最终视频文件中。 我正在使用FFMPEG转换和合并服务器上的文件。
  • 虽然在服务器上转换文件需要很长时间，但它可以很好地使用短视频，但问题是从长录音文件开始。 我得到Array memory out of exception超过4 min ，当blob大小超过10 MB

• MediaStreamRecorder
  这是Mauz Khan的另一个库，它在特定的时间间隔后给出记录的blob。 我认为这将解决我的内存异常问题。 所以我实现如下

  • 在间隔上获取blob块并将其发布到服务器

  • 使用FFMPEG在小视频文件中转换blob块

  • 最后使用FFMPEG完成视频文件将所有小文件合并到最终

  • 问题是当小blob块保存到小视频文件中时，似乎文件的起始字节已损坏，因此它在每个小文件的开始时间被挂起，并且在将所有文件合并到最终完成的视频之后，视频会挂起并且存在每个间隔后'trrrrrr'噪音
  • 视频也开始挂长视频

我现在正在考虑使用纯javascript WebRTC 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。

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