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.

13 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

  4. GG says:

    Hello
    Thank you for your tutorial, but I have a problem when I put the file “camera_index.h” in the IDE after modification. Everything is going well for decompression and recompression, but my program is not working as it should. Nothing happens when I want to start streaming video. I even tried to decompress the file and recompress it without changing anything, to find that it did not work after this manipulation.
    Do you have an idea of what is causing this problem, please?
    I search again and again, but I do not know what to do.
    I would like to translate the texts of a menu into French, and also to delete some of them.
    Mer ci tell me what you think please, I’m really lost …

    1. WordBot says:

      Hi, It should work the same. Does it work when you use the example in the IDE? Here’s a video in case you missed something in the tutorial – https://www.youtube.com/watch?v=bIJoVyjTf7g

  5. GG says:

    Hello,
    I really thank you very much, I did well to contact you !!!
    I had just forgotten to note the length of the data to enter them in the IDE, it’s really a stupidity on my part!
    So it works very, very well …
    Thank you, thank you, thank you very much, and congratulations for your work and for your quick response !!!
    I am happy

  6. Dani says:

    To obtain the original html code do the following:
    – copy the hex values of index_ov2640_html_gz[] from camera_index.h to input section of CyberChef
    – in Recipe section use only “From Charcode”, delimiter Comma, Base 16
    – save output to index_ov2640.html.gz

  7. ed says:

    Dani, thanks that helps a bit…but I am not there yet. Seems to be converted to a kind of zip format. In he video I see the last step being clicking unzip…….but I dont see that option anywhere.
    Any pointers?

    1. WordBot says:

      What are you trying to do? Convert your own code to the format needed, or read the code from the camera_index.h file?

  8. ed says:

    OK: this is how to get HTML.
    Use the decoded file as input.
    Clear your recipe by clicking the wastebin
    find and select “From Hex” delimiter auto
    let it convert
    then find and select Gunzip
    let it convert

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