clw*_*wen 9 canvas mjpeg html5-video html5-canvas
我正在尝试将运动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)环也没有帮助(这并不奇怪).
我认为应该有一些技巧可以让它发挥作用,仍然在谷歌上搜索,只是不确定哪个方向更有希望.只有一些合理的现代浏览器才能支持它.
小智 5
另一种解决方案是在你的javascript中添加它.
window.setInterval("refreshCanvas()", 10);
function refreshCanvas(){
ctx.drawImage(img, 0, 0);
};
它将每10毫秒重绘一次画布中的图像.
BR/Fredrik
终于通过使用这个库得到了它的作品：http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas。
但仍在与跨域问题作斗争。我的另一个问题是：Canvas tainted by cross-origin data。