Javascript 将本地mjpg视频流到html画布

我正在尝试将mjpg视频的实时流写入html画布

下面：有一个带有mjpeg视频的公共网络摄像头列表，但他们似乎在用框架元素编写标记，我无法理解它是如何工作的

理想的解决方案是在fiddle中的html画布上提供任何实时mjpg（理想情况下是链接？）流媒体

非常感谢任何有用的资源，我希望在不包含外部库的情况下这样做（允许jquery）

编辑：相关：

---

编辑：我也有一个本地的mjpg可以借鉴，比如下面的例子。该解决方案可以使用本地流

许多IP mjpeg摄像头实际上以预定义的帧速率发送单个jpeg文件，当频繁更新时，这些文件看起来就像视频

您需要检查您相机的制造商API，以获得用于获取图像流的正确url，例如，对于Foscam相机，我以前做过以下工作，它工作得非常完美：

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

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

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

更新2-还有一些摄像头有用户名和密码，因此您可能需要将它们附加到url

videostream.cgi？user=your_user&password=your_password

---

希望这能有所帮助。

许多现有的IP mjpeg摄像头实际上以预定义的帧速率发送单独的jpeg文件，这些文件在频繁更新时看起来就像视频

您需要检查您相机的制造商API，以获得用于获取图像流的正确url，例如，对于Foscam相机，我以前做过以下工作，它工作得非常完美：

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

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

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

更新2-还有一些摄像头有用户名和密码，因此您可能需要将它们附加到url

videostream.cgi？user=your_user&password=your_password

希望这有帮助。

根据CanvasRenderingContext2D

drawImage

方法

具体而言，当CanvasImageSource对象表示动画 图像在HTMLImageElement中，用户代理必须使用默认值 动画图像（将使用格式定义的图像） 不支持或禁用动画时），或 这样的图像，动画的第一帧，在渲染图像时 用于CanvasRenderingContext2D API

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

请注意，chrome浏览器只支持.gif图像，但有一天他们可能会修复它

正如您自己所注意到的，一种解决方案是使用clear cache hack（清除缓存攻击）（

'your.url/？'+new Date（）.getTime（）；

）获取另一个新帧，但是您将失去mjpeg格式（部分帧内容）的任何优势，并且无法确定何时会发生刷新

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

---

编辑2018

---

两年后，我突然想到了第三个解决方案：

UAs不会绑定为文档中的所有上下文在内存中保留相同的默认图像。
而对于其他格式，我们仍然有点卡住，对于MJPEG流，它没有一个定义良好的默认图像，我们实际上下降到动画的第一帧

因此，通过绘制

canvas，img{
最大高度：75vh；
}
每帧使用新的屏幕外画布：


原始图像：


直接绘制img>（如果这样做有效，则您的浏览器不符合规范）：

根据CanvasRenderingContext2D
drawImage
方法

具体而言，当CanvasImageSource对象表示动画
图像在HTMLImageElement中，用户代理必须使用默认值
动画图像（将使用格式定义的图像）
不支持或禁用动画时），或
这样的图像，动画的第一帧，在渲染图像时
用于CanvasRenderingContext2D API

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

请注意，chrome浏览器只支持.gif图像，但有一天他们可能会修复它

正如您自己所注意到的，一种解决方案是使用clear cache hack（清除缓存攻击）（
'your.url/？'+new Date（）.getTime（）；
）获取另一个新帧，但是您将失去mjpeg格式（部分帧内容）的任何优势，并且无法确定何时会发生刷新

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


编辑2018


两年后，我突然想到了第三个解决方案：

UAs不会绑定为文档中的所有上下文在内存中保留相同的默认图像。

而对于其他格式，我们仍然有点卡住，对于MJPEG流，它没有一个定义良好的默认图像，我们实际上下降到动画的第一帧

因此，通过绘制

canvas，img{
最大高度：75vh；
}
每帧使用新的屏幕外画布：


原始图像：


直接绘制img>（如果这样做有效，您的浏览器不符合规格）：

不符合规格