将本地mjpg视频流式传输到html画布

Question

我正在尝试将mjpg视频的直播流写入html画布。

以下内容：http://camelive.info/有一个带有mjpeg视频的公共网络摄像头列表，但他们似乎正在用框架元素编写<frameset>标签，而我无法了解它是如何在小提琴中工作的。

理想的解决方案是在小提琴的html画布上播放任何实时mjpg（理想情况下是链接？）。

任何有用的资源都很受欢迎，我想这样做而不包括外部库（允许jquery）

编辑：相关：How to make an snapshot from a MJPEG stream in HTML

编辑：我也有一个像示例一样的本地mjpg。解决方案可以使用本地流

Answer 1

根据to specs关于CanvasRenderingContext2D drawImage方法，

具体来说，当CanvasImageSource对象表示HTMLImageElement中的动画图像时，用户代理必须使用动画的默认图像（当不支持或禁用动画时，将使用格式定义的图像），或者，如果有在为CanvasRenderingContext2D API渲染图像时，没有这样的图像，即动画的第一帧。

这适用于.gif，SMIL动画.svg和.mjpeg媒体。因此，一旦获取数据，只应在画布上绘制一个帧。

请注意，铬has a bug只尊重.gif图像，但他们可能有一天会修复它。

你注意到的一个解决方案是使用clear-cache hack（'your.url/?' + new Date().getTime();）来获取另一个新帧，但是你将失去mjpeg格式（部分帧内容）的任何优点，并且无法确定刷新何时会发生。

因此，如果适用，更好的解决方案是使用视频格式。视频的每个帧都可以绘制到画布上。

---

编辑2018

---

两年后第三个解决方案出现在我的脑海中：

UA并不依赖于在内存中保留文档中所有2DContexts的相同默认图像。 而对于其他格式，我们仍然有点卡住，对于MJPEG流，没有明确定义的默认图像，我们实际上落到动画的第一帧。

因此，通过在两个不同的画布上绘制包含我们的MJPEG流的<img>，在不同的时间，理论上我们可以在画布上绘制两个不同的相同MJPEG流的帧。

这是仅在Firefox 62上测试的概念证明。

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: <br><canvas id="stream"></canvas><br>
The original image: <br><img id="img"><br>
Drawing directly the &lt;img> (if this works your browser doesn't follow the specs): <br><canvas id="direct"></canvas><br>

因此，虽然这个解决方案显然会带来性能影响（我们每帧都会创建一个全新的canvas元素及其2DContext），但它仍然可能比充斥网络更好。所有这些都应该很容易收集垃圾收集。

Answer 2

许多IP mjpeg摄像机实际上以预定的帧速率发送单独的jpeg文件，当经常更新时，它看起来像一个视频。

您需要检查相机的制造商API以获取用于获取图像流的正确网址，例如使用Foscam相机我之前已完成以下操作并且它完美地运行：

<img id='videostream' src="http://123.456.789.233:8080/videostream.cgi">

您显然必须获得相机的正确IP和端口号（如果存在）。

更新 - 这并不意味着您无法使用其他实时视频流方法，这只是我知道从IP摄像机获取实时视频的最简单方法。

更新2 - 也有一些相机有用户名和密码，所以你可能不得不将这些附加到网址videostream.cgi?user=your_user&password=your_password

希望这可以帮助。