在HTML5画布Motion JPEG格式(Motion jpeg in html5 canvas)

2019-08-03 02:07发布

我试图总结的Motion 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)循环也没有帮助（这并不奇怪）。

我觉得应该有一些技巧，使其工作，还是周围的Googling，只是不知道哪个方向是更有前途。它是确定一些比较现代的浏览器只支持。

Answer 1:

另一种方法是在你的JavaScript添加此。

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

这将重绘每10毫秒画布图像。

BR /弗雷德里克

Answer 2:

最后得到了它的工作原理是使用这个库： http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas 。

跨起源问题仍然战斗虽然。我对SO另一个问题：帆布通过跨域数据污染。