Jak działa wstawianie obrazu z kamery na stronę WWW?
Embedowanie obrazu z kamery na stronę WWW polega na wstawieniu odpowiedniego kodu, który pobiera z kamery dane i wyświetla je w przyjaznej formie użytkownikowi. Standardowa kamera marki Axis potrafi wysłać do 20 strumieni jednocześnie. Dla większości stron www jest to ilość wystarczająca. Dla takiego przykładu przygotowaliśmy kod.
Dla stron www o większej oglądalności niż 20 osób na raz każdy użytkownik ponad limit nie zobaczy obrazu. Przy witrynach tego typu należy zastosować serwer pośredniczący przeznaczony do strumieniowania.
Jak działa kod?
Przedstawiony niżej kod składa się z dwóch części. Pierwsze linie to konfiguracja. Ustawiamy tu adres do kamery, rozdzielczość obrazu i dokładny adres do pliku ze zdjęciami. Podana konfiguracja dotyczy kamer Axis, ale wystarczy zmodyfikować var File, aby skrypt działał z kamerami innych producentów.
Druga część kodu rozpoznaje rodzaj przeglądarki i wystawia odpowiedni kod. Dla Internet Explorer użyto ActiveX. Można usunąć tę część skryptu i zostawić tylko kod dla innych przeglądarek aby uniknąć potrzeby uruchamiania ActiveX.
Przykładowy kod do wstawienia na stronę www przygotowany dla kamer Axis
<html>
<title>Obraz live z kamery</title>
<body>
<center>
<h2>Obraz z kamery</h2>
<SCRIPT LANGUAGE="JavaScript">
// Wpisz adres do kamery
// Przykładowo: var BaseURL = "http://172.21.1.122/";
var BaseURL = "http://[myCamera]/";
// Ustaw rozdzielczość obrazu
// AXIS 207/210/210A/211/211A/212 PTZ/216FD/221/225FD<br>
// 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<br>
// var ImageResolution = "352x288";var DisplayWidth = "352";var DisplayHeight = "288";
// var ImageResolution = "704x576";var DisplayWidth = "704";var DisplayHeight = "576";
// Ścieżka do części generującej obraz w kamerze
var File = "axis-cgi/mjpg/video.cgi?resolution="+ImageResolution;
// Dalej już nic nie zmieniamy
if (Camera != "") {File += "&camera=" + Camera;}
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer") &&
(navigator.platform != "MacPPC") && (navigator.platform != "Mac68k"))
{
// Dla Internet Explorera używamy 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 {
// Dla innych przeglądarek
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>
Kod dla kamer IQeye
Dla kamer marki IQeye producent przygotował jeszcze prostszy kod. Wystarczy wstawić adres kamer zamiast CameraIP.
In English
Dostarczamy rozwiązania ułatwiające życie!
