html5画布中的运动jpeg

本文介绍了html5画布中的运动jpeg的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<html><身体><canvas id='test_canvas' width='640px' height='480px' style='border:1px solid #d3d3d3'></画布><脚本语言="JavaScript">var ctx = document.getElementById('test_canvas').getContext('2d');var img = new Image();img.onload = 函数() {ctx.drawImage(img, 0, 0);};var theDate = new Date();img.src = "http://some.video.stream.edu/axis-cgi/mjpg/video.cgi?";</脚本></身体></html>

但是，它将 mjpeg 作为图像加载，因此仅显示第一帧.将 ctx.drawImage(img, 0, 0) 放入 while (true) 循环也无济于事(不足为奇).

我认为应该有一些技巧让它发挥作用，仍在谷歌搜索，只是不确定哪个方向更有希望.只被一些相当现代的浏览器支持是可以的.

解决方案

终于用这个库搞定了:http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas.

但仍在与跨域问题作斗争.我关于 SO 的另一个问题:Canvas 被跨域数据污染.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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

MJPEG

html5画布中的运动jpeg

问题描述