Safari BlobUrl 30mbの制限

Question

私は現在、オーディオとビデオをクライアント側に保存する必要のあるメディアプレーヤーWebアプリケーションを構築中です。ストリーミングも避け、Safariで動作する必要があります。

このため、私はIndexedDbを選んで、すべてがブラウザにうまく保存されているようにしました。私はオーディオを取得し、WebオーディオAPIを介して再生することに問題はありませんが、私はすぐにビデオの問題にぶつかります。

私の現在のアプローチは、のIndexedDBからビデオを取得し、src属性のためのブロブのURLを作成している

：

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

このアプローチは、小さな動画（30メガバイトの下に何も）のために、より大きな動画再生吃音のために正常に動作しますそして私は（画像を参照）は、WebインスペクタのBlob URLにいくつかのエラー要求に気づく：

「エラー」要求にもかかわらず、ビデオが読み込まれて再生されます。唯一の問題は吃音です。私はまた、ファイルサイズに比例してますます悪化していることに気付きました。

私は周りを見回しましたが、ストリーミングせずに再生を達成する別の方法は見つかりませんでした。私は、Safariのリリースノートを見ていたし、私は気づいた、以下の（から：safari release notes）：

フレームの合計メモリサイズが下にある場合、アニメーション画像のためにデコードされたフレームのすべてを保つために取扱

変更メモリ30MB（5MBから）

これは吃音の原因になりそうです - 私はサファリがブロブールのチャンクをダウンロードしようとしていると仮定します。

私が達成しようとしていることに対する代替アプローチはありますか？しかしこれはクロム（吃音なし）の方がはるかに優れていますが、これはSafariで動作する必要があります。

ご迷惑をおかけして申し訳ありません。

Answer 1

私はあなたを助けるかもしれない3つのことを見ることができます。

まず、使用しなくなるたびにすべてのBLOBURIを取り消しますか？
indexedDBからBlobを取得すると、実際にはinput [file]とは異なり、データがメモリに複製されます。つまり、これらのBLOBからBLOBURIを作成すると、BLOBURIはディスク上のファイルを指していませんが、 blobURIが取り消されるまで、またはセッションが期限切れになるまで、BLOBのデータをメモリに格納します。したがって、ページを更新するときに、複数の同じデータがメモリに保持されることがあります。

次に、大きなファイルを小さな塊で分割し、必要に応じてそれらをマージすることがあります。 5MBのファイルが正常に動作していると思われる場合は、ループ内でBlob.slice(startByte, endByte)を使用して、より小さなBlobを生成し、new Blob([chunks])とマージし、このBlobからのみblobURIを作成することができます。
ここにはfiddle demonstrating itがあります。

これらの吃音のレンダリングを取り除くために、マージされたBlobソリューションではすでに十分ではありましたが、メモリが少ないデバイスでは失敗する可能性があります。最終的なアプローチとして、チャンクのアイデアをマージすることはできます。代わりに、MediaSource APIを使用し、チャンクから取得するarrayBuffersをストリームに送ります（FileReader.readAsArrayBuffer経由）。