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.
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.
Externe Dienste (einfach)
Mittlerweile gibt es einige externe Dienste, die auch teilweise eine kostenlose Demoversion erlauben
Ü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.
RTSP-Stream per VLC-Plugin (veraltet)
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="https://downloads.videolan.org/pub/"
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
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!
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
Anleitung für INSTAR Kameras (mittel)
Wer eine Instar Überwachungskamera hat, der profitiert von der Dokumentation und den Vorlagen von Instar.
- Anleitung für lätere Modelle: https://wiki.instar.com/de/Erweitert/Webseiten_Einbindung/HD_Kamera_Einbindung/
- Für Instar Full HD Kameras: https://wiki.instar.com/de/Erweitert/Webseiten_Einbindung/HTML5_Stream_Full_HD_Cameras/
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)