I have the following HTML web page:
<html>
<body>
<IMG SRC='.cgi'>
</body>
</html>
This web page displays the feed of an IP camera streaming MJPEG data. You can try the above code here: / (it doesn't work from 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.
I have the following HTML web page:
<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/jU4aq/ (it doesn't work from 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.
Share Improve this question edited Aug 16, 2011 at 17:55 Nightfirecat 11.6k6 gold badges37 silver badges53 bronze badges asked Feb 28, 2011 at 16:52 LEMLEM 8626 gold badges16 silver badges32 bronze badges 4- This is definitely not possible in pure HTML. What client side and (more realistically) server side languages can you use? – Pekka Commented Feb 28, 2011 at 16:52
- Javascript is my only option. I cannot use any server side languages. – LEM Commented Feb 28, 2011 at 16:55
- 1 Hmm. Fetching the image into a canvas element might work, if that reliably grabs the current frame only. Re-tagging for better exposure.... However, to actually serve the file locally as a "Save as" download, you may additionally need Flash. – Pekka Commented Feb 28, 2011 at 16:59
- Thanks for your reply. I'm not too familiar with HTML so hopefully somebody will help providing some code to retrieve the canvas! – LEM Commented Feb 28, 2011 at 17:45
4 Answers
Reset to default 4Your stream doesn't seem to be working right now but try a bit of canvas javascript, like:
<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>
Use AXIS api to get snapshot, you can get it here: http://www.axis./techsup/cam_servers/dev/cam_http_api_index.php
In you case URL is "http://your.server/axis-cgi/jpg/image.cgi"
Also you can use additional parameters, such as resolution and pression
Some IP cameras have a path for snapshots. For example, Vivotek's runs at "/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/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.
A slightly modified answer from Simon Sarris worked for me:
<img id="snapshot" src="mjpeg_stream_url" />
document.getElementById('snapshot').onclick = function () {
const canvas = document.createElement('canvas');
const img = document.getElementById('snapshot');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const link = document.createElement('a');
link.download = 'snapshot.png';
link.href = canvas.toDataURL('image/png');
link.click();
};