Canvas html5画布中的运动jpeg

我正在尝试将运动jpeg（mjpeg）流（来自网络摄像头）包装到html5画布中。我知道Safari和Chrome对mjpeg有本机支持，因此我可以将其放入

img

中，使其正常工作。我想将其包装在画布中的原因是我想对其进行一些后期处理

我知道我可以使用

drawImage

加载图像（和mjpeg）：

var ctx=document.getElementById（'test_canvas'）.getContext（'2d'）；
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
};
var theDate=新日期（）；
img.src=”http://some.video.stream.edu/axis-cgi/mjpg/video.cgi?";

但是，它将mjpeg作为图像加载，因此仅显示第一帧。将

ctx.drawImage（img，0，0）

放入

while（true）

循环也没有帮助（毫不奇怪）

---

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

通过使用这个库，它终于可以工作了：

---

不过，仍在与跨国公司的问题作斗争。我的另一个问题是：。

另一个解决方案是在javascript中添加这个

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

它将每隔10毫秒在画布中重新绘制图像

溴

---

/Fredrik

您计划做什么后处理？一些简单的视觉算法，如运动检测。

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