Modifying the Cam32 Webserver HTML file

The standard webserver for the CAM32 module comes with a hoist of options.
If you want to modify that webserver e.g. add a button for the flash or whatever, you need to alter the webserver’s  HTML page.
That however is not as straightforward as it may seem.
Where is that HTML page??

Well, if you look in the ArduinoIDE after loading the example file, there is one file, called ‘camera_index’  and when you open it up,you will see an array called “index_html_gz”. That is the index file…but it is encoded.
So before one can work on it, it needs to be decoded back to html code.
That is not impossible, as there is a site that can do that for us. It is Cyberchef.

If you follow the above link, Cyberchef will open with the proper decode ‘Recipe’ set. You only need to paste in your code (from the array).
In the output window you will see the decoded html file that can be saved.
For efficacy I already did that for you and you can find the decoded html file here.

After you made the desired changes, you need to encode the html page again and that can be done by cyberchef as well. When you click this link, it should give you the proper settings. Only need to use your HTML as input. Then copy the output without the first comma, and use that to replace the content of the “index_html_gz”  array in your camera_index file.

Now I was going to add a flashbutton, but apparently that has been done already. You will also find a pretty decent one right here.
You may also find a randomnerds article about various ESP32cam settings useful.

The Pinout of the ESP32Cam is as follows:
esp32camPins

These pins are internally connected to the Micro SD card reader:

  • GPIO 14: CLK
  • GPIO 15: CMD
  • GPIO 2: Data 0
  • GPIO 4: Data 1 (also connected to the on-board LED)
  • GPIO 12: Data 2
  • GPIO 13: Data 3
Advertisement

6 thoughts on “Modifying the Cam32 Webserver HTML file”

    1. Yes thats true. I already presumed someone had published the decoded html file, but seemed just correct to show both ways 🙂
      Especially as it may come in handy for occasions where the code was not published yet 🙂

      1. As a matter of fact…..I had inserted both links, but they were apparently stripped out because too long (they contained code). So I redone them with just the right settings but not with the code in it. Thanks for pointing it out

    1. Thank you, good to know. That sounds actually a bit like the native software the ESP32cam comes with: then point your browser to ‘192.168.4.1/jpg_stream’ for streaming video, or ‘192.168.4.1/jpg’ for stills, but obviously with more possibilities. I will definitely check out yawcam

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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

%d bloggers like this: