mercredi 29 janvier 2020

ESP32-CAM: un web server minimaliste


Lors du premier essai de ma ESP32-CAM, j'ai utilisé l'exemple officiel "CameraWebServer", conçu par l'équipe d'Espressif et fourni avec l'IDE Arduino.

Cet exemple a visiblement été créé pour en mettre plein la vue: il créé une page web sophistiquée qui comporte une grande quantité de boutons et de glissières permettant à l'utilisateur de régler tous les paramètres de l'image, d'activer la reconnaissance faciale, etc.  Il s'agit d'un programme assez complexe (1400 lignes de code réparties en 4 fichiers) et souvent nébuleux (les commentaires sont rares!).

Lorsque j'ai voulu apporter quelques modifications à la page web générée par cet exemple, j'ai eu la surprise de constater que son code html a été compressé (gzip) et présenté par une longue suite d'octets dans le fichier camera_index.h: vraiment pas pratique si vous désirez apporter des modifications!


Owen (alias easytarget) a apporté une solution à ce problème: dans sa version améliorée de l'exemple CameraWebServer, le code html de la page web est directement accessible dans le fichier "camera_index_ov2640.h": c'est beaucoup plus facile de comprendre comment la page web est générée, et d'y apporter des modifications. Owen a pris soin de préserver toutes les fonctionnalités de l'exemple officiel, et en a même ajouté quelques-unes (contrôle du flash et de la LED indicatrice, par exemple).

La version easytarget est donc devenue mon nouveau point de départ. Mais le programme demeure lourd: qu'est-ce qui fait quoi, exactement? Pas facile de s'y retrouver.

Je me suis donc donné comme mission de produire un sketch qui ne fera qu'une seule chose: afficher dans une page web l'image vidéo de l'ESP32-CAM. Ça a donné le sketch de 225 lignes présenté ci-dessous.

Le sketch

Dans ma version simplifiée, la page web générée par l'ESP32-CAM ne présente rien d'autre que l'image vidéo: l'utilisateur ne dispose d'aucun bouton qui lui permettrait de modifier le contraste, la luminosité, etc.

Je me suis également permis, très égoïstement de ne conserver que ce qui concerne le modèle d'ESP32-CAM que je possède (AI Thinker). Certaines modifications devront être apportées au sketch si vous désirez l'utiliser sur un autre modèle.

La routine "stream_handler()" s'occupe du "stream server": elle gère l'affichage en direct de l'image vidéo. La version officielle comportait certaines instructions liées à la reconnaissance faciale, qui ont été retirées.

La routine "web_handler()" construit la page web. Cette modeste page web est logée dans un tableau de 175 caractères.

La routine "startCameraServer()" démarre le web server et le stream server.

setUp() initialise la caméra et établit la connexion au réseau WiFi, et loop() n'a rien à faire puisque tout sera géré par stream_handler() et web_handler().

-
-

Utilisation

Au démarrage, l'adresse IP de la caméra est affichée dans le moniteur série.


On colle cette adresse dans un navigateur web pour accéder en direct à la vidéo.



À lire également

Première utilisation de l'ESP32-CAM avec l'IDE Arduino ,  enregistrer des photos sur la carte microSD, time-lapse avec l'ESP32-CAMles LEDs de l'ESP32-CAM, mouvement panoramique avec servomoteur.

Yves Pelletier (TwitterFacebook)


6 commentaires:

  1. Bonjour,
    Merci pour votre partage et pour sa clarté.
    Sur un sonoff à base d'ESP8266, j'avais fait une routine qui indiquait l'ipv4 en faisant clignoter la led à l'initialisation, bien pratique pour s'y connecter quand on n'a plus la possibilité du moniteur série.
    La voulez-vous ?
    Bonne continuation.

    RépondreSupprimer
  2. Bonjour,
    Merci pour cette page !
    Je m'en suis servi pour créer une petite caméra arrière afin de faciliter l'attelage d'une remorque et de faire la vérification des feux quand je suis seul. Bien pratique !
    Cordialement,
    Eric

    RépondreSupprimer
  3. Bonsoir,
    Afin que mes enfants puissent suivre l'évolution des graines qu'ils plantent, j'ai eu l'idée d'en faire une photo chaque nuit à 1h. Pour l'instant j'ai un sonoff qui récupère l'heure nft sur la toile et allume 5 minutes les plantes. Je n'arrive pas à programmer la prise d'une photo avec esp32-cam à un moment donné (la dérive de millis() est trop grande). Dans la foulée, ça permettrait de dater les photos et pour aller plus loin, d'incruster la date sur la photo. Mais je n'arrive pas à avancer, des suggestions ou un tuto seront les bienvenus. Merci. En attendant c'est le sonoff qui déclenche la photo avec une perche selphie connectée en bluetooth à mon smartphone : trop gourmand en énergie, trop moche comme montage, il faut que chaque soir je pense à repositionner précisément mon smartphone, (mais le cadrage n'est jamais le même). Merci de votre attention.

    RépondreSupprimer
  4. Bonjour, afin d'avoir une heure juste, il faut demander à l'ESP32 de récupérer l'heure sur fr.pool.ntp.org par exemple. Moi je le fais tous les jours afin de rester précis (peux-tu est-ce top mais bon ...)
    si l'anglais ne vous rebute pas : https://randomnerdtutorials.com/esp32-date-time-ntp-client-server-arduino/

    RépondreSupprimer
  5. Bonjour
    Bravo pour votre serveur mini.
    La ligne 140 http_register_uri_handler(camera_httpd,&index_uri);
    ne doit-elle pas être remplacée par:
    http_register_uri_handler(camera_httpd,&web_uri);
    ?

    RépondreSupprimer
  6. Bns, est-il possible de stocker, en plus du streaming, les images (ou la video) sur le SDcard ?

    RépondreSupprimer