Live video on a high hit rate site

Summary: This article shows how to include live video from an Axis network video product on a UNIX Web server page.
The information in this article applies to all Axis Network Cameras and Video Servers supporting sequential FTP upload or HTTP upload.

Description

If a site has many simultaneous connections, the Axis network video product must be protected 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".

Below we explain how you can set this up on a Unix Web server. You will also need to setup the camera and server to use ftp or http-upload for upload of images.

Set up an intermediate Unix Web server

  1. Create a directory where you want the demo to reside
  2. Copy the Axis viewing ActiveX component AMC_Embedded_msi.msi to your demo directory.
  3. Create the CGI image push script that creates the image stream from the incoming images.
     
    You must enter the following parameters in the perl script below:
    $DIR - The directory where images are uploaded by the Axis Network Video product.
    $fileName - The filename images are stored as.
    $freq - the update frequency. 
     
  4. Create a Web page that contains the HTML code in the example. Change the BaseUrl, File and if necessary ActiveX data. 
  5. Set the camera to upload images using either ftp or http to the server. This is not described in this document.

Examples:

Perl script:

#!/usr/bin/perl
#
#
require 'stat.pl';
#########################################################
# Path to where the image file is stored
$DIR = "/var/www/upload/";
#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\r\n\r\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 "--myboundary\r\n";
print "Content-type: image/$con_typen\r\n\r\n";
# This is where we act
open(PIC,"$basefile");
print STDOUT <PIC>;
close(PIC); 
# 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></title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
// Set the BaseURL to the URL of your server
var BaseURL = "http://myserver.com/"; 
// DisplayWidth & DisplayHeight specifies the displayed width & height of the image.
// You may change these numbers, the effect will be a stretched or a shrunk image
var DisplayWidth = "640";
var DisplayHeight = "480";

// This is the path to the script that generates the image stream
var File = "/cgi-bin/nph-update.cgi";
// No changes required below this point
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer") &&
(navigator.platform != "MacPPC") && (navigator.platform != "Mac68k"))
{
// If Internet Explorer under Windows then use ActiveX
output = '<OBJECT ID="Player" width='
output += DisplayWidth;
output += ' height=';
output += DisplayHeight;
output += ' CLASSID="CLSID:DE625294-70E6-45ED-B895-CFFA13AEB044" ';
output += 'CODEBASE="';
output += BaseURL;
output += 'activex/AMC.cab#version=4,0,17,0">';
output += '<PARAM NAME="MediaURL" VALUE="';
output += BaseURL;
output += File + '">';
output += '<param name="MediaType" value="mjpeg-unicast">';
output += '<param name="ShowStatusBar" value="1">';
output += '<param name="ShowToolbar" value="0">';
output += '<param name="AutoStart" value="1">';
output += '<param name="StretchToFit" value="1">';
output += '<BR><B>Axis Media Control</B><BR>';
output += 'The AXIS Media Control, which enables you ';
output += 'to view live image streams in Microsoft Internet';
output += ' Explorer, is not installed on your computer.';
output += ' Install it from here <A HREF="AMC_Embedded_msi.msi">AMC Installation</A>.';
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);
document.Player.ToolbarConfiguration = "play,+snapshot,+fullscreen"

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