我正在尝试将运动 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) into a while (true)循环也没有帮助（毫不奇怪）。
我认为应该有一些技巧可以让它发挥作用，仍在谷歌搜索，只是不确定哪个方向更有希望。仅受一些相当现代的浏览器支持是可以的。
另一个解决方案是将其添加到您的 javascript 中。
window.setInterval("refreshCanvas()", 10);
function refreshCanvas(){
ctx.drawImage(img, 0, 0);
};
它会每 10 毫秒在 Canvas 中重绘一次图像。
BR
/ 弗雷德里克
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
