Live video on a high hit rate site

Summary: This article shows how to include a live video from a Axis network camera on a UNIX Web server page using an intermediate FTP server.

The information in this article applies to all Axis network cameras and video servers supporting sequential FTP upload.

If a site has many simultaneous connections, you must "protect" the Axis network video product from overload. Do this by buffering the images on a high performance Web server. The Axis network video product has built-in functionality that enables it to upload images automatically to the "buffer server".

A high hit-rate Internet site may overload the Axis network video product since a maximum of 20 users can receive live images simultaneously. Below we explain how you can set this up on a Unix Web server.

Configure the Axis network video product to deliver images sequentially to an FTP server. This is done using the Event Configuration in the product's web interface. The Web server (in most cases the same computer as the FTP server) will, from these images, generate an image stream to all users who access the Web page.

Set up an intermediate Unix Web server

Create a directory where you want the demo to reside.
Copy the Axis viewing ActiveX component available here to your demo directory and name it AxisCamControl.ocx.
Create the CGI image push script that creates the image stream from the incoming images.
You must enter the following parameters:
$DIR - The directory where images are uploaded by the Axis Network Video product.
$fileName - The filename images are stored as.
$freq - the update frequency.
Create a Web page that contains the HTML code in the example. Change the BaseUrl, File and OcxFile.

Examples

Perl script:

#!/usr/bin/perl
#
#
require 'stat.pl';
#########################################################
# Path to where the image file is stored
$DIR = "/cam/root/";
#Filename the image is stored as
$fileName = "image.jpg";
#Maximum of images/s sent
$freq = 3;
#Max number of images to send on a connection
$maxImages = 900;
#Max number of seconds until update is considered stopped
#(ie the camera is no longer updating the image)
$maxNoUpdate = 30;
#########################################################
$con_type = "jpeg";
# Unbuffer the output so it streams through faster and better.
$| = 1;
# No input record separator when reading from file via <>.
undef $/;
# Print HTTP headers...
# NOTE: If your web server returns "Error, faulty header"
# The Line below must be commented away since your web server includes the
# HTTP/1.0 200 OK on its own.
print "HTTP/1.0 200 OK\n";
print "Content-type: multipart/x-mixed-replace; boundary=--myboundary\n\n";
print "--myboundary\n";
$rounds=0;
#max 400 images
while ($rounds < $maxImages)
{
$rounds = $rounds +1;
$basefile = $DIR . $fileName;
@fstat = stat($basefile);
# If the same image time stamp is on the image file for more then
# X seconds then I presume that the image is no longer updated and will
# End the connection
if ($fstat[$ST_MTIME] ne $oldimagetime)
{
$sameCount = 0;
$oldimagetime = $fstat[$ST_MTIME];
}
#We may send the same image multiple times but there is a strict limit
if ($sameCount > ($maxNoUpdate * $freq))
{
die;
}
$sameCount = $sameCount +1;
$rounds=$rounds +1;
print "Content-type: image/$con_type\n\n";
# This is where we act
open(PIC,"$basefile");
print STDOUT <PIC>;
close(PIC);
print "\n\n--myboundary\n";
# Pause for 1/$freq seconds, if this time is more then a second
# we recomend you replace with sleep(NbrOfSeconds)
select(undef,undef,undef,(1/$freq));
}

HTML file:

<html>
<head>
<title>MJPG Live Demo</title>
</head>
<body>
<center>
<h2>Motion JPEG image on a UNIX web server via an intermediate FTP server</h2>




<SCRIPT LANGUAGE="JavaScript">
// Set the BaseURL to the url of your Web server
// Example: var BaseURL = "http://www.axis.com/";
var BaseURL = "http://[WebServer]/";

// DisplayWidth & DisplayHeight specifies the displayed width & height of the image.
// The values depend on what Network Camera and resolution are used.
// Select the Network Camera and resolution by removing the "//" at the beginning
// of the applicable line.
// Note that only one can be enabled.

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

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

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

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

// This is the filepath to the Perl script
// Example: var File = "nph-update.cgi";
var File = "nph-update.cgi";
// This is the filepath to the ActiveX ocx needed by Internet Explorer
// note the version number that is needed.
// Example: var OcxFile = "AxisCamControl.ocx#Version=1,0,1,43";
var OcxFile = "AxisCamControl.ocx#Version=1,0,1,43";

// No changes required below this point
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer")&&(navigator.platform != "MacPPC")&&(navigator.platform != "Mac68k"))
{
// If Internet Explorer for Windows then use ActiveX
output = "<OBJECT ID=\"CamImage\" WIDTH="
output += DisplayWidth;
output += " HEIGHT=";
output += DisplayHeight;
output += " CLASSID=CLSID:917623D1-D8E5-11D2-BE8B-00104B06BDE3 ";
output += "CODEBASE=\"";
output += BaseURL;
output += OcxFile;
output += "\">";
output += "<PARAM NAME=\"URL\" VALUE=\"";
output += BaseURL;
output += File;
output += "\"> <BR><B>Axis ActiveX Camera Control</B><BR>";
output += "The AXIS ActiveX Camera Control, which enables you ";
output += "to view live image streams in Microsoft Internet";
output += " Explorer, could not be registered on your computer.";
output += "<BR></OBJECT>";
}
else
{
// If not IE for Windows use the browser itself to display
output = "<IMG SRC=\"";
output += BaseURL;
output += File;
output += "?dummy=garb\" HEIGHT=\"";
// The above dummy cgi-parameter helps some versions of NS
output += DisplayHeight;
output += "\" WIDTH=\"";
output += DisplayWidth;
output += "\" ALT=\"Moving Image Stream\">";
}
document.write(output);
</script>

</body>
</html>

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.