Живое видео на сайте со средней посещаемостью

Резюме: В этой статье показано, как вставить живое видео с устройства сетевого видеонаблюдения Axis на веб-страницу.
Приведенная в статье информация относится ко всем сетевым камерам и видеосерверам Axis, имеющим встроенное ПО версии 4.хх.

Описание

Если есть прямое Ethernet-подключение для сетевой камеры Axis, то просто подключите камеру к сети, чтобы просматривать изображения непосредственно с нее. Встроенный веб-сервер способен работать в любых режимах. Вы также можете легко настроить свою собственную веб-страницу в самом устройстве. Если вы захотите вставить живое видео на свою собственную веб-страницу, просто следуйте описанию, которое приведено здесь.
Сетевая камера Axis может обрабатывать 20 одновременных подключений; этого количества достаточно для большинства сайтов со средней посещаемостью. Если количество одновременно подключающихся пользователей превышает 20 человек, то следующий пользователь не увидит живое видео.
Приведенный ниже код немного сложнее предыдущего, но для большинства браузеров он работает. Когда Microsoft Internet Explorer (Windows) открывает эту html-страницу в первый раз, пользователям предлагается загрузить компонент ActiveX для просмотра изображений.
Все, что вам надо сделать, это задать IP-адрес камеры в качестве параметра BaseURL, как описано в приведенном примере и определить значения параметров ImageResolution (разрешение изображения), DisplayWidth (отображаемая ширина изображения) и DisplayHeight (отображаемая высота изображения). 

Пример

<html>
<title>Живое видео с камеры AXIS</title>
<body>
<center>
<h2>Живое видео с камеры AXIS</h2>


<SCRIPT LANGUAGE="JavaScript">
// Задайте URL-адрес вашей камеры в качестве параметра BaseURL
//Пример: var BaseURL = "http://172.21.1.122/";

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

// Необходимо изменить следующие две строки, если используется AXIS 241S(A)/241Q(A)/240Q/243SA:

var Camera = ""; // Если используется AXIS 240Q/241S(A)/241Q(A)/243SA, превратите эту строку в комментарий, вставив "//"
// var Camera = "n"; // Если используются модели AXIS 240Q/ 241S(A)/241Q(A)/243SA, укажите вместо n используемый видеоисточник и удалите "//"

// Перейдите к настройкам используемой камеры и удалите знак "//" перед используемым параметром ImageResolution.
// Следует помнить, что в каждый момент времени можно активировать только один параметр.

// Список доступных разрешений представлен в разделе настроек устройства.

// 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";

// Это путь к файлу, генерирующему изображение, внутри самой камеры
var File = "axis-cgi/mjpg/video.cgi?resolution="+ImageResolution;
// Ниже этой точки ничего менять не нужно
if (Camera != "") {File += "&camera=" + Camera;}
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer") &&
(navigator.platform != "MacPPC") && (navigator.platform != "Mac68k"))
{
// Если используется Internet Explorer в ОС Windows, то требуется 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 {
// Если используется не IE для Windows, то для отображения используйте сам браузер
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>

Примечание 1: Другие варианты см. в виде HTML-примеров в веб-интерфейсе устройства или на страницах для разработчиков.

Примечание 2: Не следует вырезать и вставлять этот код непосредственно в программу Microsoft FrontPage. Сначала скопируйте его в блокнот, чтобы убрать форматирование, а оттуда уже скопируйте и вставьте в новую страницу FrontPage на вкладке HTML.

Важно! Компания Axis не несет никакой ответственности за то, как эти изменения конфигурации могут повлиять на вашу систему. Если изменение окажется неудачным или вы получите другие неожиданные результаты, то возможно вам придется восстановить заводские установки по умолчанию, как описано в руководстве пользователя.