Webseite mit Webcam ausstatten

In meiner Freizeit, wenn ich nicht gerade arbeite oder fliegen, beschäftige ich mich gerne mit Technik Themen. Hierbei liegen die Schwerpunkte mittlerweile auf Smarthome, Raspberry, Arduino und ganz rudimentäres programmieren bzw. Skripten. Aktuell habe ich mich in den Wintermonaten mit folgender Fragestellung beschäftigt und innerhalb weniger Stunden / Tage eine praktikable Lösung gefunden. Weil ich Euch daran teilhaben lassen möchte, und damit ich in einem Jahr noch weiß was ich zusammengestellt habe – Folgt hier eine kurze Zusammenfassung.

Fragestellung:

Wie kann ich ein Bild aus einem RTSP-Stream auf meiner Webseite einbinden?

Antwort:

Mit der ffmpeg Bibliothek, einem Webserver und einem Raspberry.

Zu einfach. Ja, aber der Teufel steckt wie immer im Detail. Es geht zum Beispiel nicht nur um eine einzelne Webcam. Zudem möchte ich ein paar Details auf dem Bild ausgegeben wissen (z.B. Datum Uhrzeit, Logo als PNG). Außerdem möchte ich dieses Projekt gerne mit meiner Synology lösen, weil ich nicht noch einen weiteren Raspberry bereiben möchte. Daher hier alles Details Schritt für Schritt:

Schritt 1) Installation von Raspberry OS auf der Synology mit DSM 7.0

Schaut gerne hierzu in den Beitrag, den ich nachfolgend veröffentlichen werden.

Schritt 2) Einrichtung des Raspberrys, Installation des Webservers

Ein wenig im Detail habe ich die Installation bereits vor ein paar Jahren aufgeführt. Hier die Kurzfassung und als Ergänzung dazu neue Inhalte, die ich für diese Fragestellung benötigt habe.

Wenn der Raspberry Pi sich mit der Fehlermeldung “Repository ‘http://raspbian.raspberrypi.org/raspbian buster InRelease’ changed its ‘Suite’ value from ‘testing’ to ‘stable’” meldet, hilft dieses einfache Update: Da Raspbian Buster jetzt offiziell als “stable” Version verfügbar ist, muss man dies kurz bestätigen. Quelle: computerhilfen.de

sudo apt update -y

Nachdem alle Updates installiert sind und auch der Apache Server läuft, müssen noch die Berechtigungen auf dem relevanten Verzeichnis eingerichtet werden. Hierzu sind folgende Befehle notwendig. Quelle: informatics4kids.de

#Verzeichnis Besitzer ändern:
sudo chown www-data:www-data /var/www/html

#Verzeichnis Berechtigungen ändern:
sudo chmod 775 /var/www/html

#Benutzer der Gruppe zuordnen:
sudo usermod -a -G www-data pi

#Reboot des Systems:
sudo reboot

#Verbindung über Mac Terminal per SSH.
ssh User@Adresse

#FTP Zugriff auf Raspberry
#Über die SSH Schnittstelle kann auch per FTP Zugegriffen werden.

Damit der Raspberry im eigenen Netzwerk auch die gleiche IP Adresse bekommt ist eine Feste IP Adresse ratsam. Hierbei kann entweder am Gerät selber die IP Adresse hinterlegt werden, oder im Router wird dem Gerät immer eine feste IP Adresse zugewiesen. Ich persönlich favorisiere letzteres! Damit die neue IP Adresse auch am Raspberry ankommt (Ohne Neustart!) kann der folgende Befehl verwendet werden.

sudo dhclient -v

Schritt 3) ffmpeg-Installation und erster Test

Um ganz schnell mit der Lösung des Problems zu beginnen muss nur noch ffmpeg installiert werden. Hierzu habe ich ein kurzes Tutorial verwendet, dem ich nichts hinzuzufügen habe. Für den Test können neben den angegebenen Werten auch der eigene RTSP Stream verwendet werden. 

#Update Raspberry
sudo apt update

#Installation ffmpeg
sudo apt install -y ffmpeg

#Versionsprüfung
ffmpeg -version

#Download File für Test:
wget -O test.mp4 https://raw.githubusercontent.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4

#Test vom ffmpeg:
ffmpeg -i test.mp4 out.mkv

#ffmpeg entfernen:
sudo apt purge --autoremove -y ffmpeg

Schritt 4) ffmpeg mit drawtext und Overall-Filtern

Das Aufwendigste bei dieser Herausforderung ist zu wissen, was man möchte und wie man das mächtige Tool ffmpeg richtig einsetzen kann. Hierzu hab ich mich mehrer Stunden hinter den PC geklemmt und das Internet hoch und runtergelesen. Am Ende sind mehrere Befehle für den Raspberry entstanden, die ich sukzessive erstellt habe und auf meine Bedürfnisse anpassen konnte. Ziel ist es für mich einmal pro Minute (Minütlich!) den RTSP Stream aufzurufen und eine einzelne JPG-Datei auf einem Webserver abzulegen. Die zu erstellende Date soll ein paar Text-Elemente beinhalten (inkl. Datum und Zeitstempel) und alles soll mit einer PNG Grafik (z.B. Logo) professionel aufbereitet werden. Anbei meine kleinen Schritte, um zum gewünschten Ergebnis zu kommen.

#RTSP Stream jede Sekunde als JPG speichern.
#[RTSP Stream Link] = rtsp://User:Passwort@Link:Port/Verzeichnis
#Wichtig: Überschreibt bestehende Datei mit -y -update 1
ffmpeg -y -i [RTSP Stream Link] -update 1 -r 0.5 /var/www/html/[Webserver Verzeichnis]/bild.jpg

#RTSP Stream mit einem Text und Zeitstempel
#Mehrere Texte lassen sich mit KOMMA trennen und einbinden.
#Position des Text lässt sich mit x= : y= definieren.
#Hinter den Text kann mit box* eine Rahmen / Box angelegt werden.
ffmpeg -y -i [RTSP Stream Link] -vf "drawtext=fontsize=24:fontcolor=black:x=10:y=10:text='[Dein Text]',drawtext=fontsize=24:fontcolor=black:x=w-tw-10:y=10:text='%{localtime\:%F %T}'" -update 1 -r 1 /var/www/html/[Webserver Verzeichnis]/bild.jpg

#RTSP Stream mit Text, Zeitstempel und einem PNG Overlay
#Dient dazu, einen vollständige Box über die ganze Breite zu erstellen.
#Kann für die Einblendung von Werbung und/oder Logos genutzt werden.
#In diesem Beispiel alles in einem PNG File über Gimp erstellt.
ffmpeg -y -i [RTSP Stream Link] -i /var/www/html/Webcam/Frame.png -filter_complex "[0:v][1:v]overlay=0:0,drawtext=fontsize=24:fontcolor=black:x=10:y=10:text='[Dein Text A]',drawtext=fontsize=24:fontcolor=black:x=(w-text_w)/2:y=10:text='[Dein Text B]',drawtext=fontsize=24:fontcolor=black:x=w-tw-10:y=10:text='%{localtime\:%F %T}'" -update 1 -r 1 /var/www/html/[Webserver Verzeichnis]/bild.jpg

Hilfreich waren hierbei folgende Quellen: RTS Stream in Einzelbilder, Realtime Overlay, Timestamp Overlay, ffmpeg Befehle, Relative Position des ffmpeg Drawtext, Mehrere ffmpeg Drawtext, How to use ffmpeg

Schritt 5) bash-Skript und regelmäßiger Cron-Job

Es gibt verschiedene Parameter, damit die ffmpeg Befehle ausgeführt werden. Wenn man gerne das Skript per Hand anstarten möchten dann kann zum Beispiel das letzte Beispiel verwendet werden. Mit dem „-r 1“ wird alle paar Sekunden das Bild aus dem RTSP Stream neu abgerufen und abgelegt. Wenn man jedoch mehrere Webcam-Streams abrufen möchte empfiehlt es sich das JPG erstellen zulassen und den Prozess zu beenden. Hierfür ist aus dem „-r 1“ ein „-frames 1“ zu machen. Dieser werden dann in einer bash Datei eingefügt und via Crontab eingeplant.

Erstellen einer bash-Datei: Quelle: itslot.de, elektronik-kompendium.de, Fehlermeldung umleiten

#Navigiere zu dem Verzeichnis, wo das Skript liegen soll.
cd [Verzeichnis]

#Erstelle eine neue bash-Datei mit dem nano Editor:
nano [Skript Name].sh

#Inhalt in die Datei einfügen
#!/bin/bash

echo "Beginn des Skripts"
echo "Webcam 1 wird abgerufen"

ffmpeg -y -i [RTSP Stream Link] -i /var/www/html/Webcam/Frame.png -filter_complex "[0:v][1:v]overlay=0:0,drawtext=fontsize=24:fontcolor=black:x=10:y=10:text='[Dein Text A]',drawtext=fontsize=24:fontcolor=black:x=(w-text_w)/2:y=10:text='[Dein Text B]',drawtext=fontsize=24:fontcolor=black:x=w-tw-10:y=10:text='%{localtime\:%F %T}'" -update 1 -r 1 /var/www/html/[Webserver Verzeichnis]/bild.jpg

sleep 5

echo "Ende des Skripts"

Mit Strg-V lässt sich Inhalt aus der Zwischenablage einfügen.
Mit Strg-K lässt sich eine ganze Zeile löschen.
Mit Strg-O speichern
Mit Strg-X beenden.

#Datei ausführbar machen.
chmod -x [Skript Name].sh

#Jetzt lässt sich die Datei ausführen.
./[Skript Name].sh

#Wenn man keine Ausgabe haben möchte, wenn das Skript ausgeführt wird:
#Am Ende des Befehls folgendes ergänzen:
2> /dev/null

Mit den hier aufgeführten Befehlen lässt sich jetzt mit jedem Aufruf ein JPG erstellen. Mehrer Webcams einfach untereinander in die bash-Datei schreiben und ggfs die Links und Verzeichnisse anpassen. Ich empfehle, dass für jede Kamera ein eigenes Verzeichnis verwendet wird. Anschließend muss das kleine Programm eingeplant werden über einen Cronjob. Quellen: Crontab Guru, Restarting Crontab, Raspberry.com

#Öffnen des Cronjob Manager
sudo crontab -e

#Ergänze folgende Zeile (minütlich)
* * * * * [Verzeichnis]/[Skript Name].sh
Strg-O zum speichern.
Strg-X zum beenden.

#Ergänze folgende Zeile (5 Minuten Takt)
*/5 * * * * [Verzeichnis]/[Skript Name].sh
Strg-O zum speichern.
Strg-X zum beenden.

#Anzeigen 
sudo crontab -l

#Cronjob Manager Refresh
sudo service cron reload

Bei meinem aktuellen Stand der Umsetzung habe ich das Phänomen, dass die Bilder nicht immer zu 100% angezeigt werden. Am Ende eines Bildes ist häufig alles verwischt. Dies lässt sich auch im Protokoll nachvollziehen, da nicht alle Pakete vom RTSP Stream übertragen / empfangen werden konnten. Um dies zu lösen bin ich auf folgenden Beitrag aufmerksam geworden. Ich hoffe er hilft Euch auch!

Schritt 6) Kleine Webseite mit Dummy-Bild

Bei meinen Projekten verläuft es meistens so, dass ich klein anfange und mich von Phase zu Phase steigere. So habe ich z.B. für dieses Projekt noch einen FTP-Client eingebunden, der die aktuellen Bilder auf den FTP-Server meines Providers kopiert und meine Raspberry-Lösung nur im eigenen Netzwerk Anwendung findet. Das hat u.a. den Vorteil, dass bei einer Internet-Störung weiterhin das letzte aktualisierte Bild über den Provider aufrufbar ist. Aber kommen wir zum Abschluss dieses Beitrags.

Eine kleine Webseite zu erstellen ist mit einem HTML Grundgerüst mittlerweile sehr einfach geworden, gerade bei der Vielfalt an YouTube Tutorials oder auch Webseiten, die Step-by-Step die Schritte erklären. Darum gehe ich hier nicht weiter darauf ein, sondern berichte lediglich kurz, dass ich mit dem Codyhouse Framework gearbeitet habe. Hierbei handelt es sich um ein Projekt, welches komplexe Webseiten eigentständig per Copy and Paste erstellen lassen. Ein gewisses Grund-KnowHow sollte vorhanden sein, jedoch kann man auch mit einem gefährlichen Halbwissen in kurzer Zeit tolle Seiten zusammenstellen. So habe ich auch für mein Webcam Projekt die folgende Seite erstellt: webcam.vfl-südheide.de – Solltet ihr in der Zwischenzeit Fragen oder Anregungen haben, dann meldet Euch gerne bei mir oder schreibt einen Kommentar.

Nützliche Links:

Beitragbildquelle: www.ffmpeg.org

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert