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:
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
6 thoughts on “Modifying the Cam32 Webserver HTML file”
Maybe you don’t need to decode since there is this source is on github
I don’t know if it is the same.
But you still need to encode! You will find a shell script to encode so the link you provided useful for people that cannot use it but…. “click this link” doesn’t have any link 😉
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 🙂
You’re right, absolutely!
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
Good to know. I just edited the cam sketch to provide a 640×480 output as I use the ESP32 cam as an IP camera in Yawcam – http://www.yawcam.com – just add an IP camera and then http://xxx.xxx.x.x:81/stream (where the xx are your camera’s local IP) and then you get motion detection, http streaming, ftp upload etc.
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