Artikel Bild
Bild
WLAN-Kamera Video auf einer Webseite anzeigen

Es kommt öfter die Frage auf, wie das Video/Stream einer WLAN-Kamera auf einer Homepage bzw. Webseite angezeigt werden kann. In diesem Artikel möchte ich auf dieses Problem eingehen und mögliche Lösungen aufzeigen. Ich werde das ganze so einfach wie möglich erklären, jedoch bedarf es Grundwissen über HTML, FTP und JS.

Dieser Artikel ist nicht vollständig und befindet sich in stetiger Erweiterung. Wenn ich Neues entdecke füge ich diese Informationen hier hinzu.

 
Info: Bitte beachten Sie jedoch, dass Sie sich hierfür einigermaßen mit HTML auskennen sollten. D.h. Sie sollten wissen wie HTML/Javascript Dateien angelegt werden und wie diese auf einen Server kopiert werden.

Generelle Vorraussetzung

Die WLAN-Kamera muss einen Stream zur Verfügung stellen und der Zugriff darf z.B. nicht auf den Lokalhost beschränkt sein. Auch eine Firewall/NAT darf nicht blockieren. Ein oft verwendetes Streaming-Protokoll bei WLAN-Kameras ist z.B RTSP (https://de.wikipedia.org/wiki/Real-Time_Streaming_Protocol).

Zugriff per Gästebenutzer

 

Wenn die Kamera über einen Gästezugang verfügt kann der Zugang auf die Kamera folgendermaßen gewährt werden: http://benutzer:passwort@ip

Beispiel: http://guest:gagapasswort@192.168.1.246

Möglichkeiten

Es gibt diverse Möglichkeiten das Videobild einer WLAN-Kamera in einem Webseite einzubauen. Dies sind z.B. Videoplayer, Embed Scripte oder kommerzielle Programme.

Info: Einige Browser, Plugins oder Benutzereinstellungen können das Laden des Videos blockieren.

RTSP Stream

Der RTSP Stream wird über einen Player wie VLC, Quicktime oder VLC in der Webseite geladen. Eine RTSP Adresse sieht beispielsweise so aus:

rtsp://admin:DEINPASSWORT@192.168.0.104:554/12

Beispiel Embed Code (Bitte nicht einfach irgendwohin kopieren) für einen RTSP-Stream mit VLC:

<OBJECT classid="clsid:9BE31822-FDAD-5321-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://ipaddress" />

   <param name="ShowDisplay" value="True" />

   <param name="AutoLoop" value="False" />

   <param name="AutoPlay" value="True" />

   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"

     target="rtsp://cameraipaddress" ></embed>

</OBJECT>

Dokumentation VLC, Englisch: https://wiki.videolan.org/Documentation:WebPlugin

Anleitung für INSTAR Kameras

Die Firma Instar hat auf Ihrer Supportseite direkt eine Anleitung: http://www.instar.de/faq_web_integration_hd

H264

Die Integration erfolgt hier über ein ActiveX -Plugin, welches der Besucher herunterladen muss.

MJPEG

Hier ist kein extra Plugin nötig, denn dieses Format funktioniert in allen modernen Browsern.

 

 

Weitere Infos

https://github.com/Streamedian/html5_rtsp_player/wiki/HTML5-RTSP-Player

Webseite Stream Homepage
Kategorie:

Über mich

Bild
Hallo

Hallo, ich bin Marco und ich teste seit Jahren Überwachungskameras und schreibe die Artikel auf dieser Seite. Links zu Onlineshops sind sogenannte Affiliatelinks und wenn ihr darüber etwas kauft, so erhält diese Seite eine kleine Werbevergütung. Für euch ändert das am Endpreis nichts.

Infos über die Redaktion und wie ihr das Projekt unterstützen könnt.

Neuste Testberichte

Produkt Test Bosch Eyes
5
Bosch Eyes Überwachungskamera im Test - Außenkamera mit Licht

Die Bosch Eyes ist ein Konkurrenzmodell zur Netatmo Presence. Mein Test der Bosch Eyes.

Produkt Test Victure-PC420-wide
5
Victure PC420 im Test - Sehr preiswertes 4er Überwachungskameraset

Ein sehr preiswertes 4er Überwachungskamera-Set im Test. Es handelt sich dabei um das Paket VICTURE PC420.

Produkt Test Reolink Argus Eco 1
6
Reolink Argus ECO - Außenkamera mit Solarzelle

Ein weiteres Modell von Reolink mit Solarzelle. Überwachungskamera für den Außenbereich.

Die Redaktion

Bild
Wer schreibt hier?

Hallo lieber Besucher. Mein Name ist Marco und ich betreibe diese Seite. Ich führe die Testberichte durch und schreibe die Artikel. Hier findest du weitere Infos über mich und wie ihr das Projekt unterstützen könnt. Ich bedanke mich.

Empfehlungen

Produkt Test INSTAR 8015 wide
6
Die INSTAR 8015 FullHD im Test - Sehr gute Überwachungskamera mit SD-Karte, Cloud, LAN, WLAN

Heute teste ich ein weiteres Flaggschiff von INSTAR mit sehr vielen Funktionen und Motorsteuerung. Die IN-8015 FullHD. Es gibt auch eine PoE-Version dieser Kamera. 

weiterlesen

Bestseller