9

我正在尝试将运动 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)也无济于事（不足为奇）。

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

4

2 回答 2

6

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

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

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

BR /弗雷德里克

于 2013-03-31T10:06:35.857 回答
3

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

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

于 2012-12-04T21:53:25.153 回答