Question

我有以下HTML网页：

<html>
<body>
<IMG SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'>
</body>
</html>

此网页显示IP摄像机流式传输MJPEG数据的供稿。你可以在这里尝试上面的代码：http://jsfiddle.net/jU4aq/（它不适用于IE）

我的问题是如何制作该Feed的快照。基本上我想添加一个按钮，当用户点击它时，会弹出一个对话框，提供保存图像的选项。

Answer 1

您的视频流现在似乎无法正常工作，但请尝试使用一些画布javascript，例如：

<html>
<body>
<IMG id="myImage" SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'>

<input type="button" id="save" value="Save to PNG"> 

<script type="text/javascript">
document.getElementById('save').onclick = function () {

var c = document.createElement('canvas');
var img = document.getElementById('myImage');
c.width = img.width;
c.height = img.height;
var ctx = c.getContext('2d');


ctx.drawImage(img, 0, 0);
//window.location = c.toDataURL('image/png');
window.open(c.toDataURL('image/png'))
};

</script>

</body>
</html>

Answer 2

使用AXIS api获取快照，您可以在此处获取： http://www.axis.com/techsup/cam_servers/dev/cam_http_api_index.php

在你的情况下，URL是 “http://your.server/axis-cgi/jpg/image.cgi”

您还可以使用其他参数，例如分辨率和压缩

Answer 3

某些IP摄像机具有快照路径。例如，Vivotek的运行在“/cgi-bin/viewer/video.jpg?streamid=0”。

您可以设置一个HTML按钮来触发JS事件，该事件将创建一个IMG DOMelement，其URL为“src”属性。但您可能需要解决跨域问题http://en.wikipedia.org/wiki/Same_origin_policy。

我最常见的解决方案是使用服务器端语言（如php，node，python，ruby等）下载快照并将其保存为网页的公共文件。

如何从HTML中的MJPEG流创建快照

3 个答案: