ビデオ要素から生データ（TypedArrayなど）を取得し、JavaScriptで操作したいと思います。
現在、新しいキャンバスを作成し、ビデオをキャンバスに描画してから、画像データを取得しています。
ctx.drawImage(myVideo);
var data = ctx.getImageData(0, 0, w, h).data;
正常に動作しますが、CPUを消耗し（ビデオをキャンバスに配置し、キャンバスからコピーして戻す）、大量のゴミを生成します（毎秒約50MB）。他にもっと簡単な解決策はありますか？自分のバッファをgetImageData（...）に渡すことができれば素晴らしいと思います。
ところで。WebGLを使用してビデオを描画し、GPUからロードするのは、これ以上速くはありません:( http://jsperf.com/getting-raw-data-from-video
読んでください
https://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript
実際にコードを表示したり、ブラウザーに言及したり、ビデオに関する情報 (解像度、FPS、エンコーディング) を提供したりしないため、コードが遅い理由や、多くのゴミを表示する理由を判断することは不可能です。Javasrcipt を使用したリアルタイムのビデオ効果は、解像度の制約があれば可能です。
を使用したリアルタイム ビデオ フィルタリングの Mozilla の例を次に示します。
https://developer.mozilla.org/samples/video/chroma-key/index.xhtml https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
最初にビデオ フレームをブリットしないと、ビデオ データへの生のアクセスは得られません<canvas>。ただし、この操作はすべて GPU メモリ内で行われるため、HW アクセラレーションを使用する必要があると思います。GPU からピクセルをダウンロードして Javascript で操作し、ディスプレイ メモリにアップロードして戻すことは、高解像度の最も遅いステップである可能性があります。
最適化のヒント
フレームのスキップを検討する (低 FPS での処理効果)
サーバー側の HTML5 ビデオレンダリング HTML5 アニメーションのレンダリング サーバー側?