# ESP32-CAM and Node RED

**URL:** https://discourse.nodered.org/t/esp32-cam-and-node-red/18161
**Category:** General
**Created:** [19 November 2019 19:27 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161 "2019-11-19T19:27:59Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)
#### Post date: [19 November 2019 19:28 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/1 "2019-11-19T19:28:00Z")

</div>

Hello,

I like to stream a video to a template in Node RED.  
I know the IP address of my ESP32-CAM. When I type the IP address in the browser I can see the video stream.  
In Node Red I created a template with this code inside:

(See at the bottom of the tutorial mentioned)

I deploy my Node RED page, but no image on the page.  
I get a small icon, but not a picture or stream.  
I followed this instruction:

> **[ESP32-CAM Video Streaming Web Server (works with Home Assistant) | Random...](https://randomnerdtutorials.com/esp32-cam-video-streaming-web-server-camera-home-assistant/)**
>
> Build an IP Surveillance Camera with the ESP32-CAM board. The ESP32 Camera hosts a video streaming web server that integrates with Home Assistant or in any browser.

  
At the bottom of the tutorial is the code for Node RED.

I hope somebody can help me to solve this problem.  
Thank you.

Yvonne

---

<div class="post-metadata">

### Author: ![batigolle](https://avatars.discourse-cdn.com/v4/letter/b/ee59a6/32.png) [@batigolle](https://discourse.nodered.org/u/batigolle)
#### Post date: [19 November 2019 19:50 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/2 "2019-11-19T19:50:49Z")

</div>

Hi Lodv  
where did you install Node-Red?  
I have tried node-red in windows with esp32-cam  
taking inspiration from this link

> **[WillWelker/pi-temporal-camera](https://github.com/WillWelker/pi-temporal-camera)**
>
> Put a time lapse gif image in your Node Red dashboard to watch your plants grow - WillWelker/pi-temporal-camera

if you use windows I'll give you my test flow

---

<div class="post-metadata">

### Author: ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)
#### Post date: [19 November 2019 19:56 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/3 "2019-11-19T19:56:26Z")

</div>

Hi Batigolle,

I have installed Node Red on my raspberry Pi.  
I saw your link and I will look at that in depth tomorrow.  
What I saw was very promising.  
If you should have something for me, that could help me a bit further, I would be very grateful.  
I have tried to find a solution by looking at the internet, but it has not helped (until now I hope).  
Thank you for your reply.

Yvonne

---

<div class="post-metadata">

### Author: ![batigolle](https://avatars.discourse-cdn.com/v4/letter/b/ee59a6/32.png) [@batigolle](https://discourse.nodered.org/u/batigolle)
#### Post date: [19 November 2019 20:59 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/4 "2019-11-19T20:59:30Z")

</div>

Hi Lodv  
Short explanation of the flow

The flow shows the streaming and the last captured image.  
You can capture individual images with the TakePicture button or start a TimeLaps with the TL\_STOP button. The default timelaps time is 60 sec, but you can change it with the 'Interval' field.  
All captured images are saved in a folder on your computer, to be able to reassemble them and create an animated gif if necessary using ffmpeg ( next feature)

IMPORTANT : Not all options work, I have yet to finish it  
but you can use it as a starting point for your project

My Flow

 ![WebCamFlowTest](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/66bcaa3e32823157a75d59a25fe2fc89a6c594d3.jpeg)

[WebCamTest-flows.json](https://discourse.nodered.org/uploads/short-url/xI142Q5mfxKzrs7UrwfoVGiYJMf.json) (11.1 KB)

My Dashboard

 ![WebCamDashboard](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a8fa1dc143f96587e522d8d9da8f4fc3b2f30268.jpeg)

TL\_STOP ( RED ) = TimeLaps not running  
RUNNING (GREEN ) = TimeLaps running

I hope it can help you

---

<div class="post-metadata">

### Author: ![molesworth](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/molesworth/32/11748_2.png) [@molesworth](https://discourse.nodered.org/u/molesworth)
#### Post date: [19 November 2019 23:02 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/5 "2019-11-19T23:02:43Z")

</div>

> [@batigolle](#):
>
> I hope it can help you

I bought one of these one a whim last week, when it popped up on Amazon as I was buying some other bits and pieces. I haven't had time to try it out yet, but it looks like a good quality image (better than I'd expected) and not too hard to get working.

Something to keep me busy this weekend...

---

<div class="post-metadata">

### Author: ![batigolle](https://avatars.discourse-cdn.com/v4/letter/b/ee59a6/32.png) [@batigolle](https://discourse.nodered.org/u/batigolle)
#### Post date: [20 November 2019 06:48 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/6 "2019-11-20T06:48:24Z")

</div>

> [@molesworth](#):
>
> ........, but it looks like a good quality image (better than I'd expected)

The image is better than the one shown in my post.  
I modified the photographic lens to try and see if it works even in the dark with infrared LEDs.  
The modification has led to a deterioration of the image, however it remains acceptable.

---

<div class="post-metadata">

### Author: ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)
#### Post date: [20 November 2019 11:29 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/7 "2019-11-20T11:29:21Z")

</div>

Dear Luciano,

Thanks a lot for your information. I'm going to look at it now with the help of the explanation.  
Another question, how did you manage to attach an image to your post on the forum. I tried to upload an image to my post, but I don't see it. I used the upload button and attached a file (image) from my pc.  
Thanks.  
Regards,

Yvonne

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [20 November 2019 11:52 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/8 "2019-11-20T11:52:12Z")

</div>

Hi Yvonne,

Just some information. In your ESP32-CAM link I see that the video server code contains following:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1ffd845e104fe8cfaf97a681b806d7652e9488e7.png)

This means the camera offers an MJPEG stream, which you could also decode using my [node-red-contrib-multipart-stream-decoder](https://github.com/bartbutenaers/node-red-contrib-multipart-stream-decoder) node. The output would be an infinite stream of images ...

---

<div class="post-metadata">

### Author: ![batigolle](https://avatars.discourse-cdn.com/v4/letter/b/ee59a6/32.png) [@batigolle](https://discourse.nodered.org/u/batigolle)
#### Post date: [20 November 2019 11:52 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/9 "2019-11-20T11:52:32Z")

</div>

> [@lodv](#):
>
> I tried to upload an image to my post, but I don't see it. I used the upload button and attached a file (image) from my p

I do ...

 ![BottomUpload00](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/728aaecfa6aef385be255c5664cd1628b78b8468.jpeg)

 ![BottomUpload](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d7d40e6b302e1d1249179a3cba7c862155a6435d.jpeg)

After pressing the 'upload' button,  
the image appears in the box to the right of the preview

 ![BottomUpload0](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/50804adc911d999fe1095dd05c850e888a135af3.jpeg)

---

<div class="post-metadata">

### Author: ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)
#### Post date: [20 November 2019 12:18 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/10 "2019-11-20T12:18:50Z")

</div>

Dear Luciano, dear Bart,

Thanks for your help.  
Node Red is installed on my Raspberry Pi.  
The ESP32 Cam is attached to an external power supply.  
The IP address of the cam is 192.168.178.110.  
The IP address of the Raspi is 192.168.178.100  
There is no (not yet) a memory card in the ESP32 cam.  
So there is no directory structure.

What does SnapshotJPEG, nphMotionJpeg (Bart), stream or snapshot (Luciano) mean?  
Do you need :5000 after the ipaddress (portnumber)?

This is the result of my efforts (see attachments).

I see a still or stream when I type in the ip address of the ESP, so it is working (see attachment). ![Naamloos%202](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a5817cc196566abef35cbef61d65bfbdf3e8f598.jpeg)

 ![Naamloos%203](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1315445b7f1f22476dc42e5bbec10b69fd715e98.jpeg) ![Naamloos%204](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/431a53272a300754be6830f1fb7be6855ee5ad0c.jpeg)

---

<div class="post-metadata">

### Author: ![batigolle](https://avatars.discourse-cdn.com/v4/letter/b/ee59a6/32.png) [@batigolle](https://discourse.nodered.org/u/batigolle)
#### Post date: [20 November 2019 16:59 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/11 "2019-11-20T16:59:38Z")

</div>

Hi lodv  
I have uploaded this code on esp32-cam

> **[v12345vtm/timelapse-ESP32-CAM](https://github.com/v12345vtm/timelapse-ESP32-CAM/tree/master/jimvzee-esp32-cam/timelapsESP32-v12345vtm)**
>
> Contribute to v12345vtm/timelapse-ESP32-CAM development by creating an account on GitHub.

  
with this code, the streaming is obtained with the string http:\ ...  
 ![WebCamStreaming](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7c3e0d334ca577433daab622c0acdb3b4388a225.jpeg)  
as you can see in the node  
 ![WebCamStreaming0](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/26d1b19395c9238fbd0baf8f0970949e53618695.jpeg)

To view the photo, in the "Last Image" field,  
you need to change the flow to save the captured photo, on the raspberry.  
If it fails to save it you cannot view it

I used it on windows, I don't know how I know how to save the photo on the raspberry directory

---

<div class="post-metadata">

### Author: ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)
#### Post date: [20 November 2019 17:45 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/12 "2019-11-20T17:45:32Z")

</div>

Thank you Luciano.  
I must work now, but tomorrow I will look and hopelfully I manage to make it work.  
I keep you informed.

Have a nice evening.  
Yvonne

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [20 November 2019 22:32 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/13 "2019-11-20T22:32:14Z")

</div>

> [@lodv](#):
>
> What does SnapshotJPEG, nphMotionJpeg (Bart)

Not sure whether I understand this correctly. Normally you request a single (snapshot) image (e.g. jpeg) from your ip camera, or an endless mjpeg (=motion jpeg) stream of images. In the latter case the stream looks like this: jpeg/separator/jpeg/separator/jpeg ... My decoder node can grab the individual images from the stream and send them as output messages into your flow (so every message would contain a single image). Remark: to start a stream you send a single (motion jpeg) request to your ip camera, and you will keep receiving the mjpeg stream ...

---

<div class="post-metadata">

### Author: ![lodv](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lodv/32/7963_2.png) [@lodv](https://discourse.nodered.org/u/lodv)
#### Post date: [25 November 2019 15:45 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/14 "2019-11-25T15:45:46Z")

</div>

Finally I can get a stream in my Node-Red site.  
Thanks to your help.  
I used the Webcam node from Luciano and used this in the code:  
img src="[http://192.168.178.110:81/stream](http://192.168.178.110:81/stream)" width="650px"

You can imagine that I'm very happy with this result, because I hope I come a bit further now.  
Thank you both for your help and patience.  
Regards,  
Yvonne

---

<div class="post-metadata">

### Author: ![4711engel](https://avatars.discourse-cdn.com/v4/letter/4/b38774/32.png) [@4711engel](https://discourse.nodered.org/u/4711engel)
#### Post date: [21 June 2021 10:15 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/15 "2021-06-21T10:15:37Z")

</div>

Hello, I'm just starting to deal with Node-Red and wanted to use my ESP32 cam to display the stream in the dashboard, save photos and also use time lapse. I found your flow. Unfortunately, I get an error message that a "configurable interval" node does not exist. Can you help me with that? Perhaps you also have tutorials for your project that can help me get started.  
Gladly: [arduino123@gmx.net](mailto:arduino123@gmx.net)

Many greetings Ulli

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [21 June 2021 10:36 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/16 "2021-06-21T10:36:45Z")

</div>

Hi and welcome to the fourm.

> [@4711engel](#):
>
> "configurable interval" node does not exist

Install it...

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/2/e2560be4a1981a5b65dd0438e2443388c3fd935c.png)

---

<div class="post-metadata">

### Author: ![4711engel](https://avatars.discourse-cdn.com/v4/letter/4/b38774/32.png) [@4711engel](https://discourse.nodered.org/u/4711engel)
#### Post date: [21 June 2021 10:49 UTC](https://discourse.nodered.org/t/esp32-cam-and-node-red/18161/17 "2021-06-21T10:49:36Z")

</div>

Hi Steve thanks for help.
