How To: Node Red – View IP Cam Images in Dashboard

If you have installed an IP camera in your network – or elsewhere – you can also have the camera image displayed in the dashboard of NodeRed.

How to do that is explained in the following article.

Hints for our lovely english readers: Basically, many of the articles on Nerdiy.de are translations from the original german articles. Therefore, it may happen here and there that some illustrations are not available in english and that some translations are weird/strange/full of mistakes or generally totaly wrong. So if you find some obvious (or also not obvious) mistakes don't hesitate to leave us a hint about that in the comment section. 
Also please don't get confused, that instead of a "dot" often a "comma" is used as decimal separator. 🙂


Safety instructions

I know the following hints are always a bit annoying and seem unnecessary. But unfortunately, many people who knew it "better" from carelessness lost their eyes, fingers or other things or hurt themselves. In comparison, a loss of data is almost not worth mentioning, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Even the coolest project is worth no injury or other annoyance. https://www.nerdiy.de/en/sicherheitshinweise/

Affiliate links / advertising links

The links to online shops listed here are so-called affiliate links. If you click on such an affiliate link and shop via this link, Nerdiy.de receives a commission from the online shop or provider concerned. The price doesn't change for you. If you do your purchases via these links, you will support Nerdiy.de in being able to offer further useful projects in the future. 🙂


Requirements

Helpful Articles:
Of course NodeRed should already be installed so that you can take over this configuration.
How to prepare a RaspberryPi and then install NodeRed on it, is described in the following articles.
RaspberryPi – Setting up for Nerdiys!
RaspberryPi – The first configuration
RaspberryPi – Controlling the RaspberryPi via SSH
NodeRed – Installing NodeRed on the RaspberryPi
NodeRed – Install New Nodes
NodeRed – Import and Export Node Code
NodeRed – Create a UI with dashboard nodes

Required tools:
-none-

Required material:

In the following list you will find all the parts you need to implement this article.


Log in to the NodeRed configuration interface

Before you can edit your NodeRed configuration you must - if activated - first log in to the NodeRed configuration interface.

View of the login screen. Here you have to enter the login details that you entered during the configuration of the login. Information about this can be found in the article NodeRed - User Login Setup.

install node-red-node-base64 -node

The camera image is coded in this configuration as a base64 string to pass it to the template node. For this to work, the node “node-red-node-base64” must be installed. How to install your Nodes is explained in the article NodeRed – Install New Nodes.


Install node-red-contrib-image-output -Node

Thanks to the “node-red-contrib-image-output” node, you can display the received image in the NodeRed editor. This saves you – especially in the configuration phase the annoying back and forth between editor and dashboard. So install the node “node-red-contrib-image-output”. How to install Nodes is explained in the article NodeRed – Install New Nodes.


Find the right camera URL

For this NodeCode to work it is important that you configure the URL to the camera image of your IP cam. This URL is unfortunately not uniform, it differs from manufacturer to manufacturer and unfortunately also often from model to model. However, the list under the following link makes it very easy to find the right URL.

https://www.ispyconnect.com/sources.aspx


Import Node Code

In principle, this node configuration is nothing more than an automatic image-pickup-service. After the interval specified in the regularRequest injection node, the images of the IP cam are fetched at the specified URL and displayed on the dashboard.

For this configuration to work for you, it is important that you enter the URL to your camera image in the http-request-node under “URL”.

View of the camera image on the dashboard
View of the configuration in the editor.
View of http-request-node. Here you must enter the URL to the camera image of your IP cam.

In case the code below is incorrect formatted or not readable: The code is also available in the Nerdiy-Git: 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\n<img src=\"data:image/jpg;base64,{{msg.payload}}\" id='img' alt='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"}]

I hope everything worked as described. If not or you have any other questions or suggestions, please let me know in the comments. Also, ideas for new projects are always welcome. 🙂

Fab

P.S. Many of these projects - especially the hardware projects - cost a lot of time and money. Of course I do this because I enjoy it, but if you appreciate it that I share these information with you, I would be happy about a small donation to the coffee box. 🙂

Buy Me a Coffee at ko-fi.com

6 comments

  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

Leave a Reply

Your email address will not be published. Required fields are marked *