Projekt-Tagebuch
Was als Einbindung einer Kamera begann, entwickelte sich Schritt für Schritt zu einer eigenen Wildlife-Webseite mit zwei Livekameras, Videoarchiv, HTTPS-Zugriff, Loxone-Integration und einer technisch optimierten Streaming-Lösung auf der Synology.
Bildrechte: Für die Website werden eigene Kameraaufnahmen und eigens erstellte Symbolgrafiken verwendet. Fremde Produktfotos mit ungeklärten Nutzungsrechten werden nicht öffentlich eingebunden.
Ausgangspunkt war eine VIM TAG Kamera am Igelhaus. Das Ziel war, das Kamerabild nicht nur über die Hersteller-App, sondern im eigenen Netzwerk und später auch in anderen Systemen verwenden zu können.
Über ONVIF wurde der Kamerastream gefunden. Dabei zeigte sich eine Besonderheit: Die direkte RTSP-Adresse der Kamera enthielt einen dynamischen Teil und konnte sich nach einem Neustart ändern. Eine fest eingetragene RTSP-URL war deshalb keine dauerhaft zuverlässige Lösung.
Auf der Synology wurde über Container Manager go2rtc eingerichtet. Statt die wechselnde RTSP-Adresse fest einzutragen, fragt go2rtc die Kamera über ONVIF ab und stellt daraus einen stabilen lokalen Stream bereit.
Damit entstand für die weitere Integration eine feste Adresse auf dem NAS, während Änderungen an der internen Kamera-URL von go2rtc abgefangen werden.
Der von go2rtc bereitgestellte RTSP-Stream wurde anschließend in Synology Surveillance Station eingebunden. Nach einem Neustart der Kamera blieb die Verbindung bestehen – der wichtige Nachweis, dass die dynamische RTSP-Adresse nun kein Problem mehr darstellte.
Für die Loxone-Integration wurde zusätzlich ein MJPEG-Ausgang benötigt. go2rtc erzeugt dafür aus dem Kamerastream einen separaten MJPEG-Stream. So kann dieselbe Kamera sowohl für RTSP/H.264 als auch für Systeme verwendet werden, die einen MJPEG-Endpunkt erwarten.
Danach kam eine zweite VIM TAG Kamera hinzu. Sie wurde im Igelhaus positioniert und ergänzt die Außenansicht um den Innen- und Eingangsbereich. Zunächst war ONVIF auf dieser Kamera deaktiviert; nach dem Aktivieren konnte auch sie zuverlässig über go2rtc eingebunden werden.
Seitdem gibt es zwei Perspektiven: Igelhaus Außen für Haus, Eingang, Futter- und Wasserstelle und Igelhaus Innen für den geschützten Innenbereich.
Für die Kameras entstand anschließend eine eigene Website. Ein nginx-Container auf der Synology liefert die HTML-Dateien aus. Aus einer einfachen Kameraansicht entwickelte sich nach und nach die heutige Seite BöRu-Wildlife.
Die Oberfläche wurde bewusst heller und freundlicher gestaltet. Dazu kamen eine responsive Navigation, eine Startseite, Liveansicht, Videoarchiv, Projektseite, Impressum und Datenschutz.
Für den externen Zugriff wurde auf der Synology ein Reverse Proxy eingerichtet. Die Domain wildlife.harald-boehm.at zeigt auf den Webserver im Container. Ein eigenes Let's-Encrypt-Zertifikat ermöglicht den verschlüsselten Zugriff per HTTPS.
Zusätzlich wurde eine Weiterleitung von HTTP auf HTTPS eingerichtet. Die Kameras und go2rtc selbst bleiben dabei im lokalen Netzwerk; nach außen wird nur die benötigte Weboberfläche veröffentlicht.
Für Loxone wurden sprechende externe Kamera-Adressen mit .mjpg-Endung ergänzt. nginx nimmt diese URL entgegen und reicht sie intern an den passenden go2rtc-MJPEG-Stream weiter. Damit funktioniert die Liveansicht auch über den externen HTTPS-Zugang in Loxone.
Ein eigener Videoordner auf der Synology wurde in nginx eingebunden. Ausgewählte MP4-Aufnahmen können dadurch auf der Website im Videoarchiv angezeigt werden. Neue Dateien im vorgesehenen Ordner stehen der Website zur Verfügung, ohne dass für jedes Video eine komplett neue Seite gebaut werden muss.
Die ersten Webversionen verwendeten MJPEG auch für die Browser-Liveansicht. Das funktionierte grundsätzlich, verursachte aber hohe CPU-Last auf dem NAS und verhielt sich je nach Browser sehr unterschiedlich. Besonders Safari und Chrome auf dem iPhone zeigten die Streams teilweise erst nach langer Wartezeit oder gar nicht.
Auch Edge und Firefox verhielten sich nicht immer identisch. Dadurch wurde klar, dass für die Website eine browsergerechtere Streaming-Lösung nötig war.
Die Liveansicht wurde grundlegend optimiert. Statt für jeden Browser permanent MJPEG zu erzeugen, wird der vorhandene H.264-Stream möglichst direkt weitergereicht. Desktop-Browser nutzen bevorzugt MSE, während für Apple-Mobilgeräte HLS zur Verfügung steht.
Das Ergebnis war deutlich: Die Streams starten wesentlich schneller und die CPU-Auslastung des NAS sank von zeitweise nahezu 100 % auf ungefähr 10 % im beobachteten Betrieb. MJPEG bleibt nur dort erhalten, wo es tatsächlich benötigt wird – beispielsweise für Loxone.
Da ein Livestream trotzdem einen Moment zum Starten benötigen kann, erhielt die Oberfläche eine Ladeanzeige mit dem Text „Bitte warten, wird geladen...“. Falls ein Stream nicht verfügbar ist, kann ein neuer Verbindungsversuch gestartet werden.
Beide Kameras lassen sich einzeln groß anzeigen. Für die Vollbildansicht wurde außerdem eine gut sichtbare Zurück-Funktion ergänzt, damit die Bedienung auch auf Smartphones einfach bleibt.
Die Projektseite dokumentiert inzwischen nicht nur den Zweck des Igelhauses, sondern auch die technische Umsetzung. Tagesbilder zeigen die beiden Kameraperspektiven in Farbe; Nachtaufnahmen demonstrieren die Nachtsicht.
Zum Einsatz kommen zwei VIM TAG 2,5K Mini WLAN-Außenkameras. Die Streams werden per ONVIF/RTSP übernommen, zentral durch go2rtc verarbeitet und über Synology, nginx und HTTPS für die unterschiedlichen Anwendungen bereitgestellt.
Heute verbindet BöRu-Wildlife mehrere ursprünglich getrennte Komponenten zu einem System: zwei Kameras, go2rtc, Synology Surveillance Station, nginx, Synology Reverse Proxy, HTTPS, Loxone, Browser-Livestreams und ein MP4-Videoarchiv.
Auf der Startseite befinden sich Tages-Vorschaubilder beider Kameras. Die Live-Seite zeigt beide Streams gemeinsam oder einzeln, die Projektseite erklärt Aufbau und Technik – und dieser Blog hält nun fest, wie das Projekt Schritt für Schritt entstanden ist.
Die Startseite zeigt nun automatisch den Status beider Kameras, die neueste veröffentlichte Aufnahme sowie die drei aktuellsten Videos aus dem Archiv. Zusätzlich kamen eine Tag-/Nacht-Erklärung, Informationen zum Igelhaus und ein Datenschutzhinweis für die Kamerabereiche hinzu.
Videos und besondere Aufnahmen lassen sich über die Teilen-Funktion des jeweiligen Geräts weitergeben. BöRu-Wildlife wurde außerdem als Progressive Web App erweitert: Auf unterstützten Geräten kann die Website zum Home-Bildschirm hinzugefügt und anschließend wie eine App gestartet werden. Livebilder und Videos bleiben bewusst Online-Inhalte und werden nicht offline gespeichert.
Technischer Weg
Parallel dazu versorgt go2rtc Surveillance Station und die MJPEG-Schnittstelle für Loxone. Damit wird der vorhandene Kamerastream je nach Zielsystem in der jeweils passenden Form genutzt.