Safari BlobUrl 30mb 限制

Question

我目前正在构建一个需要在客户端存储音频和视频的媒体播放器网络应用程序。要求也是避免流式传输，并且它必须在 Safari 中工作。

为此，我选择了 IndexedDb 并将所有内容都存储在浏览器中。但是，通过网络音频 api 获取和播放音频没有问题 - 我很快就遇到了视频问题。

我目前的方法是从 indexeddb 获取视频并为 src 属性创建一个 blob url：

const objectUrl = createObjectURL(record.videoData);
this.video.src = objectUrl;

这种方法适用于小视频（任何小于 30mb 的视频），但对于较大的视频，播放会卡顿，我注意到网络检查器中对 blob url 的几个错误请求（见图）：

尽管“错误”请求视频加载和播放。唯一的问题是口吃。我还注意到，随着文件大小的增加，这种情况变得越来越糟糕。

我环顾四周，但没有找到任何在没有流媒体的情况下实现播放的替代方法。我查看了 Safari 发行说明并注意到以下内容（来自：safari release notes）：

如果帧的总内存大小低于 30MB（原为 5MB），则更改内存处理以保留动画图像的所有解码帧

这看起来可能是口吃的原因 - 我假设 safari 正在尝试下载 bloburl 块。

我想要实现的目标是否有替代方法？这在 chrome 中表现得更好（没有口吃），但是 - 这必须在 Safari 中工作。

非常感谢任何帮助。

Answer 1

我可以看到三件事可能对您有所帮助。

首先，您是否会在每次不再使用 BlobURI 时撤消它？
从 indexedDB 中检索 Blob 实际上会复制内存中的数据，这与使用 input[file] 发生的情况不同，这意味着当您从这些 Blob 创建 blobURI 时，这些 blobURI 不会指向磁盘上的文件，而是会绑定 Blob 的内存中的数据，直到 blobURI 被撤销或会话到期。因此，当您刷新页面时，您可能会多次在内存中保存相同的数据。

然后，您可以尝试将大文件拆分为较小的块，并在需要时合并它们。如果您认为 5MB 文件可以正常工作，您可以在循环中使用 Blob.slice(startByte, endByte) 来生成更小的 Blob，然后将其与 new Blob([chunks]) 合并，并且只从这个合并的 Blob 创建一个 blobURI。
这是fiddle demonstrating it。

虽然合并的 Blobs 解决方案对我来说已经足以摆脱这些卡顿的渲染，但在内存较少的设备上这可能会失败，因此作为最后一种方法，您可以使用块的想法，但不合并它们。相反，您可以使用MediaSource API，并使用从块中获得的arrayBuffers 提供一个流（通过FileReader.readAsArrayBuffer）。