将本地mjpgvideo流式传输到htmlcanvas
我正在尝试将mjpgvideo的直播流写入htmlcanvas。
以下内容： http ： //camelive.info/有一个带有mjpegvideo的公共网络摄像头列表，但它们似乎是用框架元素编写标签，而我无法了解它是如何在小提琴中工作的。
理想的解决方案是在小提琴的htmlcanvas上播放任何实时mjpg（理想情况下是链接？）。
任何有用的资源都很受欢迎，我想这样做而不包括外部库（允许jquery）
编辑：相关： 如何从HTML中的MJPEG流创建快照
编辑：我也有一个像示例一样的本地mjpg。 解决方案可以使用本地流
根据有关CanvasRenderingContext2D drawImage方法的规范 ，
具体来说，当CanvasImageSource对象表示HTMLImageElement中的动画图像时，用户代理必须使用动画的默认图像（当不支持动画或禁用动画时，将使用格式定义的图像），或者，如果有在为CanvasRenderingContext2D API渲染图像时，没有这样的图像，即动画的第一帧。
这适用于.gif ，SMIL动画.svg和.mjpeg媒体。 因此，一旦获取数据，只应在canvas上绘制一个帧。
请注意，chrome 有一个bug并且仅尊重.gif图像，但是有一天它们可能会修复它。
你注意到的一个解决方案是获取另一个新的框架，使用clear-cache hack（ 'your.url/?' + new Date().getTime(); ）但是你将失去mjpeg格式的任何优点（部分帧内容）并且无法确定何时进行刷新。
因此，如果适用，更好的解决方案是使用video格式。 video的每个帧都可以绘制到canvas上。
编辑2018
两年后第三个解决方案出现在我的脑海中：
UA并不依赖于在内存中保留文档中所有2DContexts的相同默认图像 。
而对于其他格式，我们仍然有点卡住，对于MJPEG流，没有明确定义的默认图像 ，我们实际上落到动画的第一帧 。
因此，通过在两个不同的canvas上绘制包含我们的MJPEG流的
这是仅在Firefox 62上测试的概念certificate。
var ctx_stream = stream.getContext('2d'); var ctx_direct = direct.getContext('2d'); img.onload = function() { stream.width = direct.width = this.naturalWidth; stream.height = direct.height = this.naturalHeight; // onload should fire multiple times // but it seems it's not at every frames // so we'll disable t and use an interval instead this.onload = null; setInterval(draw, 500); }; function draw() { // create a *new* 2DContext var ctx_off = stream.cloneNode().getContext('2d'); ctx_off.drawImage(img, 0,0); // and draw it back to our visible one ctx_stream.drawImage(ctx_off.canvas, 0,0); // draw the img directly on 'direct' ctx_direct.drawImage(img, 0,0); } img.src = "http://webcam.st-malo.com/axis-cgi/mjpg/video.cgi?resolution=704x576&dummy=1491717369754";
canvas,img{ max-height: 75vh; }
Using a new offcreen canvas every frame:
The original image:
![]()
Drawing directly the <img> (if this works your browser doesn't follow the specs):
许多IP mjpeg摄像机实际上以预定的帧速率发送单独的jpeg文件，当经常更新时，它看起来像一个video。
您需要检查相机的制造商API以获取用于获取图像流的正确url，例如使用Foscam相机我之前已做过以下操作并且它完美地工作：
您显然必须获得相机的正确IP和端口号（如果存在）。
更新 –这并不意味着您无法使用其他实时video流方法，这只是我知道从IP摄像机获取实时video的最简单方法。
更新2 – 也有一些相机有用户名和密码，所以你可能需要将它们附加到url videostream.cgi?user=your_user&password=your_password
希望这可以帮助。