是否可以使用 html5 将 MediaStream 转换为视频 blob答案

【问题标题】：Is it possible to convert a MediaStream to a video blob with html5是否可以使用 html5 将 MediaStream 转换为视频 blob
【发布时间】：2014-12-15 21:40:45
【问题描述】：

我正在尝试从网站中的网络摄像头捕捉 5 分钟长的视频。

我目前正在使用 html5 视频元素来显示 getUserMedia 结果流。

完成录制后，我是否可以获取流的内容？

我剩下一个 MediaStream 对象，我猜它包含视频 blob，我可以以某种方式访问它吗？

【问题讨论】：

标签： javascript html video blob getusermedia

【解决方案1】：

您可以将视频编码为数据 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

【讨论】：

我实际上尝试了类似的方法，并使用 Whammy.js 对结果进行了编码。结果还不错，但我只能捕捉到大约 40-50 秒。原因是每帧的大小约为 1.2 MB，因此浏览器的 RAM 使用率迅速上升，在此时间后达到 1 GB 大关，浏览器崩溃。这就是为什么我正在寻找一种更有效的方法。
@remoba 检查配置，可能将帧速率更改为 10，我正在使用 whammy.js，它对我来说很好。
另外，你可以看看这个，github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
@mido22 Whammy.js 本身并没有占用大量内存，编码需要一个大图像数组并将其压缩为一个非常轻的视频块。问题不在于 Whammy.js 本身，而在于捕获图像数组，这会占用大量内存
@Remoba 有哪些浏览器，你的代码必须支持？如果只有firefox，它提供了直接录制webm的选项

【解决方案2】：

保存一个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. snippets 阻止下载，所以这是一个可运行的版本

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

【讨论】：