Geek Answers Handbook

Jpeg movement in html5 canvas

I am trying to pass jpeg (mjpeg) (from webcam) traffic stream to html5 canvas. I know that Safari and Chrome have built-in mjpeg support, so I can put it in img to make it work. The reason I want to wrap it in canvas is because I want to do some post processing on it.

I know I can use drawImage to load an image (and 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>

However, it loads mjpeg as an image, so it only displays the first frame. Put ctx.drawImage(img, 0, 0) in a while (true) don't help either (not surprisingly).

I think there must be some tricks to make it work, still googling, just not sure which direction is more promising. This is normal to support only some modern modern browsers.

+7
source share
2 answers

Finally, it works using this library: http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas .

However, the struggle against the problem of cross-origin. My other SO question: Canvas corrupted by cross-origin data .
+3
source

Another solution is to add this to your javascript.

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

He will redraw the image on the canvas every 10 ms.

BR / Fredrick

+4
source

More articles:


All Articles