Basics Project 084f ESP32-CAM Development Board – How to take picture and display it on web server


Basics: Project 084f

Project name: ESP32-CAM Development Board – How to take picture and display it on web server

Tags: Arduino, Ai-Thinker, ESP32-CAM, Development Board with camera, OV2640, OV7670, how to take picture and display it on web server

Attachments: library1, library2, sketch

In this project, you needed these parts (Dear visitors. You can support our project buy clicking on the links of parts and buying them or donate us to keep this website alive. Thank you):

1. ESP32-CAM Development Board with camera 1 set

esp32-cam

2. Arduino IDE ( you can download it from here  )

3. USB to TTL/Serial adaptor/converter 1 pc

USB to TTL converters
USB TO TTL converters

4. Jumper cables F-F

5. Micro SD card and SD card adapter 1 pc

6. WiFi AntennaCompact Internal WiFi Antenna with U.FL connector and 5.9 inch cable 1 pc (optional)

7. External 5V power supply for ESP32-CAM 1 pc (optional)

General

We will learn in this project how to build a web server that will allow you to take a picture, rotate it, show the latest captured picture (saved in SPIFFS) in your internet browser using ESP32-CAM Development Board with camera. 

So, when you access the web server, it will be three buttons available for you:

  • ROTATE button – You can rotate the picture depending on ESP32-CAM development board orientation;
  • CAPTURE button – You can use it to take a picture with the ESP32-CAM development board and save it in the ESP32-CAM development board SPIFFS. So even if you restart your ESP32-CAM development board, you can always access the last saved picture. Wait for at least 5 seconds before doing refresh of your the web server page to ensure the ESP32-CAM development board will take and store your picture;
  • REFRESH button – You can refresh the web server page and it will be updated with the latest picture.

Understanding the USB to TTL converter

You can read more about them here.

Understanding the ESP32-CAM Development Board with camera

The ESP32-CAM has a very competitive small-size camera module that can operate independently as a minimum system with a footprint of only 27*40.5*4.5mm and a deep sleep current of up to 6mA.

ESP32-CAM can be widely used in various IoT applications. It is suitable for home smart devices, industrial wireless control, wireless monitoring, QR wireless identification, wireless positioning system signals and other IoT applications. It is an ideal solution for IoT applications.

ESP32-CAM adopts DIP package and can be directly inserted into the backplane to realize rapid production of products, providing customers with high-reliability connection mode, which is convenient for application in various IoT hardware terminals.

The ESP32-CAM Development Board with camera doesn’t come with a USB connector, so you need an USB to TTL/Serial adaptor/converter to upload code through the  serial pins (U0R and U0T pins).

Features:

  • The smallest 802.11b/g/n Wi-Fi BT SoC Module
  • Low power 32-bit CPU,can also serve the application processor
  • Up to 160MHz clock speed,Summary computing power up to 600 DMIPS
  • Built-in 520 KB SRAM, external 4MPSRAM
  • Supports UART/SPI/I2C/PWM/ADC/DAC
  • Support OV2640 and OV7670 cameras,Built-in Flash lamp.
  • Support image WiFI upload
  • Support TF card
  • Supports multiple sleep modes.
  • Embedded Lwip and FreeRTOS
  • Supports STA/AP/STA+AP operation mode
  • Support Smart Config/AirKiss technology
  • Support for serial port local and remote firmware upgrades (FOTA)

Specifications:

  • Dimensions 40.5mm x27mm x4.5mm
  • Weight G.W 20g
  • Battery Exclude
  • Package DIP-16
  • SPI Flash Default 32Mbit
  • RAM 520KB SRAM +4M PSRAM
  • Bluetooth Bluetooth 4.2 BR/EDR and BLE standards
  • Wi-Fi 802.11 b/g/n/
  • Support interface UART,SPI,I2C,PWM
  • Support TF card Maximum support 4G
  • IO port 9
  • UART Baudrate Default 115200 bps
  • Image Output Format JPEG( OV2640 support only ), BMP,GRAYSCALE
  • Spectrum Range 2412 ~2484MHz
  • Antenna Onboard PCB antenna, gain 2dBi
  • Transmit Power 802.11b: 17±2 dBm (@11Mbps); 802.11g: 14±2 dBm (@54Mbps); 802.11n: 13±2 dBm (@MCS7)
  • Receiving Sensitivity CCK, 1 Mbps : -90dBm; CCK, 11 Mbps: -85dBm; 6 Mbps (1/2 BPSK): -88dBm; 54 Mbps (3/4 64-QAM): -70dBm; MCS7 (65 Mbps, 72.2 Mbps): -67dBm
  • Power Dissipation Turn off the flash lamp:180mA@5V; Turn on the  flash lamp and turn on the brightness to the maximum:310mA@5V; Deep-sleep: Minimum power consumption can be achieved 6mA@5V; Moderm-sleep: Minimum up to 20mA@5V; Light-sleep: Minimum up to 6.7mA@5V
  • Security WPA/WPA2/WPA2-Enterprise/WPS
  • Power Supply Range 5V
  • Operating Temperature -20 ℃ ~ 85 ℃
  • Storage Environment -40 ℃ ~ 90 ℃ , < 90%RH

In the package you will get 1 x ESP32-CAM Development Board, 1x camera Module-OV2640-FPC-24P-0.5mm-21mm- 2 Megapixel and 2x headers-2.54mm-1x8pin.  

On-Board vs IPEX Antenna

ESP32-CAM Development Board with camera can be with the antenna jumper set for an external antenna or for the on-board antenna. You can see the two different settings below:

If you have a low frame rate or poor reception this might be the problem. You can either move the jumper with a bit of very careful soldering or buy an IPEX WiFi antenna which will improve the signal.

Applications:

  • We can easily build a simple camera with this board and save the photos in an SD card using the embedded SD card slot the board offers.
  • We can then modify this project to detect humans and save an image when one is detected.
  • We can recognize human faces and act accordingly.
  • We can build a surveillance camera with the ESP32 Cam board.
  • We can also stream video using this board.

You can find the ESP32-CAM schematic here, ESP32-CAM development board specification is here, camera specification is here.

Signals and connections of the ESP32-CAM Development Board with camera

ESP32-CAM pinout:

You can read more about ESP32-CAM GPIOs here.

Wiring

ESP32-CAM module    FTDI programmer

U0TXD (GPIO 1)          RXI                   

U0RXD (GPIO 3)         TX0

GND                          GND

5V                             5V

Connect GND and GPIO0 – just for flashing. Many FTDI programmers have a jumper that allows you to select between 3.3V or 5V. Make sure the jumper is on 5V.   

ESP32CAM HOW TO UPLOAD

Please note: the order of the FTDI programmer’s pins on the diagram may not match yours. Make sure you check label next to each pin on ESP32-CAM development board.

Step by Step instruction

1. Adding ESP32 platform to Arduino IDE

To program the ESP32-CAM development board with Arduino IDE, you need to have Arduino IDE installed as well as the ESP32 add-on.

If you previously installed the hardware libraries for the ESP32 using the old method you need to delete them. Find the folder where your Arduino libraries are kept by opening File -> Preferences in the Arduino IDE. See the sketchbook location field. Click on Browse button. Inside Arduino folder open the hardware folder and find and delete either the esp32 folder or espressif folder.

We are using PC with Windows 7 OS.

1.Download and install the latest Arduino IDE version Windows Installer. You can download it here.

2.Open Arduino IDE. 

3.Open the Preferences window from the Arduino IDE. Go to File -> Preferences.

4.Paste the following line into the Additional Boards Manager URLs fieldhttps://dl.espressif.com/dl/package_esp32_index.json

5.If you have entries in this field already then add the new line before them but separate them with a comma.

6.Go to Tools -> Board -> Board Manager…

7. Type ESP32, point with mouse cursor on record line found (ESP32 by …) and click on Install button to install the new hardware libraries.

8.When installation done, close and open your Arduino IDE again.

9.You will be able to find all the ESP32 boards in the Arduino IDE’s board selector.

2. Uploading the sketch to the ESP32-CAM Development Board with camera using FTDI programmer

1. Most SD cards work right out of the box, but it’s possible you have one that was used in a computer or camera and it cannot be read by the SD library. It’s not desirable to format SD cards frequently, as it shortens their life span. You’ll need a SD reader and computer to format your card. The library supports the FAT16 and FAT32 filesystems, but use FAT16 when possible. See additional info here. Please note that according to the ESP32-CAM development board specifications, the ESP32-CAM should only support 4 GB SD cards. However, we have tested it with 16 GB SD card and it works very well.

2.Format the SD card as FAT16 or FAT32. Insert the SD card adapter with Micro SD card in your PC. Go to My Computer and right click on the SD card. Select Format…

3.A new window pops up. Select FAT32, press Start to initialize the formatting process and follow the onscreen instructions.

4. Click on Close button when done. Take out and insert the formatted Mirco SD card to TF card slot in ESP32-CAM.

5.Do wiring. Very important: GPIO 0 (IO 0) must be connected to GND otherwise you will not be able to upload code. We use the AI-THINKER ESP32-CAM Development Board.

ESP32-CAM Espressif

6.Attach WiFi antenna (optional). It will help you to increase WiFi range.

7.Attach OV2640 camera.

8. Plug your FTDI programmer into your PC USB port.

9. Open Arduino IDE. Open the sketch.

11. Go to Tools -> Board, select AI Thinker ESP32-CAM.

esp32-cam how to upload

12. Go to Tools -> Port and select the COM port the ESP32-CAM Development Board connected to (we have COM7).

esp32-cam how to upload

13. Click on Upload button in your Arduino IDE.

14.When you see some dots in the debugging window, press the ESP32-CAM Development Board on-board RST (RESET) button to restart your ESP32 in flashing mode.

esp32-cam how to upload code

15. After a few seconds, the code should be successfully uploaded to your board. When you see the “Done uploading” message, you need to remove GPIO0 from GND and press the ESP32-CAM Development Board on-board RST (RESET) button to run your new code.

ESP32-CAM

16. Open Serial Monitor at 115200 bps. You will see the IP address of your ESP32-CAM development board.

ESP32-CAM

17. Open any internet browser (Chrome, IE..) and type the IP Address of your ESP32-CAM development board (We have http://192.168.0.110). Click on CAPTURE button to take a new picture and wait a few seconds for the picture to be saved in SPIFFS. If you click on REFRESH button, the page will update with the latest picture saved. If you need to rotate the picture click on ROTATE button.

esp32-cam
esp32-cam
esp32-cam

Code

First, we include the required libraries to work with the camera, to build the web server and to use SPIFFS. Update local network ssid and password, otherwise your ESP32-CAM development board will be not able to connect to your local network. Then we create an AsyncWebServer object on port 80. The takeNewPhoto boolean variable indicates when it is a time to take a new picture. Then we define the path and name of the picture to be saved in SPIFFS. We define the camera pins for the AI THINKER ESP32-CAM development board. Next, we use the HTML to build the web page. Basically, three buttons created: ROTATE; CAPTURE and REFRESH. Each picture calls a different JavaScript function: rotatePicture(), capturePicture() and reload(). The capturePicture() function sends a request on the /capture URL to the ESP32-CAM development board, so it takes a new picture. The rotatePicture() function rotates the photo. Finally, the next section displays the picture. When, you click on REFRESH button, it will load the latest picture.

In setup() we initialize the serial communication at 115200 bps. Then we connect the ESP32-CAM development board to the local network and initialize the SPIFFS. We print the local IP address of ESP32-CAM development board. The next lines configure and initialize the ESP32-CAM development board camera with the right settings. We need to handle what happens when the ESP32-CAM development board receives a request on a URL. When the ESP32-CAM development board receives a request on the root / URL, we send the HTML text to build the web page. When we click on CAPTURE button, we send a request to the ESP32 /capture URL. So, we set the takeNewPicture variable to true, so that we know it is time to take a new picture. In case there is a request on the /saved-picture URL, send the picture saved in SPIFFS to a connected client. Then we start the web server.

In the loop(), if the takeNewPicture variable is True, we call the capturePictureSaveSpiffs() to take a new picture and save it in SPIFFS. Then, set the takeNewPicture variable to false. There are two other functions in the sketch: checkPhoto() and capturePictureSaveSpiffs().The checkPhoto() function checks if the photo was successfully saved to SPIFFS. The capturePictureSaveSpiffs() function takes a picture and saves it in SPIFFS. This function based on sketch by dualvim.

Troubleshooting

If you have any errors with your ESP32-CAM development board please check our project – Basics: Project 084d ESP32-CAM Development Board with camera – Troubleshooting

Summary

We have learnt in this project how to build a web server that will allow you to take a picture, rotate it, show the latest captured picture (saved in SPIFFS) in your internet browser using ESP32-CAM Development Board with camera.

Thank you for reading and supporting us.

Libraries:

  • All libraries attached on the beginning of the project description
  • ESPAsyncWebServer library. Async HTTP and WebSocket Server for ESP8266 Arduino. For ESP32 it requires AsyncTCP to work To use this library you might need to have the latest git versions of ESP32 Arduino Core. Download, unzip and add to libraries in our PC, for example C:\Users\toshiba\Documents\Arduino\libraries. This link you can find in Preferences of Adruino IDE program which installed in your PC. Alternatively, after downloading the library, you can go to Sketch -> Include Library -> Add .ZIP library… and select the library you have just downloaded. You can read more about it here.
  • AsyncTCP Library.This is a fully asynchronous TCP library, aimed at enabling trouble-free, multi-connection network environment for Espressif’s ESP32 MCUs. Download, unzip and add to libraries in our PC, for example C:\Users\toshiba\Documents\Arduino\libraries. This link you can find in Preferences of Adruino IDE program which installed in your PC. Alternatively, after downloading the library, you can go to Sketch -> Include Library -> Add .ZIP library… and select the library you have just downloaded. You can read more about it here.

Project resources:

  • See attachments on the beginning of this project description

AcoptexCom

Leave a Reply

Your email address will not be published.