Modificar la web embebida de ESP32-Cam CameraWebServer

ESP32-Cam incluye un ejemplo bastante completo de servidor web embebido dentro de la placa. Por si solo puede resultar útil y estaría bien poder modificar la página, personalizarla, quitar opciones o añadir librerias js externas para ampliar su funcionalidad o traducirla. Con solo cambiar la web que incluye el ejemplo tenemos una camada WiFi con un servidor web embebido que nos permite acceder a la misma y sus funcionalidades en remoto. Es una opción muy interesante pero no hay demasiada documentación sobre como hacerlo.

La web se encuentra “escondida” en el código fuente del ejemplo “CameraWebServer” dentro del fichero camera_index.h. La web esta comprimida, para incluirla en el código fuente se ha incluido en forma de un array de bytes (uint8_t) cuyos valores están en hexadecimal.

En le fichero camera_index.h hay dos variables que almacenan la web:

const uint8_t index_ov2640_html_gz[]

const uint8_t index_ov3660_html_gz[]

Que web se usa depende del sensor de la cámara, lo más fácil es probar a reemplazar uno a ver cual devuelve tu placa.

Decodificar la web:

Hay dos maneras de hacerlo, la sencilla y la complicada. La sencilla es tan simple como entrar en la web y click en el botón derecho y “Guardar como…”. Tambien se puede usar herramientas como wget o curl.

La complicada requiere ir al código fuente, seleccionar el código hexadecimal del que se compone el array y con él:

  • Eliminar todos los espacios, comas y saltos de linea
  • Convertir cada bloque de texto “0x**” en un número hezadecimal
  • Descomprimir el resultado que esta comprimido unsado gzip

Para facilitar las cosas he usado CybeChef para crear una receta de para decodificar la web la teneis aquí: decodificador . Solo hay que copiar el código hexadecimal que hay en el array y pegarlo en la parte de “input” automáticamente se obtendrá el código dela web en el “output”.

Podemos usar esta web como base para nuestros cambios.

Codificar la web:

Una vez programada la web de reemplazo hay que hacer los pasos contrarios:

  • Comprimir la web usando el formato gzip
  • Convertimos cada carácter a bytes en hexadecimal en formato “0X**”
  • Cada carácter hexadecimal tiene que estar separado por una coma, si ademas añadimos un espacio y cada cierto numero de bloques un salto de linea quedara visualmente más atractivo.

También he programado un codificador para facilitar la tarea.