客户端 javascript 可以创建一个太大而无法容纳在内存中的文件下载吗？

Question

我正在使用 captureStream to record from a HTML canvas, and currently use the example code in https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API。但是，这仅适用于短记录，因为每个 blob 都存储在内存中。

我希望能够长时间录音，例如>1 小时，让用户下载生成的 .webm/.mkv 文件。如果这听起来不寻常，那是因为我正在使用 Web 浏览器进行（开源）科学应用程序并且需要知道在实验过程中显示的内容:)。

调整 MDN 代码以将每个 blob 存储在 IndexedDB 中而不是内存数组中非常简单，但我一直在研究如何构建下载而不创建会耗尽内存的巨大 blob：

var blob = new Blob([IDBchunk1, IDBchunk2, ...], {
  type: "video/webm"
});

另一种方法是构建“流式”下载，但不确定是否可行。

一个可行但非常低效的解决方案是使用 WebRTC 将流发送回 nodejs 服务器，将每个 blob 附加到服务器上的磁盘视频文件，然后通过 http 提供视频下载。我不喜欢这个解决方案，因为它涉及设置 webRTC + 的复杂性，需要来回使用大量带宽。

如果您对如何仅在客户端执行此操作有任何想法，请告诉我？

Answer 1

在 Chrome 中，至少 new Blob([IDBchunk1, IDBchunk2, ...]...) 方法不需要将 any 的 blob 加载到内存中。新的 blob 在内部引用依赖的 blobs/files，并且读取 blob（例如在下载期间）根据需要从依赖的 blob 中提取字节。

客户端 javascript 可以创建一个太大而无法容纳在内存中的文件下载吗？

Can client-side javascript create a file download that is too big to fit in memory?

javascript

fileapi

indexeddb

webrtc

mediastream