是否可以使用HTML5将MediaStream转换为视频blob？

Question

我正在尝试从网站上的摄像头捕获一个长达5分钟的视频。目前，我正在使用html5视频元素来显示getUserMedia的结果流。一旦录制完成，有没有办法让我获取流的内容？我现在手里有一个MediaStream对象，我猜它包含了视频blob，我能以某种方式访问它吗？

- Remoba

Answer 1

保存Blob

const saveBlob = (function() {
  const a = document.createElement('a');
  document.body.appendChild(a);
  a.style.display = 'none';
  return function saveData(blob, fileName) {
     const url = window.URL.createObjectURL(blob);
     a.href = url;
     a.download = fileName;
     a.click();
  };
}());

用法: saveBlob(someBlob, 'filename');

注意: S.O. 代码片段 阻止了下载，所以这里提供一个可运行的版本。

https://jsgist.org/?src=fe37a11d207f0f83a877e0c0252539c2

- gman

Answer 2

你可以将视频编码为数据URI并添加下载链接。

http://appcropolis.com/blog/web-technology/using-html5-canvas-to-capture-frames-from-a-video/ http://www.iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri

- urnotmydad

---

我之前尝试过类似的方法，并使用Whammy.js对结果进行编码。效果还不错，但只能捕获大约40-50秒的视频。原因是每帧的大小约为1.2 MB，因此浏览器的RAM使用量迅速增加，在那段时间后达到了1 GB标记，导致浏览器崩溃。这就是为什么我正在寻找更有效的方法。 - Remoba

@remoba 检查配置，可能将帧速率更改为10，我正在使用whammy.js，它对我很有效。 - mido

另外，您可以查看此链接：https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC - mido

@mido22 Whammy.js本身并不占用太多内存，编码会将大型图像数组压缩为非常轻的视频blob。问题不在于Whammy.js本身，而是捕获图像数组需要占用大量内存。 - Remoba

@Remoba，你的代码需要支持哪些浏览器？如果只支持Firefox，它可以直接录制WebM。 - mido

@mido22 很遗憾，我也必须支持 Chrome。 - Remoba