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

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 chunk

  • 最后使用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。

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