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