Technická podpora
Kamera

Kamerové
systémy

AVTECH/CCTV
Jiří JONÁK +420 731 652 004 jonak@stasanet.cz
Jan STOJKOVIČ +420 603 157 407 stojkovic@stasanet.cz
MAZi/NUUO
Jan STOJKOVIČ +420 603 157 407 stojkovic@stasanet.cz
Hikvision
Jiří JONÁK +420 731 652 004 jonak@stasanet.cz
Jan STOJKOVIČ +420 603 157 407 stojkovic@stasanet.cz
Dahua
Ing. Antonín HORÁK +420 605 295 751 horak@stasanet.cz
Fotopasti
Martin HÁJEK +420 603 294 595 hajek@stasanet.cz
Docházka

Docházkové a přístupové
systémy

Václav NOVÁK +420 775 020 212 novak@stasanet.cz
 
Videotelefony

Domácí
videotelefony

Commax/Farfisa/Tesla
Břetislav VYTŘÍSAL +420 607 090 200 vytrisal@stasanet.cz
Jan ZLÁMAL +420 733 355 631 zlamal@stasanet.cz
EZS

Elektronické zabezpečovací
systémy

Jablotron
Radomil GRUND +420 731 148 031 grund@stasanet.cz
Paradox
Břetislav VYTŘÍSAL +420 607 090 200 vytrisal@stasanet.cz
Radomil GRUND +420 731 148 031 grund@stasanet.cz
EPS

Ostatní

+420 272 660 193 podpora@stasanet.cz
Novinky e-mailem! ?
Získejte přístup k novinkám z oblasti bezpečnostní techniky:
  
Archiv

 

Odborné články

Doručovací metody:

GLS Os. odběr

Způsoby platby:

Dobírka Převod Hotově PayPal

Visa MC Maestro PayU

Hodnocení obchodu na Zboží.cz

Základní metody integrace obrazu kamer AVTECH do webových stránek

Základní metody integrace obrazu kamer AVTECH do webových stránek - | Stasanet.cz    V reakci na náš předchozí článek o získání obrazu z kamer AVTECH pomocí protokolu RTSP se nám ozvalo několik našich klientů, kteří aktuálně řešili situaci, kdy jejich zákazník vyžadoval integrovat obraz z kamer AVTECH do webových stránek. Tento článek je určen tvůrcům webových aplikací, kteří stojí před stejným úkolem.

Úvodem je třeba poznamenat důležitou věc. Prozatím neexistuje jedna - univerzální metoda, která by byla ideální pro všechny situace. Vždy je třeba některé věci obětovat: určité typy prohlížečů, vyžadovat instalaci dodatečného softwaru / hardwaru, méně efektivně využívat "přenosové pásmo" atp. U každé z metod proto uvedeme, jaké jsou její klady i zápory.

Rozdělení typů aplikací

Způsobů, jak rozčlenit jednotlivá řešení do určitých kategorií, je pochopitelně více, pro naše účely uvažujme dva typy řešení:

Klientské aplikace

Charakteristickou vlastností klientských aplikací je skutečnost, že takřka veškerý kód aplikace běží na straně webového klienta (uvnitř prohlížeče) a zdrojem obrazových dat bude přímo kamera (resp. kamera skrze jednoduchou proxy). To vede k tomu, že každý další, souběžný požadavek na získání určitého prostředku kamery vede k navýšení počtu současně připojených uživatelů / spojení a může tak dojít k vyčerpání limitu, který kamera umožňuje. Naopak výhodou těchto řešení je jejich relativní jednoduchost.

     

Serverové aplikace

Jako serverové aplikace budeme označovat takové aplikace, kdy obrazová data poskytuje klientovi http server, který je získává z kamery. Vyšší náročnost těchto řešení vyvažují dvě výhody:

- Data mohou být získávána pouze 1x mezi HTTP serverem kamerou, zvýšení počtu souběžně připojených klientů pak nevede ke zvýšení počtu požadavků na IP kameru (tzn. re-streaming). Počet současně připojených klientů je tedy dán výkonem našeho HTTP serveru, nikoliv výkonností kamery.

- Data lze poměrně snadno transkódovat – tzn. převést je z formy x (např. stream v H264) mezi HTTP serverem a kamerou a klientům je poskytovat v jiné formě y (např. jednotlivé snímky ve formátu JPEG).

Schéma klientských aplikací:

Klientské aplikace
     

Schéma serverové aplikace:

Serverové aplikace

V tomto článku se zaměříme především na klientská řešení (podrobnější rozbor serverových aplikací bude předmětem dalšího článku). Jednotlivé ukázky prosím neberte jako konečné, komplexní řešení - jedná se o co nejkratší ukázky, které mají za účel demonstrovat základní myšlenku daného řešení.

Zobrazení obrazu / videa v prohlížeči

Jaké jsou možnosti zobrazení obrazu / videa v prohlížečích?

V prvé řadě je možno využít nativních HTML elementů: <img>, <canvas><video>. První jmenovaný umožňuje zobrazit statický obrázek (ve formátu JPEG) v takřka všech grafických browserech, některé prohlížeče pomocí něj umožňují zobrazit video stream, komprimovaný metodou MJPEG (a přenášený protokolem http). Chcete-li s obrazem dále manipulovat na straně klienta, zvažte použití vykreslování v elementu <canvas>.

Použití prvku <video> v HTML5 se prakticky neobejde bez transkódování – k tomuto tématu se později vrátíme v článcích, věnovaných serverovým řešením.

Další možností je použití "externí aplikace", která bude zobrazena uvnitř prohlížeče. Pro tyto účely můžeme použít elementy <object> a jemu podřízené elementy <param>. "Externí aplikací" může být:

- ActiveX prvek pro prohlížeče Internet Explorer (např. ActiveX prvek výrobce, VLC)

- NPAPI plug-in pro ostatní rozšířené prohlížeče (VLC, QuickTime)

- Kód pro platformu Java (dříve)

- Kód pro Adobe AIR / Flash Player

- Kód pro Microsoft Silverlight

Překážky

Okolnosti, které mohou bránit v úspěšné integraci obrazu kamery do webových stránek:

1. Nekompatibilita prohlížečů a jejich podpora různých technologií – prakticky žádná metoda integrace (až na použití obrázků) není podporována na všech platformách a ve všech prohlížečích. Prozkoumáte-li např. webové rozhraní kamer AVTECH, zjistíte, že pro co nejširší kompatibilitu napříč prohlížeči používá 4 různé metody zobrazení kamery:

- Pro mobilní prohlížeče mimo platformu iOS se používá opakované načítání statického obrazu a zobrazení pomocí tagu <img>

- Pro platformu iOS se používá zobrazení MJPEG streamu pomocí tagu <img>

- Pro desktopové prohlížeče mimo Internet Explorer se používá plug-inů přehrávačů VLC media player a Quick Time Player

- Pro desktopové prohlížeče se používá ActiveX prvek

Zdrojem informací o podpoře různých „prvků“ mohou být např. tyto stránky.

2. Omezená šířka pásma Internetu – značným problémem může být rychlost připojení kamery do Internetu (tzn. rychlost uploadu na straně kamery). Při stanovení potřebné rychlosti připojení je vhodné odhadnout potřebný datový tok (počet současně připojených klientů × datový tok z kamery). S výpočtem datového toku nám může pomoci např. software pro návrhy kamerových systémů.

3. Omezený výkon IP kamery – výkonnost hardwaru IP kamery (výkon CPU, kapacita paměti RAM atp.) je ve srovnání s běžným HTTP serverem na bázi PC limitována. Z těchto důvodů prakticky všichni výrobci IP kamer omezují maximální počet připojených klientů ke kameře na cca 5-10 současných připojení. Budete-li používat pro zobrazení IP kamery metodu, která využívá jako server přímo IP kameru, může se Vám velmi lehce stát, že vyčerpáte počet připojení a někteří klienti již neuvidí obraz z IP kamery.

Dále, pokud se více klientů připojuje k jednomu streamu, může docházet k tomu, že s rostoucím počtem připojení klesá i snímková frekvence daného streamu. Z těchto důvodů důrazně doporučujeme zvážit, zda pro integraci do webových stránek budete používat stejný stream, který je využit pro záznam kamery v záznamovém zařízení (NVR).

4. Omezený výkon prohlížeče (myšleno zejména na mobilních platformách) – toto omezení se týká hlavně situací, kdy je třeba dekódovat video komprimované v H.264, případně provádět dekódování více streamů. Proto vždy pečlivě volte počet zobrazených kamer, jejich rozlišení, snímkovou frekvenci atd. s ohledem na hardware, na kterém poběží Vaše aplikace.

Autentizace

Přístup k velké části prostředků (resources, myšleno HTML stránky, JavaScript soubory, CGI skripty atp.) je chráněn proti neautorizovanému použití, pro přístup k těmto zdrojům je třeba nejprve provést autentizaci (ověření jménem / heslem).

Asi nejjednodušším způsobem (z pohledu JavaSciptu) je použití autentizační metody basic, kamery AVTECH podporují i autentizaci digest.

Webové rozhraní kamer AVTECH používá k ověření uživatele CGI skript /cgi-bin/nobody/VerifyCode.cgi?account=xxx&login=quick, kde:

- Parametr account je hodnota jméno:heslo, převedená do Base64 (tzn. stejný postup, jako u basic autentizace).

- Parametr login s hodnotou quick umožní ověření bez použití ověřovacího CAPTCHA kódu.

Pokud je ověření identity úspěšné, vrátí CGI skript v těle odpovědi hodnotu 0 OK (pozor, v odpovědích se nepoužívá stavových kódů HTTP, tzn. i neúspěšná odpověď má stavový kód 200). Po úspěšné autentizaci vrátí kamera pomocí cookie (jméno cookie = SSID), jejíž hodnotou je opět jméno:heslo kódované v Base64. Jelikož je tato cookie automaticky předávána v dalších požadavcích, není poté nutné další žádosti autorizovat.

V souvislosti s autentizací je třeba říci, jakým způsobem se chová volba Přístup anonymního náhledu v menu Obecné » Online. Tato volba nezpůsobuje to, že se není třeba vůbec přihlašovat – pokud na stránce s přihlašovacím formulářem zadáte neplatné / žádné jméno a heslo, potom je přihlášen uživatel se jménem anonymous, heslem anonymous a uživatelskou úrovní (právy) guest.

Poslední poznámka k tomuto tématu se týká použití URL ve formátu http://user:password@ipaddress:port/resource. Tento formát URL raději nepoužívejte – pokud pomineme otázku bezpečnosti, stále je tu problém v nekonzistentní podpoře tohoto formátu URL napříč prohlížeči (např. Internet Explorer neumožňuje ve standardním nastavení taková URL používat).

Same-origin policy

Jedním z problémů, na které můžeme při integraci IP kamer narazit, je omezení, které neumožňuje získat / spustit pomocí JavaScriptu některé typy prostředků, které se nacházejí na jiné doméně než naše stránky. Konkrétně se s tímto problémem setkáte např. při volání CGI skriptů pomocí ajaxových metod.

Způsobů, jak toto omezení obejít je více, v našich dalších ukázkách budeme používat reverzní proxy, která nám „injektuje“ prostředky kamery do naší domény. Dále si ulehčíme autentizaci – každý požadavek jdoucí skrze proxy bude používat autentizaci basic.

Ukázka použití proxy pomocí http serveru Apache 2.2:


ProxyRequests Off
<Location /kamera1/>
RequestHeader set Authorization "Basic YWRtaW46YWRtaW4="
ProxyPass http://192.168.1.30:88/
ProxyPassReverse http://192.168.1.30:88/
</Location>

Klientská řešení

Představíme si následující řešení:

1. Použití odkazů

2. Použití vložených rámů

3. Zobrazení statických obrázků

4. Použití MJPEG streamu

5. Použití ActiveX

6. Použití VLC

Použití odkazů

Asi nejjednodušší metodou je využití odkazů (elementu <a>), který bude odkazovat na webové rozhraní kamery. Tato metoda má jen dvě drobné vady. Za prvé: Neumožňuje přímé zobrazení obrazu / videa v požadované stránce. A za druhé: Neumožňuje přímé zobrazení obrazu / videa v požadované stránce. Teoreticky jde o jednu vadu, ale považujeme ji za tak významnou, že jsme ji pro jistotu uvedli hned dvakrát.

Ukázka zdrojového kódu:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Použití odkazů
</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>
Použití odkazů
</h1>
<ul>
<li>
<a href="http://81.0.223.218:88">
Odkaz na kameru
</a>
<p>
Webové rozhraní kamery se otevře ve stejném okně jako tento text, pro přihlášení musíte zadat jméno <strong>guest</strong> a heslo <strong>guest</strong>.
</p>
</li>
<li>
<a href="http://81.0.223.218:88" target="_blank">
Odkaz na kameru v novém okně
</a>
<p>
Webové rozhraní kamery se otevře v novém okně či záložce, pro přihlášení musíte zadat jméno <strong>guest</strong> a heslo <strong>guest</strong>.
</p>
</li>
</ul>
</body>
</html>

Klady a zápory:

+Velmi snadné a jednoduché řešení

Neumožňuje přímé zobrazení v požadované stránce

Omezený počet připojení ke kameře

Metoda zobrazení (ActiveX prvek atp.) je závislá na výrobci kamery a nelze ji změnit

Nelze získat pouze obraz z kamery – zobrazí se celá stránka tak, jak je navržena výrobcem

Použití vložených rámů

Při této metodě se používá inline rámů alias elementu <iframe>, hlavním rozdílem oproti předchozí metodě je to, že lze dosáhnout přímého zobrazení obrazu / videa z kamery v požadované stránce.

Ukázka zdrojového kódu:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Použití vložených rámů
</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>
Použití vložených rámů
</h1>
<iframe width="1024" height="768" src="http://192.168.1.103:88"></iframe>
</body>
</html>

Klady a zápory:

+Velmi snadné řešení

Omezený počet připojení ke kameře

Metoda zobrazení (ActiveX prvek atp.) je závislá na výrobci kamery a nelze ji změnit

Nelze získat pouze obraz z kamery – zobrazí se celá stránka tak, jak je navržena výrobcem

Získání statického obrazu z kamery

Jednou z nejuniverzálnějších metod je zobrazení nikoliv videa, ale statického obrazu, protože element <img> je velmi dobře podporován prakticky v každém grafickém browseru.

Existuje několik variant tohoto řešení:

a) Kód na straně klienta žádá kameru o získání obrazu

b) Kamera sama odesílá obraz na server (FTP)

c) Kód na straně webového serveru žádá kameru o získání obrazu

V následujících ukázkách budeme využívat CGI skiptu /cgi-bin/guest/Video.cgi?media=x&resolution=y, který nám vrátí aktuální snímek ve formátu JPEG, resp. stream komprimovaný metodou MJPEG, a kde parametry mediaresolution mají následující možnosti:

Parametr Význam
Media

Volba formátu souboru:

- JPEG (odpovědí bude snímek ve formátu JPEG)

- MJPEG (odpovědí bude stream komprimovaný metodou MJPEG)

- H264 (odpovědí bude video stream, komprimovaný kompresí H264)

Resolution

Rozlišení snímku / videa:

- QQVGA (rozlišení 160×120 px)

- QVGA (rozlišení 320×240 px)

- VGA (rozlišení 640×480 px)

- HD720P / SXGA (rozlišení 1280×720 px)

- HD1080P / 1080p (rozlišení 1920×1080 px)

Ukázka zdrojového kódu:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Použití obrázků 1
</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>
Použití obrázků 1
</h1>
<img width="640" height="480" src="/kamera1/cgi-bin/guest/Video.cgi?media=JPEG&resolution=VGA" />
</body>
</html>

Klady a zápory:

+Kompatibilita napříč prohlížeči

+Získáváme pouze obraz kamery, ne celé webové rozhraní

Nejedná se o video

Méně efektivní komprese

Omezený počet současně připojených klientů

Chceme-li obrázek alespoň trochu "rozpohybovat", můžeme jej opakovaně načítat pomocí JavaScriptu (resp. si řešení zjednodušíme pomocí jQuery). Pokud se podíváte do zdrojů stránek webového rozhraní kamery, zjistíte, že AVTECH používá velmi podobnou metodu pro zobrazení obrazu z kamery na mobilních prohlížečích:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Použití obrázků 2
</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>
Použití obrázků 2
</h1>
<div id="imagePlace">
<img width="640" height="480" src="/kamera1/cgi-bin/guest/Video.cgi?media=JPEG&resolution=VGA" />
</div>
<script src="/js/jquery.js"></script>
<script>
$(function(){
function loadImage(){
var image = new Image();
$(image).load(function(){
$(this).hide();
$('#imagePlace').empty().append(this);
$(this).show();
setTimeout(loadImage,100);
}).attr('src','/kamera1/cgi-bin/guest/Video.cgi?media=JPEG&resolution=VGA&_rnd=' + Math.random());
};
loadImage();
});
</script>
</body>
</html>

Klady a zápory:

+Kompatibilita napříč prohlížeči

+Získáváme pouze obraz kamery, ne celé webové rozhraní

Méně efektivní komprese

Omezený počet současně připojených klientů

Získání MJPEG streamu z kamery

Řešení, které je velmi podobné předchozímu s jediným rozdílem - získáváme video s kompresí MJPEG, nikoliv statický obraz.

Video komprimované MJPEG je možné zobrazit pomocí tagu <img> (nebo <canvas>, raritní je využití atributu poster tagu <video>). Lze dosáhnout vyšší snímkové frekvence než u předchozího příkladu. Stinnou stránkou tohoto řešení je slabší podpora napříč prohlížeči (zobrazení videa nefunguje namátkou v Internet Exploreru a ve výchozím prohlížeči na platformě Android).

Ukázka zdrojového kódu:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Použití MJPEG
</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>
Použití MJPEG
</h1>
<img width="640" height="480" src="/kamera1/cgi-bin/guest/Video.cgi?media=MJPEG&resolution=VGA" />
</body>
</html>

Klady a zápory:

+Získáváme pouze obraz kamery, ne celé webové rozhraní

+Jedná se o video, ne statický obraz

MJPEG není podporován na všech platformách / prohlížečích

Méně efektivní komprese

Omezený počet současně připojených klientů

Poznámka:

- Chcete-li i Internet Explorer "naučit" zobrazovat MJPEG streamy, můžete využít Java applet Cambozola.

Využití ActiveX prvku

Řešení, které pro zobrazení využívá ActiveX prvek výrobce kamery, do stránky jej vložíme jako element <object>.

Ukázka zdrojového kódu:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Použití ActiveX
</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>
Použití ActiveX
</h1>
<object id="camera" type="application/x-oleobject" width="640" height="480" classid="CLSID:53049A9A-1122-4673-B8D4-12F545AE3285" codebase="./AVC_AX_764.cab#version=1,1,2,9">
<param name="_IPAddress" value="192.168.1.30">
<param name="_Port" value="88">
<param name="Resolution" value="VGA">
<param name="Username" value="admin">
<param name="Password" value="admin">
<param name="MediaType" value="H264">
<param name="ConnectMode" value="TCP">
<param name="Action" value="Login">
</object>
</body>
</html>

Povšimněte si hodnoty atributu codebase – je v ní odkaz na instalační archiv (.CAB) s activeX prvkem a jeho příslušná verze. To uživateli umožní activeX prvek snadno nainstalovat pomocí "vyskakovacího pruhu" v Internet Exploreru. Příslušný .CAB soubor si můžete stáhnout z kamery a následně jej umístit do požadované složky na serveru.

Vlastnosti (properties) lze nastavit pomocí tagu <param name="JmenoVlastnosti" value="Hodnota vlastnosti"> nebo JavaScriptem, např.:

...
<script>
...
var camera = dokument.getElementById('camera');
camera.MediaType = 'JPEG';
console.log('MediaType má nyní hodnotu',camera.MediaType);
...
</script>

Přehled důležitých vlastností:

Vlastnost Popis
_IPAddress Určuje IP adresu (ne DNS jméno) kamery.
_Port Určuje HTTP port kamery
MediaType

JPEG - pro připojení se použije RTSP stream, komprimace MJPEG

MJPEG - pro připojení se použije RTSP stream s kompresí MPEG4

H264 - pro připojení se použije RTSP stream, komprimovaný H264

ConnectMode

UDP - klasické RTSP připojení (RTSP=TCP, RTP=UDP)

TCP - pro RTSP spojení se použije prokládání RTSP / RTP

HTTP - pro RTSP spojení se použije tunelování přes http

Username Uživatelské jméno pro autentizaci
Password Heslo pro autentizaci
Action Akce, která se automaticky provede po inicializaci ActiveX prvku - výchozí hodnotou je Login (připojení ke kameře)

Windowed ActiveX control

ActiveX prvek pro kamery AVTECH je navržen jako Windowed ActiveX Control. Chcete-li se dozvědět bližší informace o rozdílu mezi windowed a windowless prvky, přečtěte si prosím např. tyto informace.

Důsledkem použití tohoto typu prvků je skutečnost, že jsou vykreslovány nad "normálními" prvky stránky. Způsoby, jak lze toto omezení obejít najdete např. zde.

Klady a zápory:

+Poskytuje video, ne statický obraz

+Efektivní využití šířky pásma

+Získání audio streamu

Pouze pro Internet Explorer

Omezený počet připojení ke kameře

Možné problémy s překrýváním prvků stránky (Windowed ActiveX control)

Využití VLC media playeru

Řešení, kdy se pro zobrazení videa používá univerzální RTSP klient – VLC media player. Alternativně lze použít QuickTime, VLC však v současné době nabízí více možností. Popis aplikačního rozhraní VLC najdete zde.

Ukázka zdrojového kódu:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Použití VLC
</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>
Použití VLC
</h1>
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="640" height="480" id="vlc" events="true">
<param name="src" value="rtsp://192.168.5.200:554/live/h264/720P?authbasic=YWRtaW46YWRtaW4=">
<param name="autoplay" value="true">
<param name="toolbar" value="false">
<embed pluginspage="http://www.videolan.org" type="application/x-vlc-plugin" progid="VideoLAN.VLCPlugin.2" width="640" height="480" autoplay="yes" toolbar="no" target="rtsp://192.168.5.200:554/live/h264/720P?authbasic=YWRtaW46YWRtaW4=" name="vlc">
</embed">
</object>
</body>
</html>

Klady a zápory:

+Poskytuje video, ne statický obraz

+Možnost získání audio streamu

+Efektivní využití šířky pásma

+Lze použít s širší škálou prohlížečů (ActiveX rozhraní, NP API)

+Lze použít i pro jiné výrobce než AVTECH

+VLC podporuje od verze 2.0.6 i windowless režim

Je vyžadována instalace dodatečného softwaru

Omezený počet připojení