Canvas vs Fauxビデオプレーヤーの画像

Question

私は非常に迅速にpngを生成するサーバーを持っており、これを貧しい人のビデオフィードにする必要があります。実際にビデオフィードを作成することは選択肢ではありません。

私が今取り組んでいることは（擬似コードで）少し、このようになります再帰ループです：

function update() { 
    image.src = imagepath + '?' + timestamp; // ensures the image will update 
    image.onload = function() {update()}; 
} 

これは動作しますが、しかし、しばらくして、それがブラウザ（Google Chromeを、クラッシュ10分以上経過した後）。これらの画像は非常に頻繁に更新されています（1秒に数回）。画像がキャッシュされているようで、ブラウザのメモリが不足しています。

高速リフレッシュを維持しながら、問題を解決するこれらのソリューションの

：

• HTML5のキャンバスのdrawImage
と
• HTML5のキャンバスCanvasPixelArray（生のピクセル操作）

と私はアクセス権を持っています生のバイナリにUint8Arrayとして渡します。画像はあまり大きくない（50kb以下、720 x 480ピクセル）。

はまた、キャッシュから古い画像を消去するか、完全にキャッシュを避けるために、とにかくはありますか？

EDIT：

注、これは通常のユーザーのためのツールではありません。エンジニアのためのアナログハードウェアの問題を診断するツールです。ブラウザの理由はプラットフォームの独立性です（Linux、Windows、Mac、iPadなどのソフトウェアを変更しなくても動作します）。

Answer 1

クラッシュがhttp://code.google.com/p/chromium/issues/detail?id=36142であるためです。次のフレームがロードされた後、オブジェクトURLを作成して（XHR2 responseType = "arraybuffer"とBlobBuilderを使用して）、前のフレームを取り消す（URL.revokeObjectURLを使用して）ようにしてください。

編集：あなたは実際にこれらをサーバー側のライブの低周波ビデオストリームに処理する必要があります。これにより、待ち時間が大幅に短縮され、読み込み時間が大幅に短縮されます。

Answer 2

"ムービー"がデータ駆動型（つまり、数値と計算に基づいている）の場合、多くのデータをブラウザにテキストとしてプッシュし、JavaScriptをクライアント側でムービーにレンダリングすることができます。クライアントの「プレーヤー」は、必要に応じてバッチでデータを要求できます。

ない場合は、あなたができる一つのことは、単にスクリプトのフレーム毎秒（FPS）、おそらくハードコードされた値、またはスライダー/設定可能な値を制限しています。これがツールの有用性を制限しないと仮定すれば、少なくともブラウザがより長いw/oのクラッシュを実行できるようになります。

は最後に、ヘッダで行うことができるものがたくさんあります（例。の.htaccessファイルで）キャッシュやコンテンツをキャッシュしないようにブラウザに指示します。

Answer 3

@Eli Greyがクラッシュの原因を特定したようです。彼らは作品に修正があるように見えるので、もしあなたがあなたのアプローチをうまく修正したくなければ、それはすぐに解決されるでしょう。

可能であれば、あなたの他の質問に関しては、間違いなくdrawImage()に固執する必要があります。CanvasPixelArrayを使用する意図がわかっている場合、キャンバス内の各ピクセルを繰り返し、新しいピクセル情報で更新することを検討していますか？もしそうなら、これはどこにもありませんと同様に効率がdrawImage()になります。さらに、前のフレームのデータを参照する必要がない（おそらく）ため、このアプローチはまったく必要ありません。

幸いにも、HTML5キャンバスに保存されたCanvasPixelArray内部オブジェクトを直接スワップアウトすることはできません。正しくフォーマットされたピクセルデータの配列を持っている場合、キャンバス要素を更新できる唯一の方法は、drawImage()またはputImageData()のいずれかを呼び出すことです。今のところ、putImageData()はdrawImage()よりもはるかに遅いです。ご覧のとおり、http://jsperf.com/canvas-drawimage-vs-putimagedataです。あなたのビデオのフレームに透明性がある場合は、キャンバスをクリアしてからdrawImage()を使用することをお勧めします（そうしないと、前のフレームまで見ることができます）。

これまでに言いましたが、実際にはキャンバスを使用する必要があることはわかりません。あなたがキャッシングを避けることができるようにキャンバスを使用することを目指していたのはあなたのモチベーションでした（今はあなたの根本的な問題ではないようです）。

Answer 4

iPad？あなたは言うでしょうが、私はフラッシュ/ビデオやHTML5 /ビデオを使ってアドバイスをします。

WebKitのは非常に簡単に画像の中程度の流入に墜落しているので、ちょうど大きな画像や小さなもののほんの膨大な数のいずれか..他の側から

、base64で画像データや画素配列とのXHRはうまくいくかもしれません。私は10秒ごとにXHRポーリングサーバーで10-12時間実行することができた短いポーリングアプリを持っていました。

また、横軸のヒストグラムが時間スケールである場合、デルタ圧縮を考えてみましょう。ヒートマップのようなものについては、少ししかスライスを送ることができません。もちろん、それはできません。

これらの画像は非常に頻繁に更新されています（ 秒数回）。

..そのような高いレートで更新することが非常に重要な場合 - long pollingを使用する必要があります。