HowTo: Node Red – Display IP Cam Images in Dashboard

Posted on by

If you have an IP camera installed on your network - or elsewhere - you can also view the camera image in NodeRed's dashboard.

How to do this is explained in the following article.

Safety instructions

I know the following notes are always kind of annoying and seem unnecessary. Unfortunately, many people who knew "better" have lost eyes, fingers or other things due to carelessness or injured themselves. Data loss is almost negligible in comparison, but even these can be really annoying. Therefore, please take five minutes to read the safety instructions. Because even the coolest project is not worth injury or other trouble.
https://www.nerdiy.de/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 make a purchase via this link, Nerdiy.de will receive a commission from the relevant online shop or provider. The price does not change for you. If you make your purchases via these links, you support Nerdiy.de in being able to offer other useful projects in the future. 🙂 

Requirements

Helpful articles:
To be able to use this configuration, NodeRed should of course already be installed.
How to prepare a RaspberryPi and then install NodeRed on it is described in the following articles.

The following articles describe what has to be done to prepare the RaspberryPi so far:
RaspberryPi – setup for nerdiys!
RaspberryPi – The first configuration!
RaspberryPi – Control the RaspberryPi via SSH
NodeRed – Installing NodeRed on the RaspberryPi
NodeRed – Install new nodes
NodeRed - Create a user interface with dashboard nodes

Required tool:
-no-

Required material:

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

Log into the NodeRed configuration interface

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

View of the login dialog. Here you have to enter the login data that you specified during the configuration of the login. You can find information about this in the article NodeRed - set up user login.

node-red-node-base64 -Install node

In this configuration, the camera image is encoded as a base64 string so that it can be transferred to the template node. For this to work, the node "node-red-node-base64" must be installed. How to install your node is described in the article NodeRed – Install new nodes explained.

install node-red-contrib-image-output -Node

Thanks to the node "node-red-contrib-image-output", you can display the received image in the NodeRed editor. This saves you from having to click back and forth between the editor and dashboard, especially during the configuration phase. To do this, install the node "node-red-contrib-image-output". How to install your nodes is described in the article NodeRed – Install new nodes explained.
 

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 but differs from manufacturer to manufacturer and unfortunately often from model to model. 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 still image retrieval service. After the interval defined in the "regularRequest" inject node, the images from the IP cam are retrieved from 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 the http-request-node. Here you have to enter the URL to the camera image of your IP cam.

In case the code below can't be copied formatted correctly: I have also uploaded the code 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
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"}]

Have fun with the project

I hope everything worked as described for you. If not or you have questions or suggestions please let me know in the comments. I will then add this to the article if necessary.
Ideas for new projects are always welcome. 🙂

PS 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 think it's cool that I share the information with you, I would be happy about a small donation to the coffee fund. 🙂

Buy Me a Coffee at ko-fi.com       

6 comments

  1. Hello Fab,

    when I want to import your flow into Node-Red, I get an error:

    SyntaxError: Unexpected token i in JSON at position 842
    at <img id="img" src="\"

    Can you give me a hint what exactly is wrong? The problem lies in the script of the dashboard
    viewers

    Greetings Hausen

    Reply

    1. Hi Hausen,
      Thanks for the hint. This was due to the plugin that I use to display the code (more or less) formatted. :/
      I corrected it now and hope it works for you too.
      I would be happy if you let me know if it works. 🙂
      Best regards
      Fab

      Reply

  2. Hello Fab,

    Thank you for your feedback signal. Unfortunately it doesn't work yet. There is no code at all in the DashboardViewer
    it now only says "Camera".

    Greetings Hausen

    Reply

      1. Good morning Fab,

        almost perfect. Unfortunately, the msg.payload entry is still missing in the "image preview" node. If you enter
        this one, everything works right away if you have adjusted the URL of the camera.

        Thank you for your efforts and your support.

        Greetings Hausen

        Reply

        1. Hey Hausen,
          hey man It's getting embarrassing. 😀 Thanks for the tip! Will correct it. I'm glad it works.
          Thanks again and best regards
          Fabian

          Reply

Kommentar hinterlassen

Your email address will not be published. Erforderliche Felder sind mit * markiert

This site uses Akismet to reduce spam. Learn how your comment data is processed.