2012-11-21 17 views
7

私は動きのjpeg(mjpeg)ストリームを(webcamから)html5キャンバスにラップしようとしています。私はSafariとChromeがmjpegのネイティブサポートを持っているので、それを動作させるためにimgに入れることができます。私がキャンバスに包み込みたいのは、その上で後処理をしたいからです。html5キャンバスでの動きjpeg

iは画像(及びMJPEG)をロードするdrawImageを使用することができる知っている:最初のフレームを表示せ

<html> 
    <body> 
    <canvas id='test_canvas' width='640px' height='480px' style='border:1px solid #d3d3d3'> 
    </canvas> 
    <script language="JavaScript"> 
     var ctx = document.getElementById('test_canvas').getContext('2d'); 
     var img = new Image(); 
     img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     }; 
     var theDate = new Date(); 
     img.src = "http://some.video.stream.edu/axis-cgi/mjpg/video.cgi?"; 
    </script> 
    </body> 
</html> 

しかし、画像としてMJPEGをロードします。 ctx.drawImage(img, 0, 0)while (true)ループに入れても、驚くことではありません。

私はそれが動作するようにいくつかのトリックがあるべきだと思う、まだ周りのグーグル、ちょうどどちらの方向性がより有望であるか分からない。合理的に現代的なブラウザによってのみサポートされることはOKです。

+0

何後処理は、あなたがする計画がありますか? – jazzytomato

+0

動き検出などのシンプルビジョンアルゴリズム。 – clwen

答えて

4

もう1つ解決策は、これをあなたのjavascriptに追加することです。

10msごとにキャンバス内にイメージを再描画します。

BR /フレドリック

関連する問題