HOME ESP32 ESP8266 ESP32-CAM RASPBERRY PI MICROPYTHON RPi PICO ARDUINO REVIEWS

Node-RED with Raspberry Pi Camera (Take Photos)

In this project we’re going to show you how to take photos with Node-RED using the Raspberry Pi Camera Module V2.

Prerequisites:

If you like home automation and you want to learn more about Node-RED, Raspberry Pi, ESP8266 and Arduino. I recommend that you download my course: Build a Home Automation System for $100.

Parts required

For this project you need the following parts (click the links below to find the best price at Maker Advisor):

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

Connect the Raspberry Pi Camera Module

With the Pi shutdown, connect the camera to the Pi CSI port as shown in the following figure. Make sure the camera is connected in the right orientation with the ribbon blue letters facing up.

Enable the camera

To use the Raspberry Pi Camera module, you need to enable the camera software in your Raspberry Pi. In the Desktop environment, go to the Raspberry Pi Configuration window under the Preferences menu, open the Interfaces tab and enable the Camera as shown in figure below.

Or, in the Terminal window, type the following command:

pi@raspberry:~ $ sudo raspi-config

You should see the Raspberry Pi software configuration tool. Select the Interfacing Options:

Enable the camera and reboot your Pi:

Installing the Raspberry Pi Camera node

To install the Raspberry Pi Camera node on Node-RED, enter the following command:

pi@raspberry:~ $ sudo npm install -g node-red-contrib-camerapi

Choosing the photos directory

You need to chose a directory where the photos will be temporarily saved. For that you need to edit the settings.js file. Try one of the following commands because your Node-RED directory installation may be different.

pi@raspberry:~ $ sudo nano /root/.node-red/settings.js

or

pi@raspberry:~ $ sudo nano ~/.node-red/settings.js

Then, scroll down the file, find the httpStatic setting, uncomment and type your desired directory to store the Raspberry Pi Camera photo. Take a look at the figure below.

httpStatic: '/home/pi/Pictures/',

When you’re done, exit and save the changes.

Start Node-RED

To start Node-RED, enter the following in the Terminal window:

pi@raspberry:~ $ sudo node-red start

To access Node-RED, open a tab in any browser on the local network and type the following:

http://Your_RPi_IP_address:1880

You should replace Your_RPi_IP_address with your Raspberry Pi IP address. If you don’t know your Raspberry Pi IP address, in the Terminal enter:

pi@raspberry:~ $ hostname -I

Node-RED Dashboard

You need to create a tab and a group on Node-RED to add your dashboard widgets. Follow the next instruction to create a tab and a group (see figure below):

  • On top right corner of the Node-RED window you have a tab called dashboard.
  • Select that tab (1). To add a tab to the user interface click on the +tab button (2).
  • Once created, you can edit the tab by clicking on the edit button (3).

You can edit the tab’s name and change its icon:

Creating the Node-RED Flow

Before creating the flow, make sure you have the camerapi takephoto node, as show in the figure below. If you don’t have the node, check that you’ve followed the instructions above in the Installing the Raspberry Pi Camera node section.

First, drag 3 nodes into the flow: template, camerapi takephoto and debug.

Template node

Then, edit the template node, as shown in the figure below – copy and paste the template code below the figure.

<script>
var value = "1";
// or overwrite value in your callback function ...
this.scope.action = function() { return value; }

function updateF() {
  var source = '/photo1.JPEG',
  timestamp = (new Date()).getTime(),
  newUrl = source + '?_=' + timestamp;
  document.getElementById("photo").src = newUrl;
}
</script>

<md-button ng-click="send({payload:action()})" onclick="setTimeout(updateF, 2500);" style="padding:40px; margin-bottom: 40px;" >
 <ui-icon icon="camera"></ui-icon>
 Take a photo<br>
</md-button>

<div style="margin-bottom:40px;">
 <img src="/photo1.JPEG" id="photo" width="100%" height="100%">
</div>

This JavaScript code automatically updates the Node-RED page when a new photo is taken.

Camerapi Takephoto node

Finally, edit the camerapi takephoto node with the following properties:

Note 1: don’t forget to add the right File Path to your node including the last forward slash – /home/pi/Pictures/

Note 2: every time you open the camerapi takephoto node, it will change the file default path to yes. So, make sure you select the right properties, every time you open the node.

Note 3: when you take a new photo, it will be saved on your chosen directory with the name photo1.JPEG. Every time you take a new photo, Node-RED overwrites the existing photo because they have the same name.

Wiring the nodes

Connect the nodes as shown in the figure below.

Lastly, press the Deploy button to save all the changes.

Node-RED UI

Your Node-RED application is ready. To access the UI, you can use any browser in your local network when you type:

http://Your_RPi_IP_address:1880/ui

The next figure shows how the Node-RED UI looks. We’re using this application to monitor our Creality CR-10 3D printer. With this setup we can quickly check the printing status from any room by clicking the TAKE A PHOTO button.

Troubleshooting

1) If your image is not being displayed on the Node-RED UI, you can go the following URL and see if your httpStatic path was set properly:

http://Your_RPi_IP_address:1880/photo1.JPEG

2) If the Pi Camera is not taking photos, double-check that the camera ribbon is well connected to your Pi’s CSI port. Also confirm that it’s enabled in your Pi’s raspi-config menu.

3) Open the camerapi takephoto node and ensure that it has the right file path.

Demonstration

Here’s a GIF image showing how the application works. When you click on the button, a new photo is automatically updated on the Node-RED UI.

Wrapping up

In this project, we’ve shown you how you can use the Raspberry Pi Camera with Node-RED to take photos. You can edit the flow and the template to use the camera in your own projects whether you want to monitor your lab, door or 3D printer.

We hope you’ve found this post useful. Thanks for reading!



SMART HOME with Raspberry Pi ESP32 and ESP8266 Node-RED InfluxDB eBook

SMART HOME with Raspberry Pi, ESP32, ESP8266 [eBook]

Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »
Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »

Recommended Resources

Build a Home Automation System from Scratch » With Raspberry Pi, ESP8266, Arduino, and Node-RED.

Home Automation using ESP8266 eBook and video course » Build IoT and home automation projects.

Arduino Step-by-Step Projects » Build 25 Arduino projects with our course, even with no prior experience!

What to Read Next…


Enjoyed this project? Stay updated by subscribing our newsletter!

35 thoughts on “Node-RED with Raspberry Pi Camera (Take Photos)”

  2. Thank you for the TakePhoto project. The following msg.error appears and no photo image.
    SyntaxError: Use of const in strict mode

    Reply

    • Hi Nico.
      Does that error appear in the Terminal window (where the Node-RED instance is running?)
      Or in the Node-RED debbug window?

      Reply

        • It also appears in the terminal window. See below.
          Starting as a systemd service.
          Started Node-RED graphical event wiring tool..
          11 Oct 17:52:57 – [error] [camerapi-takephoto:Neem Foto] SyntaxError: Use of const in strict mode.

          Reply

  3. Very clear and precise instructions. Thank you.
    I was hoping to read a remark from you in regard of using usb web camera; if you do not have RP Camera….May be I see it in the comments…..I hope…

    Reply

    • Hi.
      Unfortunately this method doesn’t work with an USB camera.
      The picamera node only works with the PiCamera or with a PiCamera compatible board.
      Thank you for your support.
      Regards
      Sara

      Reply

  4. Hey. Great tutorial as usual. I’m having trouble with the template in that it is not showing up on the dashboard. I have put it into it’s own flow and created a separate tab and group but only the tab and group show up, not the button. Any thoughts? How can i debug this?
    Thanks

    Reply

  5. Thank you for your help, the did not take a photo
    I add a photo in the directory, it displayed in dashboard
    my camera works in other programs

    Reply

  7. I have tried this many times and I can get a picture on the screen that is generated separately in a python script. The camera doesn’t appear to be taking a picture with the Take a photo button. The camera attached to the Pi Zero took the photo, so I know it isn’t a camera problem. I keep getting a “Syntax Error: Unexpected Token” from [camerapi-takephoto:Take picamera]

    Reply

    • Neil Gillbanks I’m not sure… That shouldn’t happen and it sounds like it’s a problem with the camerapi takephoto node itself… Did you double-check all the configurations in the node? Are you running Node-RED as a sudo?

      Reply

    • Yes, that sounds like the problem. You’ve modified this file sudo nano ~/.node-red/settings.js with httpStatic: ‘/home/pi/Pictures/’,.
      If you can’t see the photo in that URL, it will not show in the /UI…

      Reply

  11. Hello,

    Following the tutorial and am encountering 2 problems:

    1.21 Oct 21:09:29 – [info] Starting flows
    21 Oct 21:09:29 – [info] Started flows
    21 Oct 21:09:29 – [error] Unable to listen on http://192.168.1.4:1880/
    21 Oct 21:09:29 – [error] Error: port in use
    is the message appearing on my Putty terminal.

    2.On the /ui the photo doesn’t seem to appear but rather an “x” as if the photo hasn’t loaded.

    tried to enter the photo1.JPEG but it displays “Cannot GET /photo1.JPEG”.

    Any help would be appreciated. Just getting into Raspberry Pi and loving this site.

    Thanks.

    Reply

    • Hi Steven.
      1. The Error: port in use error indicates you already have a process using port 1880. Take a look at this issue: groups.google.com/forum/#!topic/node-red/2MGUYpdgCIo and try to stop and restart node-red.
      2. In Node-RED open the “camerapi takephoto” node and ensure that it has the right file path for the photo. Don’t forget to add the right File Path to your node including the last forward slash, for example: /home/pi/Pictures/
      I hope this helps,
      Regards,
      Sara 🙂

      Reply

  12. Hi, thanks for this tutorial, this is exactly what I want to do with my RPi. This seems to be for an old version of NodeRed, though, and my screen looks slightly different to yours. For instance, I can’t see anywhere to add a Dashboard tab. This seems to be derailing my attempt at following along your tutorial. Could you please update the tutorial, or advise?

    Thanks for all your hard work!

    Reply

  15. I have your book Surveillance Camera with “Surveillance Camera with
    Pi Camera and Node-RED” i got it out and dusted it off and succeded the first part but the node red flow defeats me. I can get the picture once with sudo python3 rpi_camera_surveillance_system.py but can’t get it to stop an error using pkill 9 -f doesn’t do anything.

    Reply

  17. I get this back:

    [error] [camerapi-takephoto:501f64cb.f974bc] Error: Cannot find module ‘uuid/v4’
    Require stack:
    – /home/pi/.node-red/node_modules/node-red-contrib-camerapi/camerapi.js
    – /usr/lib/node_modules/node-red/node_modules/@node-red/registry/lib/loader.js
    – /usr/lib/node_modules/node-red/node_modules/@node-red/registry/lib/index.js
    – /usr/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/nodes/index.js
    – /usr/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/index.js
    – /usr/lib/node_modules/node-red/lib/red.js
    – /usr/lib/node_modules/node-red/red.js

    Could it be related to version instalation?

    Reply

    • Greetings,

      Problem solved, just had make a small chage on the “camerapi.js” file:

      const { v4: uuidv4 } = require(‘uuid’);
      //var uuidV4 = require(‘uuid/v4’);

      Now it’s working fine. Thank you so much for the tutorials.

      Um abraço!

      Reply

  19. I just want to inform that if anyone having “Cannot GET /photo1.JPEG”, you need to change HTTP static address from ” httpStatic: ‘/home/pi/Pictures/’, ” to ” httpStatic: ‘/home/pi/Pictures’, “. Work for me.

    Reply

  20. Thanks for this simple tutorial guys!
    Anyone still getting “Cannot GET /photo1.JPEG” despite having set the file path correctly, make sure you have installed Pi Camera..

    sudo apt-get update
    sudo apt-get install python-picamera python3-picamera

    Reply

Leave a Comment

Download Our Free eBooks and Resources

Get instant access to our FREE eBooks, Resources, and Exclusive Electronics Projects by entering your email address below.