Personalizar el HTML de CameraWebServer de ESP32-CAM

El ejemplo CameraWebServer de ESP32-CAM es una herramienta muy buena para hacer un streaming mediante webserver de tu cámara basada en ESP32, pero tiene una complicación. El código HTML que muestra en pantalla parece imposible de modificar a simple vista. Esto es debido a que viene codificado, por lo que vamos a ver como Decodificar y volver a Codificar el HTML de dicho ejemplo.

Como decodificar el código (Hex –> HTML)

Lo primero es localizar cual es el código en hexadecimal que deseamos pasar a HTML. El ejemplo CameraWebServer se encuentra entre los ejemplos de la librería ESP32-CAM en el apartado Ejemplos/ESP32/Camera/CameraWebServer. Una vez abrimos este ejemplo, hay una pestaña llamada camera_index.h donde se encuentra el HTML codificado.

Para decodificarlo de HEX a HTML, seguiremos los siguientes pasos:

Accedemos a https://gchq.github.io/CyberChef/

Se nos abre una pagina web en la que podemos hacer infinidad de conversiones de formatos entre ellos la deseada para nuestro código.

Vamos a copiar el código en Hexadecimal de la pestaña camera_index.h. Por si no tenéis el código a mano, dejamos a continuación un pequeño código en HEX para hacer poder seguir esta guía de forma empírica:

0x1f, 0x8b, 0x08, 0x08, 0x1d, 0x66, 0x9e, 0x60, 0x00, 0xff, 0x69, 0x6e, 0x64, 0x65, 0x78, 0x2e, 0x68, 0x74, 0x6d, 0x6c, 0x2e, 0x67, 0x7a, 0x00, 0x4d, 0x8e, 0xc1, 0x0a, 0xc2, 0x30, 0x10, 0x44, 0xef, 0x7e, 0xc5, 0xf8, 0x03, 0xe6, 0x07, 0x96, 0x5e, 0xb4, 0xe0, 0x41, 0xd1, 0x43, 0x2e, 0x1e, 0x57, 0xba, 0x76, 0x03, 0x69, 0x13, 0xda, 0x80, 0xfa, 0xf7, 0x8d, 0x5d, 0x44, 0x97, 0xc0, 0xce, 0x83, 0x99, 0xcc, 0xd2, 0xf6, 0x70, 0xd9, 0xfb, 0xdb, 0xb5, 0x85, 0x96, 0x21, 0x36, 0x1b, 0xb2, 0x85, 0x3a, 0xa4, 0xc2, 0x9d, 0xc9, 0x15, 0x4b, 0x28, 0x51, 0x9a, 0xf6, 0xc5, 0x43, 0x8e, 0x42, 0xce, 0xd0, 0x9c, 0xee, 0x67, 0xa5, 0x7b, 0xea, 0xde, 0x7f, 0xa9, 0xdc, 0x78, 0x0d, 0x33, 0xea, 0xe3, 0x11, 0x62, 0x61, 0xa4, 0x07, 0x18, 0x73, 0x58, 0xf5, 0xd1, 0x9f, 0x4f, 0xc8, 0xdc, 0x0b, 0x9e, 0xa1, 0x28, 0xd2, 0x28, 0x95, 0x26, 0xee, 0x27, 0xce, 0xba, 0x23, 0x97, 0xbf, 0x15, 0xf6, 0x6f, 0xad, 0xfa, 0x1c, 0xb8, 0x00, 0x04, 0x63, 0x2e, 0x09, 0xb7, 0x00, 0x00, 0x00

Una vez copiado el código HEX, lo pegamos en el apartado Input de la web que hemos abierto anteriormente

A continuación procederemos a configurar la web para que nos haga la conversión. En la parte superior izquierda tenemos un buscador. escribiremos en el buscador “Remove whitespace” Haremos dobleclick sobre el “Remove whitespace” que aparecerá debajo del buscador y esta opción pasara a aparecer en verde en la columna “Recipe”. De esta opción tendremos que dejar solo marcadas las opciones “Spaces” y “Line feeds”. Quedaria algo así:

A continuación vamos a traducir el código en hexadecimal añadiendo la opcion From Hex (mismo proceso que antes: Buscador copiar “From Hex” y dobleclick en el resultado para activarlo) y en el campo Delimiter selecionaremos 0x with comma. Con cada acción que hacemos el apartado Output se va actualizando.

Deberían quedar algo parecido a esto:

Y ya para ver nuestro HTML tal i como estamos acostumbrados solo nos faltará el último elemento del “Recipe” que se llama Gunzip. Lo buscamos y lo añadimos e inmediatamente veremos como el Output nos muestra un HTML normal y corriente. Tal y como podemos observar en la siguiente imagen (Si haces click en la imagen te llevará a la web con la configuración del ejemplo).

Y así acabaría el proceso para decodificar un código en hexadecimal a un HTML.

En el caso de CameraWebServer para ESP32 debemos decodificar el código principal hacer la modificaciones necesarias y volver a codificarlo para que el programa de Arduino lo procese correctamente.

Como codificar el código (HTML–>Hex)

Para volver a codificar el código para que sea reproducible por el código de CameraWebServer deberemos ir a la web https://gchq.github.io/CyberChef/ que es un conversor de formatos como hemos visto anteriormente.

Y nos debería aparecer algo así:

A continuación voy a dejar un pequeño código de ejemplo en HTML por si no tenéis ninguno a mano.

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <p>This is an example of a simple HTML page with one paragraph.</p>
    </body>
</html>

Copiamos el HTML que deseamos codificar para correr en el ejemplo de CameraWebServer de ESP32-CAM y pegamos el HTML en el apartado Input de la web anteriormente mencionada.

Seguidamente buscamos en el buscador de operaciones Gzip y lo añadimos, en el apartado “Compression type” seleccionamos Dynamic Huffman Codding y en “Filename (optional)” escribimos index.html.gz. Con todo esto debería quedarnos algo así:

A continuación hay que pasar estos valores a Hexadecimal, así pues añadimos la pestaña de operación To Hex y le ponemos la opción 0x with comma en el campo Delimiter:

Después ya solo nos queda separar estos valores con una coma y un espacio para que quede ordenado y el programa de Arduino lo pueda interpretar correctamente para ello añadimos la opción Split y ponemos en “Split delimiter” “,” (símbolo de coma) y en Join delimiter “, ” (símbolo de coma y un espacio). La conversión debería quedar así.

Y con esto ya tendríamos nuestro HTML convertido en Hexadecimal preparado para ejecutarlo desde el programa de ejemplo CameraWebServer de la biblioteca ESP32-CAM de Arduino.