方式比較検討会会場
フレーム画像の解凍、レンダリングの方式を実装して比較してみましょう！
動画を表示するには、mp4ファイルをseekしてフレームの解凍に必要なチャンクのバイトオフセットを見つけ、解凍アルゴリズム = H.264 を実行し、。
解凍方法
この項目では特定フレーム画像を取得するまでの時間を計測します。
計測方法
1. チャンクのフレーム画像取得関数を呼び出したタイミングで、タイマーをスタートします。
2. チャンクのフレーム画像がすべて取得されたタイミングで、大麻ーをストップします。
1. video 要素
説明
この方式では、video要素のsrcに、読み込んだファイルのBlobのObjectURLを指定することで、MP4ファイルのBlobへの操作をブラウザの実装に委ねます！
そして、videoに表示された画像を、映像のフレーム画像として引き回し、canvas APIで書き出します。
既知の
2. ffmpeg.wasm
説明
この方式では、ffmpeg.wasmに、インメモリなmp4ファイルを渡してフレーム画像のarrayBufferを取得します！
ただし、mp4ファイルの渡し方について、パフォーマンスとメモリ使用量の面から2つの方法を比較します。
小分類
a. すべて読み込む
b. 解凍に必要なチャンクだけを読み込む
3. opencv.js
説明
この方式では、opencv.js（opencv）にmp4ファイルを読み込みます。
懸念
opencv.jsがmp4ファイルに対してサポートしているのは、フレーム画像の取得なのではないか？
mp4ファイルの解凍はチャンク単位で行うので、フレーム画像は1チャンクまとめてほしい。
4. Web Codecs API
説明
この方式では、Web Codecs APIを使用してmp4ファイルからフレーム画像を取得します。
Q. どうやって？
既知の問題
対応ブラウザの少なさ
レンダリングの方法
1. canvas APIを直接利用する
すなわち、putImageDataします。
いや、これは違うな
なぜならputImageDataは完全な置換だからだ
これは比較するまでもなく、WebGL以外ありえないのでは？
最終的に画像を合成する必要があるので
2. 取得したフレーム画像をWebGLでテクスチャマッピングし、レンダリングする。