Vidéo en direct sur un site à taux de consultation moyen

Résumé : Cet article montre comment inclure une vidéo en direct depuis un produit de vidéo sur IP Axis sur une page web.
Les informations contenus dans cet article s'appliquent à toutes les caméras réseaux et serveurs vidéo Axis utilisant un firmware version 4.xx

Description

Si vous disposez d'une connectivité directe avec le réseau Ethernet pour la caméra réseau Axis, il vous suffit de la connecter à votre réseau et de commencer à visionner des images directement à partir de celui-ci. Le serveur Web embarqué gère tout. Vous pouvez également configurer facilement votre propre page Web à l'intérieur du produit lui-même. Vous pouvez avoir envie d'inclure un vidéo en direct sur votre propre page Web page, pour ce faire il vous suffit suivre la description disponible ici.
La caméra réseau Axis peut gérer 20 connexions simultanées ; ce nombre est suffisant pour la majorité des sites à taux de consultation moyen. Si le nombre d'utilisateurs simultanés dépasse 20, l'utilisateur suivant n'aura pas accès à la vidéo en direct.
Le code ci-dessous est légèrement plus complexe, mais il fonctionne pour la plupart des navigateurs. La première fois que Microsoft Internet Explorer (Windows) accède à cette page html, il est demandé aux utilisateurs de télécharger un composant ActiveX pour visionner l'image.
Tout ce que vous avez à faire est de préciser l'URL de base avec l'adresse IP de votre caméra, tel qu'indiqué dans l'exemple et de définir la résolution de l'image, la largeur et la hauteur de l'écran. 

Exemple

<html>
<title>Vidéo en direct de la caméra AXIS</title>
<body>
<center>
<h2>Vidéo en direct de la caméra AXIS</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 240Q/241S(A)/241Q(A)/243SA, comment away this line by inserting "//"
// var Camera = "n"; // Change n to the Video source used in the AXIS 240Q/ 241S(A)/241Q(A)/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 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";

// This is the path to the image generating file inside the camera itself
var File = "axis-cgi/mjpg/video.cgi?resolution="+ImageResolution;
// No changes required below this point
if (Camera != "") {File += "&camera=" + Camera;}
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">';
output += '<PARAM NAME="MediaURL" VALUE="';
output += BaseURL;
output += File + '">';
output += '<param name="MediaType" value="mjpeg-unicast">';
output += '<param name="ShowStatusBar" value="0">';
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, could not be registered on your computer.';
output += '<BR></OBJECT>';
} else {
// If not IE for Windows use the browser itself to display
theDate = new Date();
output = '<IMG SRC="';
output += BaseURL;
output += File;
output += '&dummy=' + theDate.getTime().toString(10);
output += '" HEIGHT="';
output += DisplayHeight;
output += '" WIDTH="';
output += DisplayWidth;
output += '" ALT="Camera Image">';
}
document.write(output);
document.Player.ToolbarConfiguration = "play,+snapshot,+fullscreen";

</SCRIPT>
</body>
</html>

Remarque 1 : Pour plus d'options, reportez-vous aux exemples HTML dans l'interface web du produit ou les Pages des développeurs.

Remarque 2 : Ne jamais couper/coller ce code directement dans le programme Microsoft FrontPage. Commencez par le copier dans Notepad pour supprimer le formatage, puis copiez-le dans l'onglet HTML d'une nouvelle page dans FrontPage.

Important : Axis ne saurait en aucun cas être tenu pour responsable des effets de ces changements de configuration sur votre système. En cas d'échec de la modification ou si vous obtenez d'autres résultats inattendus, vous devrez peut-être restaurer les paramètres des valeurs par défaut, comme indiqué dans le manuel de l'utilisateur.