Implementace obrazu do webových stránek

[ Typ návodu: ]


Potřebujete dostat aktuální obraz z IP kamery do webových stránek?

Asi nejuniverzálnější způsob implementace do webu je nechat IP kameru posílat obrázek přímo na ftp server, kde se nachází web a poté pomocí jednoduchého skriptu tento obrázek obnovovat (viz I. varianta)

I. varianta
Než cokoli začneme dělat, je potřeba nastavit kameru tak, aby nám posílala obrázek na server, kde jsou umístěny webové stránky.

1) na Vašem ftp serveru vytvořte novou složku (např. "kamera"), poté si zaveďte nového uživatele (např. wonderex), který bude mít přístup pravě do této složky s možností zapisování

2) vstupte do webového rozhraní IP kamery a jděte do: Konfigurace --> Pokročilá konfigurace --> Síť --> "záložka" FTP a vše řádně vyplňte (viz obrázek níže)
pozn.: Adresa serveru, Port, Uživ. jméno, Heslo - nastavte dle přístupu na Váš server, zbytek vyplňte dle obrázku (Image File Name - můžete vymyslet libovolný název)implementace_obrazu_01.jpg

 

 

 

 

3) nastavte interval nahrávání na ftp server:
Konfigurace --> Pokročilá konfigurace --> Ukládání, zaškrtnout Povolit časování snímku a nastavit ostatní parametry viz obrázek níže
implementace_obrazu_02.jpg

4) do Vaší požadované stránky (např. kamera.php) vložte tento skript:

<!-- vložení obrázku do stránek --> 
<img src='cesta_kde_je_uložen_obrázek' id="reloader" width="352px" height="288px" onload="setTimeout('document.getElementById(\'reloader\').src=\'
cesta_kde_je_uložen_obrázek?\'+new Date().getMilliseconds()', 3000)"<!-- interval obnovení je nastaven na dobu 3000ms = 3s --> 

 

5) zapněte libovolný webový prohlížeč a jděte na stránku, kam jste vložili tento kód a obrázek by se měl automaticky obnovovat.

Takto jsme si jednoduše ukázali jak vložit obrázek do webových stránek. Tato implementace má obrovskou výhodu v tom, že se obraz zobrazí ve všech webových prohlížečích a pro kameru není nutné zřizovat pevnou IP adresu.

--- UKÁZKA ---

II. varianta
Vyčtení obrazu pomocí příkazu přímo z kamery bez využití ftp serveru.

Tato metoda není nějak výhodná neboť je potřeba u IP kamery zřídit pevnou veřejnou adresu a zároveň není možné zobrazit obrázek ve webovém prohlížeči Internet Explorer, v ostatních prohlížečích není problém.

Pokud tedy máte zajištěnou veřejnou adresu pro IP kameru tak Vám pouze stačí vložit tento skript do Vámi požadovné stránky (řetězec CESTA nahraďte požadovaným zápisem - viz níže pod přkladem).

<!-- vložení obrázku do stránek --> 
<img src='
CESTA' id="reloader" width="352px" height="288px" onload="
setTimeout('document.getElementById(\'reloader\').src=\'
CESTA?\'+new Date().getMilliseconds()', 3000)" >
<!-- interval obnovení je nastaven na dobu 3000ms = 3s -->

 

Pro IP kameru nahraďte řetězec CESTA následovně: http://jméno:heslo@IPadresa/Streaming/channels/101/picture.
Pro DVR/NVR/HVR nahraďte řetězec CESTA následovně: http://jméno:heslo@IPadresa/ISAPI/Streaming/channels/101/picture.
pozn.: V zápisu pro DVR/NVR/HVR kameru č. 1 zobrazíte pomocí člísla 101, kameru č. 2 pomocí člísla 201, ... , kameru č. 16 pomocí čísla 1601, ...

III. varianta
Implementace živého videa (nikoli obnovování statického obrázku) do webu.

Tato varianta je také možná, ale není moc praktická. Pokud tedy budete chtít vidět živý video obraz budete nuceni na každém počítači nainstalovat VLC player (konkrétně se bude jednat o VLC plugin do webových prohlížečů) - viz návod Jak vyčíst video obraz - RTSP stream


[ Napsal: Tomáš Horský  |  Úterý 10. Červen 2014 | 11:43 ]

Nepřehlédněte