6

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.net/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.

Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
LEM
  • 825
  • 6
  • 16
  • 31
  • This is definitely not possible in pure HTML. What client side and (more realistically) server side languages can you use? – Pekka Feb 28 '11 at 16:52
  • Javascript is my only option. I cannot use any server side languages. – LEM Feb 28 '11 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 Feb 28 '11 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 Feb 28 '11 at 17:45

3 Answers3

4

Your 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>
Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • Thanks a lot for your reply. I just tried it on Firefox but nothing happens when I click on the save button. Is it supposed to show a save dialog? The stream works for me right now. If it doesn't work, you can also try http://extcam-16.se.axis.com/axis-cgi/mjpg/video.cgi which is even faster. Thanks – LEM Feb 28 '11 at 19:11
  • Oh my. From 4.8.11.3 in the spec: "Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception." Apparently the act of drawing an image on the canvas disallows you from using toDataURL. It may only work if you are hosting the html on the same origin as the feed is being hosted. You'll have to try that. – Simon Sarris Feb 28 '11 at 20:31
  • Note that if you are not planning on hosting the html on the same origin (Domain) as the feed, you might have to do something tricky. – Simon Sarris Feb 28 '11 at 20:37
  • Thanks for that but unfortunately the feed will not be on the same domain. Maybe there is not an easy solution for this... – LEM Feb 28 '11 at 21:56
  • @LEM The server which serves the image must allow non-origin use by stating so in the header. If not you need to host the web page at the same origin (basically domain) as the camera feed. Talk with the web master and see if they can add `Access-Control-Allow-Origin: *` (for details, see here: http://www.w3.org/TR/cors/). Optionally turn your own server into a proxy by fetching it from your server and then serve from there to your page. –  Jun 13 '13 at 08:07
3

Use AXIS api to get snapshot, you can get it here: 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"

Also you can use additional parameters, such as resolution and compression

Binoklev
  • 41
  • 2
1

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.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.

defvol
  • 14,392
  • 2
  • 22
  • 32