Time-lapse Image Capture with ESP32 Cameras

clocks.jpg

Three ways to shoot time-lapse videos from an ESP32 based camera system such as the ESP32-Cam and the ESP-EYE

This tutorial will explain how to use JavaScript to capture images, how to capture and write images to an microSD card reader and also how to capture and send images to a server on the internet. Using one of these techniques you can make time-lapse videos such as these:

Before following this tutorial make sure your camera and Arduino IDE are set up correctly by following this tutorial Ai-Thinker ESP32-CAM in the Arduino IDE

Time-lapse Capture via JavaScript

This is the easiest way to capture time-lapse images from your camera. It works using JavaScript in a web page to request a new image from the camera at an interval you choose.

JavaScript Version Screenshot

Download JavaScript Time-lapse

Paste the script above into a new Sketch and upload it to your device. Reset the device, look for the IP address in the Serial Monitor and connect to that IP address with your browser.

You can speed up or slow down the speed of the capture using the slider during the process.  When the capture has completed use the ‘Save page as’ menu or Ctrl+s to save the images.

This method doesn’t work it you want to capture thousands of frames because the browser won’t save everything if there are too many images.

 

Capture to the SD Card

The Ai-Thinker has a built-in Micro-SD card reader. This Sketch captures an image at the interval set in the Sketch and saves it to the SD card. If there is an available internet connection the Sketch retrieves the time from the internet and uses this in the filename. If there is no connection, files are named numerically. Be aware that without internet, if the device restarts it will begin overwriting existing files.

Download MicroSD Card Time-lapse

The card must be formatted to FAT32 and be 4GB or less. For some reason the ‘flash’ LED on the front is connected to one of the SD card pins so it glows brightly every time a file is written. I ended up putting black tape over it.

 

Upload a Capture to a Server

This the most complicated approach but once working, it’s the easiest to manage and keep an eye on progress. Every time an image is captured it is sent to a server via http POST for saving. This would make an ideal solution for an online web cam.

Download Time-lapse to Server

Some simple PHP to name and copy the uploaded image to a folder:

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

 

Making the time-lapse video

This is the easiest to follow guide I found to make the time-lapse video from your images: https://www.youtube.com/watch?v=JwF6I0iLGS4

References

Time formatting: http://www.cplusplus.com/reference/ctime/strftime/
Code for SD card: https://github.com/espressif/esp-idf/tree/master/examples/storage/sd_card
Tips for making time-lapse videos: http://www.enriquepacheco.com/10-tips-for-shooting-time-lapse/

2 Replies to “Time-lapse Image Capture with ESP32 Cameras”

  1. Vicente says:

    Hello,

    Congratulations for your post, I’ve tried all the moldes and I have problems with the “Upload a Capture to a Server” model. I never get any picture in the server
    This is the message in the serial monitor.
    Can you please let me know what i’m doing wrong?
    Thank you for your help
    __________
    Taking picture…
    HTTP_EVENT_ON_CONNECTED

    HTTP_EVENT_ON_HEADER, key=Date, value=Tue, 14 May 2019 20:11:51 GMT
    HTTP_EVENT_ON_HEADER, key=Server, value=Apache
    HTTP_EVENT_ON_HEADER, key=Vary, value=Accept-Encoding
    HTTP_EVENT_ON_HEADER, key=Content-Length, value=145
    HTTP_EVENT_ON_HEADER, key=Content-Type, value=text/html; charset=UTF-8
    HTTP_EVENT_ON_DATA, len=145
    HTTP_EVENT_ON_FINISH
    esp_http_client_get_status_code: 200
    HTTP_EVENT_DISCONNECTED

    1. WordBot says:

      It looks like it’s working on the ESP32. Do you have an error log on the server?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

scroll to top