在html5画布中运动jpeg

我试图将运动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搜索，只是不确定哪个方向更有前途。只有一些合理的现代浏览器才能支持它。

来源

2012-11-21 clwen

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

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

终于得到它使用这个库的工作：http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas。

尽管如此，仍然与交叉来源问题战斗。我的另一个问题是：Canvas tainted by cross-origin data。

来源

2012-12-04 21:53:25 clwen

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

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

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

BR /Fredrik

来源

2013-03-31 10:06:35 Fredrik

在html5画布中运动jpeg

回答

相关问题