在html5画布中移动jpeg [英] Motion jpeg in html5 canvas
问题描述
我试图将运动jpeg（mjpeg）流（从webcam）包装到html5画布。我知道Safari和Chrome本地支持mjpeg，所以我可以把它放入 img ，使其工作。我想把它包装在画布上的原因是我想对它进行一些后处理。
我知道我可以使用 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）循环也没有帮助）。
我认为应该有一些技巧，使它工作，仍然googling，只是不知道哪个方向更有前途。
最后得到它的工作原理是使用这个库： http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas 。 p>
仍然与跨源问题争斗。我对SO的另一个问题：跨原始数据造成的画布污染。 p>
I'm trying to wrap motion jpeg (mjpeg) stream (from webcam) into html5 canvas. I know Safari and Chrome have native support for mjpeg so that I can put it into img to make it work. The reason I want to wrap it in canvas is that 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 load mjpeg as an image so only display the first frame. Put ctx.drawImage(img, 0, 0) into a while (true) loop also not help (not surprisingly).
I think there should be some tricks to make it work, still googling around, just not sure which direction is more promising. It is OK to be only supported by some reasonably modern browsers.
Finally got it works by using this library: http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas.
Still fighting with cross-origin problem though. My another question on SO: Canvas tainted by cross-origin data.
这篇关于在html5画布中移动jpeg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
