HTML5 のビデオ API をテストしています。白黒にするなどの効果をつけて動画を再生する予定です。私はバッファを使用して一緒に作業しています。現在のビデオ フレームを取得し、それを処理できるスクラッチ バッファーにコピーします。問題は実行速度です。
HTML5 の Video API には「timeupdate」イベントがあります。これを使用して、フレームごとに 1 回、ハンドラーにフレームを処理させようとしましたが、ビデオよりも遅い速度で実行されます。
フレームの処理を高速化するためのアイデアはありますか?
200 ～ 250 ミリ秒ごとにtimeupdate更新される . フレーム精度のアニメーションには十分ではありません。requestAnimationFrame最大で 16 ミリ秒 (約 60 fps) ごとに更新されますが、ブラウザーは必要に応じてそれを抑制し、ビデオ バッファーの描画呼び出しと同期します。それはまさにあなたがこの種のことを望んでいるものです.
フレーム レートが高くても、2D キャンバスでのビデオ フレームの処理はかなり遅くなります。1 つには、Javascript を実行して、CPU ですべてのピクセルを順次処理しています。もう 1 つの問題は、大量のメモリをコピーしていることです。ビデオ要素のピクセルに直接アクセスする方法はありません。代わりに、最初にフレーム全体をキャンバスにコピーする必要があります。次に、 を呼び出す必要がありますgetImageData。これは、フレーム全体をもう一度コピーするだけでなく、メモリのブロック全体を再度割り当てる必要があります。これは、ImageData毎回新しいブロックを作成するためです。既存のバッファにコピーできればいいのですが、できません。
WebGL を使用すると、非常に高速な画像処理を実行できることがわかりました。まさにこの目的のために、Seriously.jsというライブラリを作成しました。FAQ とチュートリアルについては、wikiを参照してください。使用できる色相/彩度プラグインがあります。彩度を -1 に下げるだけで、ビデオがグレースケールになります。
コードは次のようになります。
var composition = new Seriously();
var effect = composition.effect('hue-saturation');
var target = composition.target('#mycanvas');
effect.source = '#myvideo';
effect.saturation = -1;
target.source = effect;
composition.go();
WebGL を使用することの大きな欠点は、すべてのブラウザーまたはコンピューターが WebGL をサポートしているわけではないということです。古いまたは奇妙なビデオ ドライバーを搭載したマシンと同様に、Internet Explorer は廃止されています。ほとんどのモバイル ブラウザはサポートしていません。こことここで良い統計を得ることができます。ただし、非常に大きなビデオでは、はるかに複雑なエフェクトを使用しても、非常に高いフレーム レートを得ることができます。
(奇妙なことに、 ChromeとFirefoxの両方に表示されるブラウザのバグに関する小さな問題もあります。キャンバスはビデオの 1 フレーム後ろに表示されることが多く、これはビデオが一時停止されている場合にのみ問題となり、最もひどいものです。スキップしている場合. 唯一の回避策は、ビデオが一時停止されている場合でも、更新を強制し続けることです. これは効率的ではありません. 注目を集めるために、これらのチケットに自由に投票してください.)