私は動きの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です。
何後処理は、あなたがする計画がありますか? – jazzytomato
動き検出などのシンプルビジョンアルゴリズム。 – clwen