HowTo: Node Red – IP-Cam-Bilder im Dashboard anzeigen

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.

Ansicht des Login Dialogs. Hier müsst Ihr die Login Daten eingeben die Ihr während der Konfiguration des Logins angegeben habt. Infos dazu findet Ihr im Artikel NodeRed - Benutzerlogin einrichten.

node-red-node-base64 -Node installieren

Das Kamerabild wird in dieser Konfiguration als base64-String codiert um es an die template-Node übergeben zu können. Damit dies funktioniert muss die Node “node-red-node-base64” installiert werden. Wie Ihr Nodes installiert ist in dem Artikel NodeRed – Neue Nodes installieren erklärt.

node-red-contrib-image-output -Node installieren

Dank der Node “node-red-contrib-image-output” könnt Ihr euch das empfangene Bild im NodeRed-Editor anzeigen lassen. Dies erspart euch – gerade in der Konfigurationsphase das lästige hin- und herklicken zwischen Editor und Dashboard. Installiert dazu also die Node “node-red-contrib-image-output”. Wie Ihr Nodes installiert ist in dem Artikel NodeRed – Neue Nodes installieren erklärt.
 

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.

Ansicht des Kamerabilds auf dem Dashboard
Ansicht der Konfiguration im Editor.
Ansicht der http-request-node. Hier müsst Ihr die URL zu dem Kamerabild Eurer IP-Cam eintragen.

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
Getting Image","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. 🙂

Buy Me a Coffee at ko-fi.com       

6 Kommentare

  1. 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

    1. 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

  2. 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

      1. 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

        1. 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

Kommentar hinterlassen

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.