GSM ESP32 Camera Take Still Picture and Show In IOS App

Need Help With My Project
,
1

Hi,

I am wondering if anyone can help point me in the right direction, or even just validate my if my theory is possible.

I am setting up an alarm system on an ESP32 that connects via a SIM800 modem. I have recently got an ESP32 camera module and have got the example code working without too much hassle. I have had the thought that if the alarm is triggered, I would like to be able to take a picture and have the picture sent though to the Blynk app. This would give some verification for false alarm trigger.

Alot of the examples for the ESP32 camera are all for working on WiFi, not GSM.

I realise that the data usage will be high, but this feature will be triggered manually via the app and used infrequently.

I think that I need to take the picture, upload it to somewhere like google drive, and then point the app to the google drive location. I am not sure that i can take the picture, store it locally and then point the app to local storage, as I am on GSM and not WiFi.

Has anyone done something similar?

Thanks in advance.

2

The image file will need to be at a publicly accessible URL. That could be within your own network if you have a system for making that location publicly available, or on a regular web server. I guess Google Drive may work, but I’m not sure.

Pete.

3

@jimbob123 The image which you are taking, it must be stored somewhere, where authentication is not required to access the image. This will let the app easily access and show the image inside.

If you know all the technicals, and can write codes to upload images to google drive (which is going to require authentication to upload), then surely proceed with that.

But, for an easier method, i would suggest you to get a PHP web server (the come really cheap). After that, you can search for some online tutorials to write a script and host the script on the server, to use it like an API to upload images, and then get the url of the image in the callback. Which would be further used by the app.

I hope I was able to point you to a appropriate direction. Let me know if you have any further confusions/doubts :slightly_smiling_face:

4

Thank you for the pointers, much appreciated. I am sure I will be back with more questions.

Thanks again

1 Like
5

@Vishal_Roy, might you be able to suggest a PHP webserver that will suit my needs? I have been experimenting with free hosting, but they do not work due to free hosting requiring a java enabled browser to access the url. The ESP32 is not java enabled so it cannot get past.

6

I have signed up with ionos, they have a cheap deal.

it is now working!

7

That’s great ! And yes, they have super cheap deals available, perfect for your needs :wink:

9

Now I have my pictures avaliable in my web host area, I am still unable to get the url link in the app to work, any ideas?

10

Which widget are you using?
What image format are you using?
Can you share the URL to one of your images?

Pete.

11

Pete,
I am using the image gallery widget.
Picture format is .jpg
I think I have solved it. It was due to there being a space either side of the hyphon in the file name that the PHP script creates:

$received = file_get_contents('php://input');
$fileToWrite = "timelapse/upload - ".time().".jpg";
file_put_contents($fileToWrite, $received);
exit();
?>

When changed to the following the url loink shows the picture:

$received = file_get_contents('php://input');
$fileToWrite = "timelapse/upload-".time().".jpg";
file_put_contents($fileToWrite, $received);
exit();
?>

Now I need to try and work out how change the script so that it overwrites the last file with the same name, so that the widget will always show the most up to date picture.

Thank you

12

Yes, even a little whitespace can ruin an entire script. And if you want to put some spaces then you need to parse the URL properly. Like for spaces, ‘%20’ is used while parsing URLs.

Now, to solve your second problem to overwrite the last file, you simply need to remove the time() function from the file name. Like this -

$fileToWrite = "timelapse/upload-image.jpg";

This will automatically overwrite the existing file on the server :wink:

13

There were some issues with the image gallery widget locally caching images, so when the source changed the displayed image didn’t. I’m not sure if these have been resolved or not.

I think the solution was to update the widget’s URL from code, but you’d need to search the forum for the details if you’re having issues.

Pete.

14

Just a coincidence, but this may be helpful: ESP32-CAM and Blynk -> FTP upload 📸

You will need to use the SIM800 AT Commands (If available/implemented) to upload via FTP.

15

@Vishal_Roy , Thank you for providing that code, much appreciated! I was trying to remove the time stamp element myself, but was not getting the desired result. My PHP skills leave alot to be desired. It works exactly as required now.

@PeteKnight , I am facing the issues you mention. From searching around it seems like the issue should be resolved by putting in:
Blynk.setProperty(V5, "urls", "http://myhosting.co.uk/timelapse/upload-image.jpg");
This does not have the effect of refreshing the widget. If I close down the app and open it up again, the recent picture is displaid. Whilst this makes it work, it is not very slick. Any thoughts?

@ldb, I will have look through your post , thanks for suggesting it! Many different ways to achieve the same end result, as always with micro controllers!

Thank you

16

I’ve not really used the widget much, and when I have it’s been via Node-Red, but the documentation says:

you can fully replace the list of images from the hardware:

Blynk.setProperty(V1, "urls", "https://image1.jpg", "https://image2.jpg");
or you can change individual image by it index:

Blynk.setProperty(V1, "url", 1, "https://image1.jpg");

It seems to me that you should be using the “url” syntax, not “urls”.

Pete.

17

@PeteKnight, Have given the “url” syntax a go and still no luck:

Blynk.setProperty(V5, "url", 1, "http://myhosting.co.uk/timelapse/upload-image.jpg");

All previous posts I have found from searching indicate that it used to be an issue, that got resolved.

18

In the example I shared above it includes a working implementation, which is url when changing a single URL, however the key thing to overcome the cache problem is to change the URL, on my example i have included the Unix time at the end:

For example:

String pic_name = "mypicture" + String(now()) + ".jpg";

// UPLOAD the picture named above and change the Blynk URL

String pic_url = "http://myhosting.co.uk/timelapse/" + pic_name;
Blynk.setProperty(V5, "url", 1, pic_url);
1 Like
19

@ldb, Thank you for the advice, although I am not sure that this would work for me as I am using two ESP32’s, one just for the camera, and the other is the main controller which is connected to blynk app. The main controller gives a digital output to trigger the ESP32 camera to take a picture.The main controller is using GSM and triggers te ESP32 camera to take a picture. The ESP32 camera is currently on my home WiFi, but one of my next steps is to make that work on GSM also. the final application will be mobile so GSM is a must. If i was to rename the file before uploading, the main ESP does not have any way of knowing what the file name would be. By keeping the file name the same, it gets me around that issue, but not the cache issue.

Thank you

20

Well… Are you transfering the picture file from one ESP32 to the other? Which one is uploading, it’s not clear.

Anyway, to overcome the cache problem an unique URL/filename strategy can be used.

21

ESP32 cam is taking picture and uploading to url, over wifi curently.
Main ESP32 is the Blynk unit and is triggering the ESP32 cam to take a picture when Blynk app button is pushed.
Working out how to get the two ESP’s to communciate locally, and agree on a unique image name each time could be the way forward…