Sending camera images to FTP server and displaying on webbrowser

I just started working with Node RED and Raspberry Pi 4 B. In my project I want to take images from my Basler IP camera and store those images to the FTP server. In web browser, I want to have a display with image coming from the FTP server. I have search a lot and got confused a lot.
Is it possible that anyone guide me with the process?
Thanking you in advance.

As you say, there has been so many discussions around this topic. Instead of using FTP server I think more people (like myself) is using a MQTT broker for image data transport. But it depends what you want to do. If it is live streaming & viewing from ip cameras you are looking for, then this is really recommended to read. Many pages yes, but a good learning session about the topic:

https://discourse.nodered.org/t/still-testing-nodes-for-mp4-video-streaming/37099/11

What is you goal - to display 1 image or historical images?

When you say write image to FTP server, do you mean overwrite that one image OR keep adding new images?

Are the FTP server and node-red server the same PC/Server?

Is there a web server installed where the FTP files are saved?

Are you expecting the display of images to be made via node-red dashboard?

I have several pi's in different places set up to do exactly that. Transfer via FTP to pi then display in node red. It works well survives power outages gracefully and requires a minimum of components. My biggest issue was finding cameras to transfer to FTP. Most cameras now want you to upload to their servers. The second issue with cameras even if they transfer to FTP is sometimes they use a strange path, they want to append a camera id to the path or something. You can work around the path issue but transferring to the cloud was a non starter for me. I upload images every 15 seconds and only display one image from camera at a time. There is no long term storage every image gets over written by the next. I can upload my flow if you wish.

That's exactly I am looking for. I also want to overwrite images with the next one and display the latest image on web browser. That would be great if you can upload your flow, Gerry! Thank you!

Hi Steve,

  1. I just want to display the latest grab.
  2. I want to overwrite the previous image with the next image.
  3. I have created FTP server for Pi using this tutorial (https://howtoraspberrypi.com/setup-ftp-server-raspberry-pi/)
  4. I didn't get your 4th question. I will look for the answer.
  5. Using node red dashboard, I want to update the display with the latest image.
    I hope I gave you the correct answers.
    Thanks!

So if you are simply overwriting the image & "just want to display it on a dashboard" - why dont you simply use a http request node to grab the image & send it directly to dashboard (or save it to a local file first if you must)? No FTP server required!

To speak to @Steve-Mcl questions first. I already had an FTP server installed for several other reasons so that one was a no brainer. It's been a long while since I did this and I'm thinking I tried the HTTP way first and it rendered completely wonky. So I went the FTP route thinking I may go back and try the HTTP later and of course later never came, but it's been a while so I could be completely wrong about that.
First you need to install the FTP server. I use proFTPd but there are a lot to choose from. You need to make sure the ftp path is accessible to node-red so I put my ftp home folder at /home/pi/ftp. Next make sure you can access that from the network. I use filezilla to put a file there and make sure it's writeable.
The camera is the tricky part. I had an old dlink camera sitting in a box that was perfect. I could choose a file name and a ftp folder, and a time interval and also choose over write. The camera worked perfect. On the next cameras for my next building the camera's had funky firmware. You could choose a ftp folder but the cameras append a serial number to the path example I want to write to /home/pi/ftp and the camera wrote to /home/pi/ftp/xyz123. I found no way around that. Next I specified a file name but the camera always wrote a date and time to the file name as well and there was no way to overwrite the existing file. I could work around it in node red but the dlink was by far the cleanest and of course no longer made. The camera setup was the hardest part of all this. The flow is

[{"id":"9170d1ba.abebc","type":"inject","z":"65b18a05.74c9d4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"5","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":100,"wires":[["3130b57b.d3792a"]]},{"id":"2c40d0f8.fe1c48","type":"ui_template","z":"65b18a05.74c9d4","group":"cae42d32.f68c9","name":"picture 1","order":1,"width":"6","height":"6","format":"\n \n <img width=\"100%\" height=\"100%\" alt=\"Oops\" src=\"data:image/png;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":680,"y":100,"wires":[[]]},{"id":"f45e8bcf.e82f18","type":"base64","z":"65b18a05.74c9d4","name":"","action":"str","property":"payload","x":520,"y":100,"wires":[["2c40d0f8.fe1c48"]]},{"id":"3130b57b.d3792a","type":"file in","z":"65b18a05.74c9d4","name":"chip's picture","filename":"/home/pi/ftp/chip/chip.jpg","format":"","chunk":false,"sendError":false,"encoding":"none","x":350,"y":100,"wires":[["f45e8bcf.e82f18"]]},{"id":"cae42d32.f68c9","type":"ui_group","name":"picture","tab":"a2970727.4d9078","order":9,"disp":false,"width":"6","collapse":false},{"id":"a2970727.4d9078","type":"ui_tab","name":"Pictures","icon":"fa-book","order":10,"disabled":false,"hidden":false}]

This setup works well recovers well from any power failures of which happen fairly commonly and the images always come up fine.
If @Steve-Mcl has a flow to share using the http method I would be glad to go back and update my flows, always open to a better way to do things but mine works, and is in place and looks good.

Sure, in fact I'll use your flow to demonstrate the fact no FTP server or file system is required ...

↑ Just replace the URL with the URL your camera provides.

[{"id":"9170d1ba.abebc","type":"inject","z":"cd89349b.986888","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":440,"wires":[["3660b219.abc9fe"]]},{"id":"2c40d0f8.fe1c48","type":"ui_template","z":"cd89349b.986888","group":"cae42d32.f68c9","name":"picture 1","order":1,"width":"6","height":"8","format":"\n \n <img width=\"100%\" height=\"100%\" alt=\"Oops\" src=\"data:image/png;base64,{{msg.payload}}\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":780,"y":440,"wires":[[]]},{"id":"f45e8bcf.e82f18","type":"base64","z":"cd89349b.986888","name":"","action":"str","property":"payload","x":620,"y":440,"wires":[["2c40d0f8.fe1c48"]]},{"id":"3660b219.abc9fe","type":"http request","z":"cd89349b.986888","name":"https://picsum.photos/200/300","method":"GET","ret":"bin","paytoqs":"ignore","url":"https://picsum.photos/200/300","tls":"","persist":false,"proxy":"","authType":"","x":410,"y":440,"wires":[["f45e8bcf.e82f18"]]},{"id":"cae42d32.f68c9","type":"ui_group","name":"picture","tab":"a2970727.4d9078","order":9,"disp":false,"width":"6","collapse":false},{"id":"a2970727.4d9078","type":"ui_tab","name":"Pictures","icon":"fa-book","order":10,"disabled":false,"hidden":false}]

NOTE: This assumes you have a semi modern webcam that provides snapshot URL (most do - just find your URL and update the http request)

so therein lies my problem, I can't find any URL that will send the login to the camera or allow the login credentials to be sent to the camera via the URL. I can connect to the camera via the browser but then I have to manually enter the login credentials.

I have two buildings with two different pi's and cameras attached. The older camera on the one pi (and there is only one camera) I can't find a way to login via the URL. On my second building with 5 cameras they are probably several years newer there is a way to login via URL. So I'm assuming after the first camera wouldn't let me login I just reused the same flow for the newer cameras and left it at that. However, now that I have your demo flow (and it's on my mind) when I get a chance I will update the newer camera pi with your flow. It does seem much easier.
Thanks