Aktualisiert am: 11.10.2022, geschrieben von Marco
Artikel Bild
Bild
WLAN-Kamera Video auf einer Webseite anzeigen

Es kommt öfter die Frage auf, wie das Videobild einer Überwachungskamera auf einer Webseite angezeigt werden kann. In diesem Artikel zeige ich dir deine Möglichkeiten auf.

Info: Bitte beachte, dass du dich hierfür einigermaßen mit HTML auskennen solltest. Du solltest wissen, wie HTML oder Javascript Dateien angelegt werden und wie diese auf einen Server kopiert werden.
Zum Inhaltsverzeichnis springen

Voraussetzungen

Die Überwachungskamera muss einen Videostream zur Verfügung stellen. Bei Überwachungskameras ist das ein sogenannter RTSP-Stream. Es ist außerdem nicht möglich, einen RTSP-Stream direkt im Browser mit einem <video> Tag einzubetten. Du benötigst Scripte oder Dienste, die den RTSP-Stream in ein passendes Videoformat umwandeln.

Zum Inhaltsverzeichnis springen

Möglichkeiten den Videostream in deine Webseite einzubinden

Es gibt verschiedene Möglichkeiten, das Videobild einer Überwachungskamera in einer Webseite einzubauen. Dies sind z. B. Videoplayer, Embed Scripte oder kommerzielle Programme.

Zum Inhaltsverzeichnis springen

Externe Dienste (einfach)

Mittlerweile gibt es einige externe Dienste, die auch teilweise eine kostenlose Demoversion erlauben

Zum Inhaltsverzeichnis springen

Über OBS-Studio und Youtube (einfach)

Es ist auch möglich, einen RTSP-Stream über OBS-Studio an Youtube zu senden und dann das Youtubevideo auf der Homepage einzubetten. Nachteil ist, dass OBS-Studio permanent irgendwo laufen muss. Einfach ist diese Lösung allerdings.

Dazu habe ich einen separaten Artikel verfasst: Überwachungskameravideo per OBS-Studio in Youtube anzeigen.

Zum Inhaltsverzeichnis springen

RTSP-Stream per VLC-Plugin (veraltet)

Info: Diese Methode war einfach, ist aber veraltet und funktioniert in den meisten Internetbrowsern nicht mehr. Moderne Browser blockieren das Plugin nämlich!

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

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

Zum Inhaltsverzeichnis springen

HTML5 Videotag

Der HTML5 Videotag unterstützt keine RTSP-Streams. Wir können den RTSP-Stream aber mit VLC umwandelt und diesen dann einbetten.

  • Medien->Netzwerkstream öffnen
  • RTSP-Adresse eingeben
  • Wiedergabe->Stream
  • Als Ziel nehmen wir HTTP, hinzufügen, Pfad festlegen "/deinpfad"
  • Konvertieren, wähle OGG,
  • Weiter

Jetzt kann der die Adresse in einem HTML5 Videotag in eine Seite eingebettet werden. Der Nachteil ist, dass VLC kontinuierlich laufen muss!

Zum Inhaltsverzeichnis springen

Eigenes Setup (Experten)

Hier wird es kompliziert, da du ein Script benötigst, um den Stream umzuwandeln. Hier der Link, das ist aber nur etwas für Leute, die sich gut mit js und html auskennen.

https://github.com/Streamedian/html5_rtsp_player

Zum Inhaltsverzeichnis springen

Anleitung für INSTAR Kameras (mittel)

Wer eine Instar Überwachungskamera hat, der profitiert von der Dokumentation und den Vorlagen von Instar.

Kategorie:

Über mich

Bild
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 du darüber etwas kaufst, so erhält diese Seite eine kleine Werbevergütung. Der Endpreis ändert sich dabei nicht!

Weitere Infos über mich und wie ihr das Projekt unterstützen könnt.

Benutzerbild
Gespeichert von Ralfi (nicht überprüft) am Di., 16.03.2021 - 16:06 Permalink

Die Anzahl der Webseiten-Besucher, die gleichzeitig diesen eingebetteten Stream sehen können auf der Webseite ist aber dann sehr begrenzt mit dem oben beschriebenen Verfahren, und hängt von der Kamera ab.
Bei INSTAR Kameras z.B. können nur 3 Websiten Besucher gleichzeitig diesen Stream sehen.
Jeder Webseitenbesucher ist wie ein weiterer User, der sich auf die Kamera einloggt -> und das (gleichzeitig eingeloggte User) ist in den Kameras stark begrenzt (aus Sicherheitsgründen)