Webcam in Website einbinden

Der erste Teil war einfach.
Eine Webcam an die Wand dübeln und ein LAN-Kabel bzw. eine WLAN-Verbindung aufzubauen ist kein Problem. Interressant wird es die Bilder nun zyklisch auf seine Internetseite zu bringen.

Manche Kameras bieten einen zyklischen Upload über FTP an, manche nicht. Manche die diese Funktionalität bieten überschreiben immer die gleiche Datei, andere schreiben immer eine neue mit Zeitstempel im Dateinamen. Ein einheitliches Muster hat sich bei den von mir getesteten Webcams jedoch nicht ergeben und ständig einen Port vom Router per DynDNS auf die Kamera frei halten ist aus meiner Sicht aus Sicherheitsgründen keine Option.

Wie bekommt man nun regelmäßig eine Datei auf den Webspace??

Allen getesteten Webcams war eines gemeinsam, sie boten einen Zugang via Browser jederzeit ein aktuelles Bild im JPG-Format zu betrachten.
Der Zugang war immer ähnlich, bei meiner aktuellen beispielsweise:



http://192.168.178.35/snapshot/view0.jpg

Da ist es naheliegend einen solchen Schnappschuss einfach einzufangen und zu seinem Webserver zu senden … doch wer sollte dies tun? Die Kamera ist dafür leider in der Regel nicht geeignet, ein anderer Computer muss dies übernehmen. Dafür jedoch einen Rechenknecht 24 Stunden 7 Tage die Woche laufen zu lassen scheint dann doch etwas überzogen.
Daher kann es sich lohnen einmal zu schauen was denn sowieso permanent im Haushalt online ist. Bei mir war dies eine Synology Diskstation, ein kleiner Server der als Backupspeicher für verschiedene Handys Tablets etc. dient. Möglich wäre zwar auch zu diesem Zweck einen kleinen Raspberry Pi laufen zu lassen, dessen Stromverbrauch ebenfalls sehr gering ist, doch wenn der Server schon da ist, warum diesen nicht nutzen.
Sowohl auf dem Raspberry Pi als auch auf der Synology Diskstation läuft als Betriebssystem Linux.
Während auf dem Raspberry der Zugriff als Root, also auf die Basisfunktionen und System, möglich ist, ist dies bei dem NAS leider nicht so einfach der Fall. Dennoch ist er für die Aufgabe verwendbar, es ist nur etwas komplizierter.

Zunächst muss man sich auf der Diskstation als Administrator anmelden und verschiedene Funktionen aktivieren. Aber Schritt für Schritt.

Erst als Administrator einloggen / anmelden.

Dann klicken Sie auf [Paketzentrum]

Im Paketzentrum auf [Einstellungen], dann den Reiter [Paketquellen] und [Hinzufügen].

Als 'Namen' gebeben wir „community“ ein und als 'Ort':

http://packages.synocommunity.com

Nun stehen uns einige interessante zusätzliche Werkzeuge auf der Diskstation zur Verfügung.
Schließen wir nun das Fenster 'Einstellungen' und wechseln zurück zum Paket-Zentrum. Dort sollte nun linksseitig das Auswahlfeld 'Community' sichtbar sein. Falls nicht schließen Sie das Fenster 'Paketzentrum' und öffnen Sie es neu.
Sodann klicken wir auf [Community] und scrollen das Fenster bis der Eintrag

'ImageMagick' erscheint. Wenn Sie später ein Wasserzeichen in Ihr Webcambild einbauen möchten installieren Sie dieses Paket.

Dann weiter nach unten bis zum Eintrag 'Nano'. Dies ist ein Editor für die Linux Kommandozeile den ich persönlich bevorzuge und auch im weiteren Text hier verwende. Sie können aber auch mit dem Editor 'Vi' arbeiten, dann benötigen Sie dieses Paket nicht.

Das war es schon an benötigten Paketen, wir schließen das Paketzentrum.

Nun müssen wir noch einen Zugang zur Linux Kommandozeile des Servers bekommen.

Hierzu öffnen wir vom Hauptfenster aus die [Systemsteuerung].

Aktivieren Sie in der Systemsteuerung oben rechts [erweiterter Modus]. Diesen werden wir später nochmals benötigen, also diesen Schritt merken.

Wechseln Sie nun zu [Dateidienste] und anschließend zum Reiter [FTP]

Wir scrollen das Fenster nach unten und setzen ein Häkchen bei 'SFTP-Dienst aktivieren' und quittieren die Eingabe per Button [übernehmen].

Am Einfachsten nun das Fenster 'Systemsteuerung' schließen und neu öffnen.

Nun [Terminal & SNMP], dort am Einfachsten einen Haken bei 'Telnet-Dienst aktivieren' und bei 'SSH-Dienst aktivieren' setzen und die Eingabe wiederum [übernehmen].

Die grundlegenden Vorbereitungen sind nun gemacht, nun geht’s ans Eingemachte :)
Nun müssen wir ans Herz des Servers und ein paar Zeilen schreiben, hierfür benötigen wir einen Telnet-Client um auf den Server zuzugreifen auf unserem Rechner.
Ich verwende vorzugsweise PuTTY auf Windowscomputern. Das Programm läuft aber auch in einer Virtuellen Maschine, zum Beispiel in einer VirtualBox mit Windows auf einem Mac.
Das Programm PuTTY können wir unter: https://www.putty.org laden und ist kostenfrei.

Nachdem dieses Programm geladen und installiert ist starten wir es wiederum.

In dem sich öffnenden Fenster in dem Eingabefeld 'Host Name or IP address' geben wir am Einfachsten die IP unseres Synology Servers ein, als 'Port' die 23.

Anschließend per Button [Open] die Verbindung zum Server aufbauen.

In dem sich öffnenden Fensterchen wird der Login abgefragt, unter login: verwenden wir: admin

als passwort eben das passende Passwort für den admin-Zugang unserer DS.

Nun solle sowas wie

admin@DSName:~$ in dem Fenster erscheinen uns wir sind eingelogt

Zusnächst wechseln wir in das Hauptverzeichnis per Eingabe

cd / und bestätigen dies mit der Entertaste, wie auch alle nachfolgenden Befehle.

ls zeigt uns nun den Inhalt, da sollte auch 'volume1' dabei sein.

Ergo

cd volume1

wiederum ls und nachsehen ob es ein Verzeichnis 'web' gibt, falls ja können wir den kommenden Schritt überspringen und per cd web in diesen wechseln.

Falls nicht erstellen wir den Ordner per:

sudo mkdir web nun werden wir wiederum nach dem Passwort gefragt wie beim Login.
Nun machen wir das Verzeichnis noch ausführbar per
sudo chmod 777 web und ggf. wieder das Passwort eingeben. Und anschließend in das Verzeichnis wechseln cd web

Wir sind nun im Ordner /volume1/web unseres Servers angekommen und nun kommt die Magie :)
Wir schreiben ein Script das nun alles nötige veranlasst. Eins Script ist im Prinzip nichts Anderes als ob man die Befehle manuell per Tastatur nacheinander eingäbe und ausführen würde.

Doch Eins nach dem Andern, erstellen wir erstmal ein Script.

sudo nano image.sh

Nun öffnet sich nach Passworteingabe der Editor 'Nano' den wir vorausgehend installierten mit einem leeren Bildschirm. Wir können den grünen Cursor auf dem Bildschirm mit den Pfeiltasten der Tastatur nach oben, unten und seitlich wandern lassen.

Beginnen wir in der obersten Zeile mit der Anweisung, die das Script als Shellscript ausführbar kennzeichnet:

#!/bin/sh

Nun ergänzen wir darunter:

cd /volume1/web

Nun benötigen wir die Adresse der Webcam und deren Schnappschussbildes.

wget {Adresse der http-Bildadresse der Cam}

Beispiel: wget http://192.168.1.45/snapshot/view0.jpg

schließen wir nun den Editor, zunächst Taste 'Strg'+'x', bestätigen die Datei zu speichern per 'y' und mit Entertaste bestätigen bis die Eingabeaufforderung wieder erscheint.
Nun noch das Script ausführbar machen per:

sudo chmod 777 image.sh
sudo chmod +x image.sh

und das Script ausführen per:

sudo /volume1/web/image.sh

wenn wir uns nun per ls den Verzeichnisinhalt ansehen sollte nnun eine neue Datei hinzu gekommen sein, eine Bilddatei unserer Webcam. Wir merken uns den Dateinamen (!), und öffnen nun wieder unser Script per

sudo nano image.sh

Die Datei haben wir nun also erfolgreich von der Kamera geholt, nun muss sie auf den Webserver. Einen FTP-Client bringt die Diskstation nicht mit und wput leider auch nicht … aber Curl ist vorhanden und mit diesem können wir auch Dateien per FTP versenden.

Als nächsten Schritt benötigen wir den Dateinamen der Bilddatei und die Zugangsdaten zu unserem Webserver per FTP bzw. einer entsprechenden FTP-Freigabe dort, den Benutzernamen und das Passwort.

Wir ergänzen ans Ende unsres Scriptes:

curl -T {Bilddatei-Name} -u {FTP-Benutzername}:{FTP-Passwort} {FTP-Serveradresse Pfad und Zieldateiname}

Beispiel:

curl -T view0.jpg -u username:password ftp://ftpserver.com/webcam/image.jpg

Achtung, Groß-Kleinschreibung ist wichtig, beachten, geht sonst nicht!

Doof wird’s nun nur, dass die bei jedem Aufruf der Bilddatei die Diskstation versucht eine neue anzulegen und diese nicht einfach überschreibt … beheben können wir das ganz Einfach, indem wir vor dem Abruf die Alte immer erst löschen.

Schreiben wir einfach oberhalb des wget http....

ein rm {Dateiname}

der fertige Code sollte in etwa so aussehen:



#!/bin/sh



cd /volume1/web

rm view0.jpg

wget http://192.168.x.y/snapshot/view0.jpg

curl -T view0.jpg -u username:password ftp://ftpserver.com/webcam/image.jpg

Nun wieder Nano verlassen per [Strg]+x Yes und Enter

und Script ausführen

sudo /volume1/web/image.sh

Soweit so prima, es wird nun durch das Script ein Bild aus der Kamera gezogen und auf unseren Webserver gespeichert, nun müssen wir das nur noch automatisch zyklisch machen.
Hierzu wechseln wir wieder zum DSM, also zur Bedienoberfläche der Synology Diskstation per Webbrowser.

Dort auf [Systemsteuerung], [erweiterter Modus] und anschließend [Aufgabenplaner].

Hier klicken wir auf [erstellen] um eine neue Aufgabe zu planen.

Im sich öffnenden Fenster vergeben wir im Reiter [Allgemein] Feld [Vorgang] einen Namen der Aufgabe z.B. 'Webcam', den Benutzer stellen wir, so nicht vorausgewählt auf 'root' um.

Weiter geht’s mit dem Reiter [Zeitplan].

Hier im unteren Drittel des Fensters in der Auswahl [Frequenz] einfach wählen, minütlich, 5-minütlich, 10-minütlich oder wie oft auch immer wir das Bild aktualisieren möchten. Den Rest der Einstellungen können wir hier einfach belassen und wir wechseln zum Reiter [Aufgabeneinstellungen].

Hier im unteren Drittel in das Eingabefeld 'Benutzerdefiniertes Script' schreiben wir einfach die Adresse unseres Scriptes:

/volume1/web/image.sh

Mit [OK] bestätigen wir die Eingabe und fertig.
Das Script wird nun mit der voreingestellten Frequenz wiederholt, automatisch ausgeführt. Nun muss das Bild noch in die Website eingebunden werden, im einfachsten Fall indem wir den HTML-Code unserer Webseite anpassen und auf das Bild verweisen per HTML-Image

<img src='/webcam/image.jpg' alt='Webcam ABC'>

Problem is nur, wenn ein Websitebsucher die Seite einmal aufrief hat sein Browser das Bild im Cache, also gespeichert und lädt nicht automatisch das aktuelle Bild. Das ist einerseits gut, weil wir ja keine unnötigen Daten versenden wollen, spart Übertragungszeit, andererseits schlecht weil unser Bild nicht aktualisiert wird.
Wie können wir nun den Server dazu veranlassen? Es gibt einige Möglichkeiten, ich bevorzuge die Verwendung von PHP, da meine Website sowieso dynamisch per PHP generiert wird.
Jeder hat schon mal in seinem Browser in der Adresszeile sowas wie

https://www.einewebsite.com/?xyz=abcde

gesehen, also eine Adresse gefolgt von einem Fragezeichen (?). Das Fragezeichen bedeutet, das die nachfolgenden Zeichen an ein Script übergeben und dort verarbeitet werden. Die angezeigte Website basiert auf diesen Daten, sie muss sich demnach bei jedem Aufruf anders darstellen und entsprechend muss der Browser diese auch neu laden. Ein Automatismus, den man sich auch in diesem Falle zunutze machen kann, indem wir einfach an die Bildadresse z.B. einen Zeitstempel anhängen. Dies kann per PHP recht einfach erfolgen indem wir den HTML Image Tag ergänzen durch etwas PHP-Code.



<a href='/webcam/image.jpg?t=<?php echo date(DATE_W3C); ?>' target='_blank' title='Webcam Weinberg'>

<img src='/webcam/image.jpg?t=<?php echo date(DATE_W3C); ?>' alt='Webcam'>

</a>

So wird aus einem statischen Bild ein dynamischer Inhalt, der bei jedem Aufruf neu geladen wird.

Das war die Pflicht, wir haben ein Bild auf der Website, das zyklisch aktualisiert und auch die Aktualisierung geladen wird. So weit so schön.
Oft ist eine Website aber nicht nur zum Selbstzweck, sondern soll auch z.B. für Werbung für ein Unternehmen oder eine Website eingesetzt werden. Auch soll die evtl. nicht jeder x-beliebige sie ohne Quellenangabe in seine Seite einbauen können, ein Wasserzeichen wäre sinnvoll.

Im ersten Schritt laden wir das Bild z.B. per Rechtsklick darauf auf unseren Rechner herunter.

Das Bild öffnen wir z.B. mit Photoshop Elements oder Affinity Designer oder ähnlichem Bildbearbeitungsprogramm, z.B. Paint.NET.
Nun fügen wir einfach einen zusätzlichen Layer über dem Bildhintergrund bei Photoshop über
[Ebene] ? [Neu] ? [Ebene].

Nun können wir auf den neuen Ebene Texte oder Bilder platzieren, die später in das Webcambild eingebaut werden sollen.

Nun blenden wir die Hintergrundebene aus, sichbar sollten nun nur noch die neuen Elemente sein.

Dann [Datei] [speichern unter] und nun ganz wichtig! Als im PNG-Format speichern.

Warum PNG? PNG kann ohne Hintergrundfarbe gespeichert werden, sprich ein Hintergrund scheint durch, man kann es sich wie ne altmodische Overheadfolie vorstellen, die auf ein anderes Bild gelegt werden kann. PNG hat zudem relativ geringe Qualitätsverluste.

Wir speichern also z.B. unter watermark.png unser Bild ab

Nun brauchen wir einen Zugang zu unserem Server um das Wasserzeichen da hin zu bekommen.
Ich nutze am Liebsten das Programm Filezilla. Sie können es unter

https://filezilla-project.org

aus dem Internet laden und frei verwenden.
Nach der Installation und start des Programms geben wir im Oberen Bereich unter der Menüzeile ein:

Server: sftp://{IP-Adresse des Servers}
Benutzername: admin
Passwort: {Administratorpasswort}

und klicken auf [verbinden].

Auf der Rechten Seite des Programms sollt nun der Verzeichnisinhalt des Servers von /volume1 erscheinen.
Auch unser Ordner 'web' sollte da sein, wir klicken darauf um ihn zu öffnen.
Nun solle darunter der Ordnerinhalt angezeigt werden, auch unser Script 'image.sh'

Auf der linken Seite des Filezilla navigieren wir nun zum Speicherort unseres 'watermark.png'
und ziehen es einfach von links nach rechts auf den Server. Das war es schon mit dem Filezilla, wir können das Programm verlassen, schließen.

Nun starten wir wieder PuTTY und loggen uns als admin wie obig beschrieben ein.

Nun kommt 'Image Magic' zum Einsatz, doch zunächst wechseln wir wieder in das Skriptverzeichnis:

cd /volume1/web

dann das Script öffnen

sudo nano image.sh

es müssen nun ein paar Zeilen ergänzt bzw. geändert werden …

per Pfeiltasten navigieren wir unter die Zeile mit dem 'wget' und fügen per [ENTER
-Taste] ein paar Leerzeilen ein.

In dieses setzen wir ein:

 rm view1.jpg

composite -dissolve 100% -gravity south watermark.png view0.jpg view1.jpg

was machen diese zwei Zeilen? Ganz einfach, die erste löscht ein vorangegangenes Webcambild mit Wasserzeichen so vorhanden, die zweite legt unser Wasserzeichen über das Kamerabild view0.jpg und speichert es als view1.jpg.

Nun müssen wir nur noch die curl-Zeile ändern, indem wir das view0.jpg durch view1.jpg ersetzen, also auf:
curl -T view1.jpg -u username:password ftp://ftpserver.com/webcam/image.jpg

Das ganze Script lautet nun:



#!/bin/sh

cd /volume1/web

rm view0.jpg

wget http://192.168.x.y/snapshot/view0.jpg

rm view1.jpg

composite -dissolve 100% -gravity south watermark.png view0.jpg view1.jpg

curl -T view1.jpg -u username:password ftp://ftpserver.com/webcam/image.jpg

per [Strg]+x ? Y ? [Enter] den nano verlassen und fertig ist der Lack. Nach erfolgreichem Probelauf kann man nun alle Programme schließen und im Anschluss die Zugänge zur Diskstation aus Sicherheitsgründen wieder deaktivieren.

Und das war alles, so einfach bekommt man die Bilder einer Webcam per Synology Diskstation mit Wasserzeichen auf eine Website … war doch easy, oder?

Webcam Weingut Hörner