html5画布中的运动jpeg答案

【问题标题】：Motion jpeg in html5 canvashtml5画布中的运动jpeg
【发布时间】：2012-11-10 03:14:14
【问题描述】：

我正在尝试将运动 jpeg (mjpeg) 流（来自网络摄像头）包装到 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) 循环也无济于事（不足为奇）。

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

【问题讨论】：

你打算做什么后期处理？
一些简单的视觉算法，比如运动检测。

标签： canvas html5-video html5-canvas mjpeg

【解决方案1】：

另一个解决方案是在你的javascript中添加它。

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

它会每 10 毫秒重绘一次画布中的图像。

BR /弗雷德里克

【讨论】：

【解决方案2】：

终于通过使用这个库让它工作了：http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas。

但仍在与跨域问题作斗争。我关于 SO 的另一个问题：Canvas tainted by cross-origin data。

【讨论】：