Editing the ESP32-CAM Camera Web Server HTML

HEX-and-HTML-diagonal.jpg

An easy way to edit or add HTML in the source of the ESP-WHO camera web server example

Using the CyberChef online tool makes it easy to convert from your own HTML to the Gzipped Hex format found in the the index_html_gz variable in the code for Arduino and IDF ESP-WHO libraries.

Where does the HTML come from in the CameraWebServer example?

The third tab from the Sketch  contains some strange looking code assigned to a variable called index_html_gz[]:

index_html_qz Variable

In the app_httpd.cpp tab this variable is used in this code:

index_hander Function

The index_handler function above serves HTML to the browser.

In the video below you can see this strange looking code in the index_html_gz variable magically turning into HTML:

Replacing the HTML

So now we have seen where the HTML comes from. How do we reverse the process so we can edit the HTML or replace it with our own?

Quick version –  Click here to open the CyberChef online tool, edit or paste your HTML in the Input field. The code you need to paste into the Arduino IDE will appear in the Output area. Copy all of it except the first comma.

If you want prefer to manually set it up, go to the https://gchq.github.io/CyberChef/ website on GitHub, drag the following actions from the left menu.

  • From Compression, drag ‘Gzip’
  • From Data Format, drag ‘To Hex’
  • From Utils, drag ‘Split’

Copy the settings as below:

HTML to HEX RECIPE

Now you can make your own page by editing or pasting your own HTML code into the Input window and copying the result (minus the first comma) over the existing code in the Arduino IDE.

When the code has uploaded, refresh the browser and you will see the new page. Once set up, it’s very quick to make an edit to the HTML, copy and paste the new Hex into the IDE, upload and preview.

ESP32-CAM Video Playlist

IF you prefer your tutorials in video format you can visit the Robot Zero One YouTube channel and view the ESP32-CAM playlist here: https://www.youtube.com/channel/UCpqVEutU_Jcq34ws4tyUReQ/playlists

References

Another way of doing this – https://gist.github.com/me-no-dev/f137a950ce6dedb641d427d8db6355d2 if you want to automate it.

6 Replies to “Editing the ESP32-CAM Camera Web Server HTML”

  1. aelorenzo says:

    Hi!

    I am trying to start the streaming web server in the Camerawebserver example in a task for multitask purpose (just run the streaming process in one core and the other task in the second ESP32 core), but I am having issues…

    I think that it is related with the heap size for the task. If a put a low value, ESP32 is rebooting all the time, if a I put a high value, it doesn’t start.

    Do you know if it is possible to calcule the heap size for this tast? I am defining the task code just with the subroutine call startCameraServer().

    Maybe that’s the problem.

    Thank you!

    1. WordBot says:

      Hi, Which camera device are you using?

  2. Cyril says:

    How to do the reverse?

    1. WordBot says:

      The top video shows the hex to html if that’s what you wanted.

  3. Aminu says:

    Hi WordBot thank you very much for all the guides they are very helpful sir, pls how can I change the webserver setting so that I can access the server from anywhere in the world, I want to change the port from 80 to WiFiSever server(8888).
    Thank you

    1. WordBot says:

      You need to do port forwarding. You can change the port numbers in the sketch: https://github.com/espressif/arduino-esp32/issues/2492

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