2012-11-21 30 views
7

我试图将运动jpeg(mjpeg)流(来自摄像头)包装到html5画布中。我知道Safari和Chrome对mjpeg有原生支持,因此我可以将它放到img以使其工作。我想将它包装在画布中的原因是我想对它进行一些后期处理。在html5画布中运动jpeg

我知道我可以使用drawImage加载的图像(和MJPEG):

<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)循环也无济于事(不出意外)。

我认为应该有一些技巧使它工作,仍然使用Google搜索,只是不确定哪个方向更有前途。只有一些合理的现代浏览器才能支持它。

+0

你打算做什么后期处理? – jazzytomato

+0

一些简单的视觉算法,如运动检测。 – clwen

回答

4

另一种解决方案是将此添加到您的JavaScript。

window.setInterval("refreshCanvas()", 10); 
function refreshCanvas(){ 
    ctx.drawImage(img, 0, 0); 
}; 

它会每隔10毫秒在画布中重绘图像。

BR /Fredrik