在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

回答

相關問題