Live snapshots

Summary: This article shows how to include a single snapshot from an Axis network camera on a web page.
The information in this article applies to all Axis network cameras and video servers.

Description

Some browsers handle image caching differently than they would a text or html page. They cache images regardless if they have changed on the server or not. Since the Axis network camera always provides live updated images, you may on some browsers see an old cached image when you return to the page. The following example shows how to avoid this by using a dummy CGI parameter. The html page example also includes a meta tag that will automatically reload the html page every 30 seconds.

Example

<html>
<head>
<META http-equiv="Refresh" content="30">
<!-- The Meta tag above makes this page refresh every 30 seconds -->
<!-- Change the number 30 into your desired refresh rate or remove this -->
<!-- Tag if you do not want the page to refresh automatically -->

<title>JPG Image Demo</title>
</head>
<body>
<center>
<h2>JPEG image</h2>

<SCRIPT LANGUAGE="JavaScript">
// Set the BaseURL to the url of your camera
// Example: var BaseURL = "http://172.21.1.122/";

var BaseURL = "http://[myCamera]/";

// The two following lines need to be changed if an an AXIS 241S(A)/241Q(A)/240Q/243SA is used:

var Camera = ""; // If you use an AXIS 241S(A)/241Q(A)/240Q/243SA, comment away this line by inserting "//"
// var Camera = "n"; // Change n to the Video source used in the AXIS 241S(A)/241Q(A)/240Q/243SA and remove "//"

// Go to the camera used and remove the "//" in front of the ImageResolution to be used.
// Note that only one can be enabled at a time.

// List of additional available resolutions is shown in the product's configuration.

// AXIS 206/207/210/210A/211/211A/212 PTZ/216FD/221/225FD
// var ImageResolution = "320x240";var DisplayWidth = "320";var DisplayHeight = "240";
// var ImageResolution = "640x480";var DisplayWidth = "640";var DisplayHeight = "480";

// AXIS 213 PTZ/214 PTZ/231D(+)/232D(+)/240Q/241S(A)/241Q(A)/243SA PAL
// var ImageResolution = "352x288";var DisplayWidth = "352";var DisplayHeight = "288";
// var ImageResolution = "704x576";var DisplayWidth = "704";var DisplayHeight = "576";

// AXIS 213 PTZ/214 PTZ/231D(+)/232D(+)/240Q/241S(A)/241Q(A)/243SA NTSC
// var ImageResolution = "352x240";var DisplayWidth = "352";var DisplayHeight = "240";
// var ImageResolution = "704x480";var DisplayWidth = "704";var DisplayHeight = "480";


// No changes required below this point
var File = "axis-cgi/jpg/image.cgi?resolution=" + ImageResolution;
if (Camera != "") {File += "&camera=" + Camera;}
theDate = new Date();
var output = "<IMG SRC=\"";
output += BaseURL;
output += File;
output += "&dummy=";
output += theDate.getTime().toString(10);
// The above dummy cgi-parameter enforce a bypass of the browser image cache.
output += "\" HEIGHT=\"";
output += DisplayHeight;
output += "\" WIDTH=\"";
output += DisplayWidth;
output += "\" ALT=\"Live Image\">";
document.write(output);
</script>
</body>
</html>

Note 1: For more options see the HTML examples in the product's web interface (products running firmware version 4.xx).

Note 2: Do not cut and paste this code directly into the Microsoft FrontPage program. First copy it to Notepad to remove formatting and then copy under the HTML tab in a new page in FrontPage.

Important: Axis does not take any responsibility for how these configuration changes may affect your system. If the modification fails or if you get other unexpected results, you may have to restore the factory default settings as described in the User’s Manual.