WLAN-Kamera Video auf einer Webseite/Homepage anzeigen

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.
 

Tags: 

Kategorie: 

Empfehlung

Die HiKam S5 im Test wide
Megatest

Die HiKam S5 im Test - preiswerte Überwachungskamera mit WLAN

Produkt Test
Sehr preiswerte und einfach einzurichtende Überwachungskamera mit WLAN und Nachtsicht. ...weiterlesen

WLAN Kamera Top 10