javascript 如何从 HTML 中的 MJPEG 流制作快照
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5144940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an snapshot from a MJPEG stream in HTML
提问by LEM
I have the following HTML web page:
我有以下 HTML 网页：
<html>
<body>
<IMG SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'>
</body>
</html>
This web page displays the feed of an IP camera streaming MJPEG data. You can try the above code here: http://jsfiddle.net/jU4aq/(it doesn't work from IE)
此网页显示 IP 摄像机流式传输 MJPEG 数据的馈送。您可以在这里尝试上面的代码：http: //jsfiddle.net/jU4aq/（它不适用于 IE）
My question is how I can make a snapshot of that feed. Basically I want to add a button that when the user clicks on it, a dialog will pop up and will give you the option to save the image.
我的问题是如何制作该提要的快照。基本上我想添加一个按钮，当用户单击它时，会弹出一个对话框，并为您提供保存图像的选项。
回答by Simon Sarris
Your stream doesn't seem to be working right now but try a bit of canvas javascript, like:
您的流现在似乎无法正常工作，但请尝试使用一些 canvas 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>
回答by Binoklev
Use AXIS api to get snapshot, you can get it here: http://www.axis.com/techsup/cam_servers/dev/cam_http_api_index.php
使用 AXIS api 获取快照，您可以在这里获取：http: //www.axis.com/techsup/cam_servers/dev/cam_http_api_index.php
In you case URL is "http://your.server/axis-cgi/jpg/image.cgi"
在你的情况下，URL 是“ http://your.server/axis-cgi/jpg/image.cgi”
Also you can use additional parameters, such as resolution and compression
您还可以使用其他参数，例如分辨率和压缩
回答by defvol
Some IP cameras have a path for snapshots. For example, Vivotek's runs at "/cgi-bin/viewer/video.jpg?streamid=0".
某些 IP 摄像机具有快照路径。例如， Vivotek 的运行在“/cgi-bin/viewer/video.jpg?streamid=0”。
You could setup a HTML button which triggers a JS event that will create an IMG DOMelement with that URL as "src" attribute. But you will probably need to get around cross-domain issues http://en.wikipedia.org/wiki/Same_origin_policy.
您可以设置一个 HTML 按钮来触发一个 JS 事件，该事件将创建一个 IMG DOM 元素，该 URL 为“src”属性。但是您可能需要解决跨域问题http://en.wikipedia.org/wiki/Same_origin_policy。
The solution I have seen the most is to use a server-side language such as php, node, python, ruby, etc, to download the snapshot and save it as a public file for your web page.
我见过最多的解决方案是使用服务器端语言，如php、node、python、ruby等，下载快照并保存为公共文件供你的网页使用。
