Solltet Ihr in eurem Netzwerk – oder auch anderswo – eine IP-Kamera installiert haben, so könnt Ihr Euch das Kamerabild auch im Dashboard von NodeRed anzeigen lassen.
Wie das geht ist im folgenden Artikel erklärt.
Sicherheitshinweise
Ich weiß die folgenden Hinweise sind immer irgendwie lästig und wirken unnötig. Aber leider haben schon viele Menschen die es "besser" wussten aus Leichtsinnigkeit Augen, Finger oder anderes verloren bzw. sich verletzt. Im Vergleich dazu ist ein Datenverlust fast nicht der Rede Wert, aber auch diese können echt ärgerlich sein. Deswegen nehmt Euch bitte fünf Minuten Zeit um die Sicherheitshinweise zu lesen. Denn auch das coolste Projekt ist keine Verletzung oder anderen Ärger wert.
https://www.nerdiy.de/sicherheitshinweise/
Affiliatelinks/Werbelinks
Die hier in aufgeführten Links zu Online-Shops sind sogenannte Affiliate-Links. Wenn Du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekommt Nerdiy.de von dem betreffenden Online-Shop oder Anbieter eine Provision. Für Dich verändert sich der Preis nicht. Falls Du Deine Einkäufe über diese Links tätigst unterstützt Du Nerdiy.de dabei auch in Zukunft weitere nützliche Projekte anbieten zu können. 🙂
Voraussetzungen
Hilfreiche Artikel:
Damit Ihr diese Konfiguration übernehmen könnt sollte NodeRed natürlich schon installiert sein.
Wie ihr einen RaspberryPi dazu vorbereitet und dann NodeRed darauf installiert ist in den folgenden Artikeln beschrieben.
Die folgenden Artikel beschreiben was zu tun ist um den RaspberryPi soweit vorzubereiten:
RaspberryPi – Einrichten für Nerdiys!
RaspberryPi – Die Erste Konfiguration!
RaspberryPi – Den RaspberryPi über SSH steuern
NodeRed – Installation von NodeRed auf dem RaspberryPi
NodeRed – Neue Nodes installieren
NodeRed – Mit Dashboard-Nodes eine Benutzeroberfläche erstellen
Benötigtes Werkzeug:
-keins-
Benötigtes Material:
In der folgenden Liste findet Ihr alle Teile die Ihr zur Umsetzung dieses Artikels benötigt.
In die NodeRed Konfigurationsoberfläche einloggen
Bevor Ihr eure NodeRed Konfiguration bearbeiten könnt müsst Ihr Euch - falls aktiviert - zunächst in die NodeRed Konfigurationsoberfläche einloggen.
node-red-node-base64 -Node installieren
node-red-contrib-image-output -Node installieren
Die richtige Kamera-URL-finden
Damit dieser NodeCode funktoniert ist es wichtig, dass Ihr die URL zum dem Kamerabild Euerer IP-Cam konfiguriert. Diese URL ist leider nicht einheitlich sondern unterscheidet sich von Hersteller zu Hersteller und leider auch oft von Model zu Model. Die Liste unter dem folgendem Link erleichtert es jedoch sehr die richtige URL zu finden.
https://www.ispyconnect.com/sources.aspx
Node-Code importieren
Im Prinzip ist diese Node-Konfiguration nichts weiter als ein automatischer Standbild-Abholservice. Nach dem in der Inject-Node „regularRequest“ festgelegtem Intervall werden die Bilder der IP-Cam unter der angegebenen URL abgeholt und auf dem Dashboard angezeigt.
Damit diese Konfiguration bei Euch funktioniert, ist es wichtig, dass Ihr in der http-request-node unter „URL“ die URL zu Eurem Kamerabild eintragt.
Im Fall, dass der Code unten nicht korrekt formatiert kopiert werden kann: Ich habe den Code auch im Nerdiy-Git hochgeladen: https://github.com/Nerdiyde/NodeRedSnippets/blob/master/View%20IP%20Cam%20Images%20in%20Dashboard.txt
[{"id":"50183f7f.5ae77","type":"http request","z":"2bfb0626.bbf15a","name":"imageRequest","method":"GET","ret":"bin","url":"http://YOUR_CAM_IP/image.jpg","tls":"","x":1320,"y":4600,"wires":[["79c3426c.7df78c","bf8a81cf.8f74","945489e7.cfc1d8"]]},{"id":"835ede3.e20822","type":"inject","z":"2bfb0626.bbf15a","name":"regularRequest","topic":"","payload":"","payloadType":"date","repeat":"10","crontab":"","once":false,"onceDelay":0.1,"x":1120,"y":4600,"wires":[["50183f7f.5ae77"]]},{"id":"bf8a81cf.8f74","type":"debug","z":"2bfb0626.bbf15a","name":"debug","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1510,"y":4680,"wires":[]},{"id":"d86c30df.cda1d","type":"ui_template","z":"2bfb0626.bbf15a","group":"4615860e.37a298","name":"DashboardViewer","order":7,"width":"6","height":"6","format":"Camera
","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1790,"y":4600,"wires":[[]]},{"id":"945489e7.cfc1d8","type":"base64","z":"2bfb0626.bbf15a","name":"convertingToBase64","action":"","property":"payload","x":1560,"y":4600,"wires":[["d86c30df.cda1d"]]},{"id":"79c3426c.7df78c","type":"image","z":"2bfb0626.bbf15a","name":"","width":200,"x":1530,"y":4640,"wires":[]},{"id":"4615860e.37a298","type":"ui_group","z":"","name":"Status","tab":"a958b123.88e1d","order":1,"disp":true,"width":"6","collapse":false},{"id":"a958b123.88e1d","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]Viel Spaß mit dem Projekt
Ich hoffe bei euch hat alles wie beschrieben funktioniert. Falls nicht oder ihr Fragen oder Anregungen habt lasst es mich in den Kommentaren bitte wissen. Ich trage dies dann ggf. in den Artikel nach.
Auch Ideen für neue Projekte sind immer gerne willkommen. 🙂
P.S. Viele dieser Projekte - besonders die Hardwareprojekte - kosten viel Zeit und Geld. Natürlich mache ich das weil ich Spaß daran habe, aber wenn Du es cool findest, dass ich die Infos dazu mit Euch teile, würde ich mich über eine kleine Spende an die Kaffeekasse freuen. 🙂
Deutsch 
English 
Français 
Español 
Nederlands
Hallo Fab,
wenn ich Deinen Flow bei mir in Node-Red importieren möchte, bekomme ich leider einen Fehler angezeigt:
SyntaxError: Unexpected token i in JSON at position 842
a\n<img id="img" src="\"
Kannst Du mir einen Tipp geben was da genau falsch ist? Das Problem liegt im Skript des Dashboard
Viewers.
Gruß Hausen
Hi Hausen,
vielen Dank für den Hinweis. Das lag an dem Plugin, dass ich nutze um den Code (mehr oder weniger) formatiert darzustellen. :/
Habe es jetzt korrigiert und hoffe es funktioniert auch bei Dir.
Würde mich freuen, wenn Du mir eben bescheid gibst, ob es funktioniert. 🙂
Beste Grüße
Fab
Hallo Fab,
danke für Deine Rückmeldung. Leider geht es noch nicht. In dem DashboardViewer ist nun gar kein Code
mehr sondern es steht nur noch „Camera“ darin.
Gruß Hausen
Hey Hausen,
der Code wird wohl immer noch falsch dargestellt. :/ Ich habe den Code nun nochmal auf meinem GitHub hochgeladen. Du findest Ihn unter: https://github.com/Nerdiyde/NodeRedSnippets/blob/master/View%20IP%20Cam%20Images%20in%20Dashboard.txt
Hoffe das klappt. 🙂
Beste Grüße
Fab
Guten Mogen Fab,
fast perfekt. Leider fehlt in dem Node „image preview“ noch der Eintrag msg.payload. Trägt man
diesen ein, funktioniert alles sofort auf anhieb wenn man die URL der Kamera angepasst hat.
Danke für Deine Mühen und Deine Unterstützung.
Gruß Hausen
Hey Hausen,
hach Mensch. Langsam wird es peinlich. 😀 Danke für den Hinweis! Werde es korrigieren. Freut mich, dass es klappt.
Danke nochmal und beste Grüße
Fabian