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

Question

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

• WebRTC
  我知道使用 WebRTC 我们可以从网络摄像头和麦克风获取流。我发现了很多关于相同内容的文章，但没有一篇解释如何从该流中提取 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 为视频/视频录制编写的库，实际上很好。使用这个库我可以录制视频和音频，但是有一些问题如下

  • 在 chrome 中，我得到两个 Blob 对象，一个用于音频，一个用于视频，为了生成最终文件，我需要将这些文件合并到最终视频文件中。我正在使用 FFMPEG 转换和合并服务器上的文件。
  • 虽然在服务器上转换文件需要很长时间，但它在短视频上运行良好，但问题始于长录制文件。我正在获取 Array memory out of exception 用于记录超过 4 分钟 并且当 blob 大小超过 10 MB

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

  • 按时间间隔获取 blob block 并将其发布到服务器

  • 使用 FFMPEG

    转换小视频文件中的 blob block

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

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

我现在正在考虑使用纯 javascript WebRTC UserMedia API 录制视频，但现在我真的很震惊，因为甚至没有一篇文章解释 如何录制带有音频的视频并上传到服务器。每篇文章或答案仅显示 get UserMedia and show stream in video tag 如上例中的显示代码。我已经在这上面花了很多时间。请提出任何解决方案。如果有收费的图书馆或服务也可以。

Answer 1

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

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