CameraWebServer

Introduction

The CameraWebServer project is an C project for the ESP32-CAM. The aim of this project is to display the picture of the embedded webcam (OV2640) on a Web page. This picture can be tuned thanks to many functionalities (brightness, contrast, size, white balance, filter, …)

Here, I will update this project to pilot some outputs available on the ESP32-CAM board. I will also update the html page in order to remove all unused functions (white balance, filters, gain, …).

In the first step, I explain the original project. Then, the html page will be updated to display only necessary informations (picture, size, motor action, LED activation). Once the html page is ready, the code source in C should be updated to match the html page.

Original project

The original project is an Arduino project. This project used 4 files:

  • camera_index.h — contains index.html.gz as byte array for serving

  • app_httpd.cpp — the WebServer app

  • camera_pins.h — #defines for 16 camera GPIO pins needed for different ESP32 models

  • CameraWebServer.ino — the CameraWebServer Arduino sketch

camera_index.h

The html page is written in the table “index\**ov2640\**html\_gz[]” stored inside the file “camera_index.h” (see below). Note there is the length of the table. This length must be adapted to the table size.

//File: index_ov2640.html.gz, Size: 4316
#define index_ov2640_html_gz_len 4316
const uint8_t index_ov2640_html_gz[] = {
0x1F, 0x8B, 0x08, 0x08, 0x50, 0x5C, 0xAE, 0x5C, 0x00, 0x03, 0x69,
0x6E, 0x64, 0x65, 0x78, 0x5F, 0x6F, 0x76, 0x32, 0x36, 0x34, 0x30,
0x2E, 0x68, 0x74, 0x6D, 0x6C, 0x00, 0xE5, 0x5D, 0x7B, 0x73, 0xD3,
0xC6, 0x16, 0xFF, 0x9F, 0x4F, 0x21, 0x04, 0x25, 0xF6, 0x34, 0x76,
0x6C, 0xC7, 0x84, 0xE0, 0xDA, 0xE2, 0x42, 0x08, 0xD0, 0x19, 0x5E,
0x25, 0x2D, 0x74, 0xA6, 0xD3, 0x81, 0xB5, 0xB4, 0xB2, 0x55, 0x64,
0xC9, 0x95, 0x56, 0x76, 0x52, 0x26, 0x9F, 0xE3, 0x7E, 0xA0, 0xFB,
0xC5, 0xEE, 0xD9, 0x87, 0xA4, 0x95, 0xBC, 0x7A, 0xD8, 0x26, 0x36,
0x97, 0xEB, 0xCC, 0x14, .................................... }

CameraWebServer.ino

This main file stores the C code to manage the ESP32.

Update the project

Web page: camera_index.h

Main method

First, we should get the Web page (table “index\**ov2640\**html\_gz[]”) in a human readable format because the content of this table is a compress Web page. In order to have an html text content, follow the actions:

  1. Copy/past the content ONLY of the table at <https://gchq.github.io/CyberChef/>. You should have:

0x1F, 0x8B, 0x08, 0x08, 0x50, 0x5C, 0xAE, 0x5C, 0x00, 0x03, 0x69,
0x6E, 0x64, 0x65, 0x78, 0x5F, 0x6F, 0x76, 0x32, 0x36, 0x34, 0x30,
0x2E, 0x68, 0x74, 0x6D, 0x6C, 0x00, 0xE5, 0x5D, 0x7B, 0x73, 0xD3,
0xC6, 0x16, 0xFF, 0x9F, 0x9F, 0xE3, 0x7E, 0xA0, 0xFB, 0xC5, 0xEE,
0xD9, ...............

  1. Drag the bloc “Find / Replace” in order to remove all comma and space. You should have:

0x1F0x8B0x080x080x500x5C0xAE0x5C0x000x030x690x6E0x640x650x780x5F0x6F0x76 0x320x360x340x300x2E0x680x740x6D0x6C0x000xE50x5D0x7B0x730xD30xC60x160xFF 0x9F0x4F...............

  1. Drag the bloc “From HEX” (and delimiter “0x”) to convert data from hexadecimal format. You should have:

......P\®..index_ov2640.html.å]{sÓÆ.ÿ.O!.%ö4vlÇ.àÚâB.Ð.^%-t¦Ó.µ´²UdÉ.VvR&. ã~ ûÅîÙ.¤.¼zØ&6.ëÌ.ÙÚsö.ó;¯]=:¼mù&¹.cmJf®qkÈÿÑà3.bdñCöu. ÒÌ) BLFzDìÖ©.?í¡..é../ç~@tÍô=.=.¾t,2.Yxá.¸Å¾.:.C.ä¶B.¹xÔ.y..¸Ø8¿x{ÜÓÞ¼ïõO:Ã#þ [:&$Wòwú.ûÖ.ö%ó.ýØ

  1. Optional: if you want to know what is the type of the data, drag a “Detect File Type” (check the Archives box). You should have:

File type: Gzip
Extension: gz MIME
type: application/gzip

  1. Finally, drag a “Gunzip” bloc (and disable the “Detect File Type” if checked). You should have the html:

<!doctype html>
<html>
<head>
 <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1">
 <title>ESP32 OV2460</title>
   <style>
   body {
     font-family: Arial,
     Helvetica,sans-serif;
     background: #181818;
     color: #EFEFEF;
     font-size: 16px
   }
   h2 {
     font-size: 18px
     ........

Build the new table

After to update the Web page to your needs, the Web page should be converted again in a compress data. Data will be then stored into the same table at the beginning. Process as follow:

  • Drag the bloc “Gzip” from “Compression”. Select “Dynamic Huffman Coding” and “index.hml.gz”.

  • Drag the bloc “To Hex” from “Data Format” with “Delimiter” set at “0x”

  • Drag the bloc “Split” from “Utils”. Choose “0x” for “Split delimiter” and “,0x” for “Join delimiter”

Alternative

Utilities have been developed by [Hermann Stamm-Wilbrandt](https://github.com/Hermann-SW). They allow to unzip/zip a Web page. They are available at <https://github.com/Hermann-SW/Raspberry>*v1*camera*global*external_shutter/tree/master/FCameraWebServer

Available pin on ESP32-CAM AI-Thinker

To be confirm

Following pin are connected to the microSD card. As the microSD card is not used, they could be used for the door command and door state.

pin

functionnality

use

GPIO 14

CLK

column 3

GPIO 15

CMD

GPIO 2

Data 0

GPIO 4

Data 1

on-board Led

GPIO 12

Data 2

GPIO 13

Data 3
ASUS Merlin Miscellaneous