B4R Tutorial ESP32 Camera Picture Capture and Video Streaming! (Updated with code!)

Hello!

Last December I made a request for support for the ESP32 Camera support. Well, I finally found the time to work on it myself and here's my initial attempt at implementing this with B4R. I'm using an ESP32CAM camera board with 4GB of PSRAM (like extended memory for the camera). I'm using one similar to this one you can find on Amazon. The board has an OV2640 2MP camera and an SD card slot (it's worth mentioning this model does not have a USB interface so you'll need an FTDI programmer).

I started with knowing nothing about image capture or video streaming to a working prototype, after about a week, I'm happy to say it works :).

The B4R app allows for picture capture using a /pic URL and stream video using /live over HTTP.

You can see a small demo of the screen capture and video on . The video shows my attempt to capture my daughter's toy duck picture (had a problem lining up the camera) using the /pic URL. Then I show video streaming from the camera in browser and inVLC using the /live URL. You can see the debug info as connections come in my B4R log window on the right of the screen.

The picture below is my ESP32 Camera board, my FTDI programmer on the left and my wiring.

devboard.jpg


Basically I'm using inline C to access the camera driver (which is now part of the Arduino library), and B4R WiFiServerSocket for the web server. It actually works quite well for a $10 camera and microcontroller. I plan on doing a full blown tutorial here on how it works and posting the source code (in the next day or so - I want to do a proper tutorial because I learned a lot during this fun project.

I want to contribute back to the community since I get so much from here. I hope you enjoy! :)

See the below lengthy tutorial and code :)
 
Last edited:

petr4ppc

Well-Known Member
Licensed User
Dear friends,

Before I start learning I want ask if it is possible to send the image (pic from camera) to FTP - using this great tutorial?

Thank you
p4ppc
 

miker2069

Active Member
Licensed User
Dear friends,

Before I start learning I want ask if it is possible to send the image (pic from camera) to FTP - using this great tutorial?

Thank you
p4ppc

Hello Petr4ppc (and everyone else), sorry for my delayed response on the Camera Library. I have a 2 year old, full time job, and also in the USA - so it's all crazy :)

p4ppc, I don't see why you can't sending via FTP. I'm sure you can refer to Erel's FTP post to setup the FTP part. Depending on how big your image is, you may be to send an in memory copy from the camera, else it will be good to save to SD Card (or perhaps flash if that's practical) and upload from there.
 

petr4ppc

Well-Known Member
Licensed User
Dear Miker2069,

first thank you for your NICE tutorial and very good work.
Thank you for your advice (i thought that FTP lib for esp8266 can not be used in ESP32 - I have asked for certain because of possibility of damaging my esp32).
I go to do some tests, one more - thank you very much
p4ppc
 

Hypnos

Active Member
Licensed User
Dear Miker2069,

first thank you for your NICE tutorial and very good work.
Thank you for your advice (i thought that FTP lib for esp8266 can not be used in ESP32 - I have asked for certain because of possibility of damaging my esp32).
I go to do some tests, one more - thank you very much
p4ppc

I also want to do the same thing but not success, It would be great if anyone can give some example if you can make it work. Thanks!
 

petr4ppc

Well-Known Member
Licensed User
Hypnos,

did you tried esp8266 FTP lib? I have tested it, but I can not connect to FPT server.

p4ppc
 

KiloBravo

Member
Licensed User
Now, I know this is an old thread (LOL), but ...
I just spent two hours trying to get this to work.
I have a FTDI programmer and an ESP32 Camera module. I wired it exactly as indicated in the thread.
Finally, determined. I could only program the esp32 at 3.3 volts. At 5 volts I got a bunch of errors.
But, once programmed the B4R App only ran at 5 volts not the programming voltage of 3.3 volts.
I am pretty sure I downloaded and did this a year ago and did not have the same problem.

I reread post #2 maybe that is what Miker2069 is indicating, but I didn't read it that way.
I.E Program at 3.3V and run Camera Board/App at 5 Volts.
Anyway if anyone else tries this and has a problem that might be your issue.

Thanks Miker2069, code works great as is ! :)
B4X it is all about the journey not the destination. LOL
 

DC1

Member
Licensed User
Hi
I think I'm missing something - the live streaming works just fine, if I try the pic taking I get the following Log message and nothing on the uSD.
Other than removing the gray scale option (commenting out) nothing else has changed in the B4R script - That I downloaded earlier today

Hope you can help
 

Attachments

  • pic error.png
    pic error.png
    6.5 KB · Views: 68

KiloBravo

Member
Licensed User
I get that too once in a while if it is taking a long time for the picture to display in the browser.
I am using the latest FireFox browser. The streaming seems extremely slow to me.

What frame rate are you getting and what resolution ? VGA SVGA ?
 

yaqoob

Member
Licensed User
Part 4 - Caveats

Looking at the code, you might wonder (among other things), why I wrapped calls to astream.Write in the following subs:


B4X:
'Helper Functions
'the aws (astream write stream) - is used to get around leaking stack buffer in a loop when sending strings to network, see description above
Private Sub aws(s As String)
 
    Astream.Write(s.GetBytes)
    Astream.Write(CRLF)
 
End Sub

'the awscrlf - same as above but just sends CRLF
Private Sub awscrlf()
 
    Astream.Write(CRLF)
 
End Sub

The short answer is Strings are created on the stack. So something like sending:

B4X:
Astream.Write("Content-type:image/jpeg")

In a loop (i.e. as a result of streaming) would cause a stack leak and the camera board would eventually panic and die. Wrapping the Astream.Write in a couple of helper functions that I can use in loops solves that as the the memory for strings are allocated/deallocated appropriately when the sub completes.

Another thing to mention (and most likely due to the attempt to figure out why my program was crashing as a result of the above). I make use of another helper routine:

B4X:
private Sub content_length_to_stream()
 
    Dim l As String
    l = NumberFormat(ESP32CAM.Length,1,0)
    Astream.write("Content-Length:").write(l).Write(CRLF) 'no need to call aws since this  astream.write is already wrapped in a helper function

For the same reason I described above - Strings memory leaks. calling the NumberFormat routine creates the string on the stack, and this is called repeatedly during streaming video. Wrapping it in a sub solves that.

Finally, I use a sub called "StreamGood()" all over the place in the web server code. Honestly it's probably not necessary to check *all the time* if the stream is good, as if the stream is "bad" astream_error should be called. Again I was hunting down why my program was crashing and it was ultimately a result of the string leaks. I ended up leaving it in as I can take appropriate action inside the streaming or chunking loops.

Well that's it - I will clean this up over the next day or so. I know it's a lot, I wanted to give you enough info and background so you can get started and avoid some of the mistakes I made (albeit a fun experience). Please let me know what you think :)

Thank you, Miker2069,
Very nice and detailed tutor. Your tutor saved me a lot of time and effort.
 
Top