markierten Links sind Affiliate-Links. Kaufst über die Links ein Produkt so erhalte ich eine Vergütung. Für dich ändert das am Endpreis absolut nichts!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 für dieses Problem, 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>
Veraltete Methode: Dokumentation VLC, Englisch: https://wiki.videolan.org/Documentation:WebPlugin
HTML5 Videotag mit VLC (Fortgeschritten)
Der HTML5 Videotag unterstützt keine RTSP-Streams, nur normale Videoformate. Wir können den RTSP-Stream aber mit VLC umwandelt.
Kurzfassung:
- 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 die RTSP-Adresse in einem HTML5-Videotag in deiner Webseite eingebettet werden. Der Nachteil ist, dass hierfür VLC kontinuierlich laufen muss!
Für diese Möglichkeit habe ich einen separaten und ausführlichen Artikel geschrieben, in dem ich dir ganz genau zeige, wie du das Videobild deiner Überwachungskamera mit VLC auf einer Webseite anzeigen kannst.
Eigenes Setup (Experten)
Hier wird es kompliziert, da du ein Script benötigst, um den Stream umzuwandeln. Diese Methode eignet sich nur für erfahrene Personen, die sich gut mit Javascript 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 ältere 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/
Benutzeranzahl begrenzt
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)