5 astuces pour ESP32-CAM. Adresse IP fixe. Mode AP. Rotation image 90°. Récupération automatique connexion WiFi. stockage du code HTML

L’exemple CameraWebServer pour l’ESP32-CAM livré avec la librairie ESP32 est très bien pour tester et découvrir les fonctionnalités de la caméra. Le code est assez difficile à comprendre (surtout lorsqu’on débute) et surtout à modifier lorsqu’on veut développer une petite caméra de surveillance DIY. Je vous propose pour ce nouveau projet une version ultra-simplifiée du code qui intègre les principales fonctions que vous avez demandé dans les commentaires, à savoir comment attribuer une adresse IP fixe à l’ESP32-CAM, comment démarrer en mode AP (Access Point), comment re-démarrer automatiquement en cas de perte de connexion WiFi ou d’indisponibilité du réseau, comment faire une rotation de l’image de 90°

Dans le tutoriel précédent, j’avais fait une modification de l’exemple CameraWebServer afin que celui-ci diffuse une image fixe plus facile à intégrer sur un serveur domotique qu’un flux MJEG. (domoticz, home assistant, jeedom, node-red).

Dans ce nouveau projet, je vous propose une version ultra-simplifiée du code et les principales fonctions demandées dans les commentaires. Vous pouvez accéder directement au paragraphe en suivant le lien

Comment attribuer (fixer) l’adresse IP de l’ESP32-CAM ?Comment démarrer l’ESP32-CAM en mode Access Point (AP) ?Comment faire un re-connexion automatique en cas de perte ou d’indisponibilité du réseau WiFi ?Code simplifié avec une interface HTMLComment stocker le code HTML de l’interface sous la forme d’une longue chaîne sur la mémoire Flash de l’ESP32Comment faire une rotation de 90° de l’image ?Code complet du projet ESP32-CAM

Le code a été développé avec une carte ESP32-CAM générique de type AI Thinker. Il devrait cependant fonctionner parfaitement à l’identique sur les cartes M5Stack et TTGO notamment.

Pour une application de vidéo surveillance, on trouve des modules OV2640 avec une optique de type fisheye pouvant atteindre jusqu’à 160° (au lieu de 78° en standard) qui est mieux adaptée.

Remarque concernant les librairies WiFiManager et esp_http_server.h

L’idéal serait de pouvoir saisir les paramètres de connexion au réseau WiFi lorsqu’on met en service la caméra ESP32-CAM.

Une version de la librairie WiFiManager est en cours de développement est disponible pour l’ESP32.

Malheureusement la librairie WiFiManager rentre en conflit avec la librairie esp_http_server.h du SDK ESP-IDF utilisée dans ce projet.

1. Attribuer (fixer) l’adresse IP de l’ESP32-CAM

Une adresse IP est automatiquement attribuée à l’ESP32-CAM lorsqu’il se connecte pour la première fois au réseau WiFi. La plupart des routeurs / box internet conservent cette adresse d’une part par optimisation, d’autre part pour nous faciliter la vie. En cas de panne ou de remplacement de matériel (routeur, box internet), l’adresse IP va changer, ce qui peut s’avérer être un problème pour une caméra de surveillance !

L’ESP32-CAM est avant tout une carte de développement ESP32. Le module caméra utilise plusieurs broches de l’ESP32 pour envoyer le flux vidéo. Le code est absolument identique à ce qu’on a déjà pu faire dans ce tutoriel.

Pour attribuer l’adresse IP du module ESP32-CAM, il suffit de définir les paramètres de connexion avant d’appeler la méthode WiFi.begin(). Voici un exemple de configuration. L’ESP32-CAM aura l’adresse IP fixe 192.168.1.80 sur le réseau local. La box internet (ou le routeur est à l’adresse 192.168.1.1). Il ne vous reste qu’à adapter les paramètres à votre configuration réseau.

#define USE_FIXED_IP false// L’adresse IP que vous souhaitez attribuer à l’ESP32-CAM. Attention à ne pas utiliser une adresse existante !IPAddress local_IP(192, 168, 1, 80);// Adresse du routeur ou de la box internetIPAddress gateway(192, 168, 1, 1);IPAddress subnet(255, 255, 0, 0);IPAddress primaryDNS(8, 8, 8, 8); //optionalIPAddress secondaryDNS(8, 8, 4, 4); //optional

Pour attribuer l’adresse IP fixe, il suffira de passer à constante USE_FIXED_IP à true dans le code source du projet.

Démarrer l’ESP32-CAM en mode Access Point (AP)

Le mode AP pour Access Point permet de se connecter directement à l’ESP32-CAM. La caméra n’est pas connectée au réseau WiFi local, ni à internet. C’est un mode de fonctionnement privé en quelque sorte.

Il n’y a presque rien à faire pour activer le mode AP. Pour se connecter au réseau WiFi, on utilise la méthode WiFi.begin(). Pour démarrer l’ESP32 en mode AP, il suffit d’exécuter la méthode WiFi.softAP(ap_ssid, ap_password) à la place. Les paramètres de la méthode sont les suivants :

Pour activer le mode AP, il suffit de mettre la constante AP_MODE à true dans le code du projet

Re-connexion automatique en cas de perte ou d’indisponibilité du réseau WiFi

Problème récurrent avec l’ESP32-CAM, la re-connexion automatique en cas de perte de connexion du réseau WiFi. C’est essentiel d’avoir une fonction de re-connexion automatique surtout lorsqu’on utilise l’ESP32-CAM comme caméra de surveillance.

Plutôt que de re-démarrer l’ESP32 à l’aide de la méthode ESP.restart(), je vous conseille plutôt de plonger l’ESP32 en sommeil profond durant une certaine période. Contrairement à l’ESP8266, il n’y a rien à prévoir coté matériel pour activer le mode deep-sleep de l’ESP32.  2 lignes de codes suffisent !

void restartESP32Cam(){ esp_sleep_enable_timer_wakeup(uS_TO_S_FACTOR * TIME_TO_SLEEP); esp_deep_sleep_start();}

Vous trouverez beaucoup d’autres informations sur la mise en sommeil des modules ESP32 (et de facto l’ESP32-CAM) en lisant cet article détaillé.

Ensuite, il suffit compter le nombre de tentatives d’échec de connexion au démarrage et d’appeler la méthode restartESP32Cam lorsqu’on dépasse un seuil

WiFi.begin(ssid, password);while ( WiFi.status() != WL_CONNECTED) { delay(500); Serial.print(« . »); wifi_counter++; if ( wifi_counter > wifi_try ) { restartESP32Cam(); }}

Une fois démarré, il suffira de tester à chaque passage dans la boucle loop que la connexion est toujours disponible et d’appeler la mise en veille si ce n’est pas le cas.

void loop() { if ( WiFi.status() != WL_CONNECTED ) { // On vient de perdre la connexion WiFi restartESP32Cam(); } delay(10);}

Et voilà, maintenant dès l’ESP32-CAM sait se reconnecter automatiquement en cas de perte de connexion du réseau WiFi. Si votre ESP32-CAM fonctionne sur batterie, celle-ci ne sera pas drainée. Il faudra juste décider du temps durant lequel l’ESP32-CAM est mis en sommeil (deep-sleep). L’idéal serait d’avoir un système de secours basé sur LoRa afin de détecter une perte de connexion WiFi. C’est le principe utilisé notamment par Verisure qui dispose d’un canal Sigfox pour son système d’alarme en cas de coupure de courant.

Code de l’interface HTML simplifié

Vous avez certainement vu que le code de l’interface HTML de l’exemple CameraWebServer est compressé au format GZIP dans le fichier camera_index.h.

En voici un petit extrait par curiosité

//File: index_ov2640.html.gz, Size: 4316#define index_ov2640_html_gz_len 4316const 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,….}

C’est une excellente idée car il n’est pas nécessaire de téléverser séparément l’interface HTML que l’on doit normalement placer dans le dossier data du projet Arduino.

Voici deux articles qui expliquent comment intégrer des fichiers HTML, CSS, JS à un projet ESP32 ou ESP8266 (le fonctionnement est identique).

Le problème lorsqu’on débute, c’est qu’on ne peut pas modifier ce fichier, ni même s’en inspirer pour développer sa propre interface.

Voici une version ultra-simplifié que vous pouvez utiliser dans vos projets. Il diffuse le flux vidéo MJPEG de façon fluide sur n’importe quel navigateur. Vous trouverez également deux boutons qui permettent de tourner l’image vers la gauche ou la droite de 90° à chaque fois.

On serait tenter d’utiliser une chaine pour stocker le code HTML de la page mais c’est très rapidement difficile à gérer et à écrire. Regardez par exemple cet extrait de code HTML. On doit ajouter à la fin de chaque ligne le code n pour renvoyer à la ligne et mettre entre guillemets chaque ligne… des heures de mise au point !

const char http_index_hml[] = « n » »n » » n » » n » » n »…

Stocker le code HTML de l’interface dans une variable PROGMEM R”===()===”

A la place, on va utiliser l’opérateur C++ R qui permet de stocker n’importe quelle chaîne. Le R signifie “Traitez tout ce qui se trouve entre ces délimiteurs comme une chaîne brute”. Tout est expliqué en détail ici.

Le code de l’interface HTML sera donc stocker entre deux délimiteurs comme ceci.

R »delimiteur(code html de la page)delimiteur »

La chaîne entre les deux délimiteurs peut avoir n’importe quelle longueur et contenir n’importe quel caractère. Ce qui est important, c’est d’avoir le même délimiteur avant et après la chaîne.

Comme le code HTML peut être très long, il est préférable de le placer dans la mémoire flash plutôt que dans la SRAM, où il irait normalement. On peut faire cela à l’aide du mot clé PROGMEM qui est un modificateur de variable (documentation).

Voici le code source de la page HTML plus facile à manipuler. Vous pouvez même utiliser un générateur de code HTML puis le coller dans votre code pour aller encore plus vite !

const char index_html[] PROGMEM = R »=====( .row { display: flex; } .leftcol { flex: 30%; } .rightcol { flex: 70%; }

)===== »;

Voici quelques articles pour vous aider à concevoir vos interfaces HTML.

Si vous débuter en programmation C++ et les interfaces HTML, vous pouvez commencer par lire cet article plus détaillé

Comment faire une rotation de 90° de l’image

Il n’existe aucune fonction native permettant de faire une rotation directe de l’image. On dispose simplement des méthodes set_vflip et set_hmirror qui permettent respectivement d’inverser l’image verticalement (vflip) ou horizontalement (hmirror).

Le seul moyen de tourner l’image et donc de prévoir l’angle directement au niveau du montage ou de faire une rotation “logicielle”.

Sur un navigateur internet, c’est très facile, vous pourrez vous inspirer de la méthode sur un logiciel domotique. Il suffit en effet de faire une transformation de type rotate sur l’image. On indique simplement l’angle souhaité en degrés. Tout se passe coté navigateur, il n’y a aucune interaction avec le code Arduino du projet ESP32.

document.getElementById(« stream »).style.transform = ‘rotate(‘ + deg + ‘deg)’;

Code complet du projet

Voici le code source complet de l’exemple que vous pouvez également récupérer directement sur GitHub. Le projet peut être compilé à l’aide de l’IDE Arduino ou de PlatformIO.

Lisez cet article pour débuter votre projet ESP32-CAM et PlatformIO

Le code source peut servir de base pour le développement de votre propre caméra de surveillance par exemple. Pour compiler avec l’IDE Arduino, renommer le fichier main.cpp en main.ino par exemple.

La base du code est identique à l’exemple CameraWebServer. Il utilise la librairie standard esp_http_server.h du SDK ESP-IDF. Deux ports sont utilisés. Le port 80 pour gérer l’interface avec l’utilisateur. Le port 81 sur lequel est envoyé le flux vidéo au format MJPEG.

Le code a été développé avec une carte ESP32-CAM générique de type AI Thinker. Il devrait cependant fonctionner parfaitement à l’identique sur les cartes M5Stack et TTGO notamment.

Modules ESP32-CAM génériques

TTGO T-Camera avec détecteur de mouvement PIR

TTGO T-Camera Plus avec écran TFT couleur 1,8″

TTGO T-Journal avec connecteur SMA pour antenne externe et écran OLED

Voir d’autres modules ESP32-CAM

Mises à jour

09/12/2020 Publication de l’article

English Version

ESP32-CAM. Broches et équipements ESP-EYE, AI Thinker, TTGO T-Camera, M5Stack Timer Camera…ESP32-CAM. Quel modèle choisir ? ESP-EYE, AI Thinker, TTGO T-Camera, M5Stack Timer Camera…ESP32-CAM. Souder l’antenne externe pour améliorer la portée et la stabilité du flux vidéo5 astuces pour ESP32-CAM. Adresse IP fixe. Mode AP. Rotation image 90°. Récupération automatique connexion WiFi. stockage du code HTMLESP32-CAM. Migrer le projet CameraWebServer pour l’IDE Arduino vers PlatformIO

BUI Duy-Huan

See author's posts