Un intrus dans ma résidence? – Conception du circuit (ESP32cam) #2

Cet article est la seconde et dernière partie de cette mini série concernant l’ESP32cam. S’il vous faut un contexte permettant d’expliquer le titre de celui-ci et comprendre pour quelles raisons je me suis mis à la réalisation d’un tel projet, alors foncez lire la première partie!

Si le contexte vous importe peu et que vous êtes plus intéressé par l’aspect technique du projet, alors la première partie est optionnelle. Je vous la recommande quand même vivement, ne serait-ce que pour profiter de mes talents d’écrivains (pas du tout…).

Pour éviter toute confusion, j’ai choisi de lister les composants et donner le code que j’ai utilisés pour réaliser ce projet avant même l’introduction de l’article. J’ai fait ce choix pour accroitre la clarté de celui-ci. Ne soyez pas étonné si vous ne trouvez pas de liens pour acheter les composants en dessous, ils sont tous ici!

Introduction

Si c’est votre première fois avec l’ESP32cam  et l’arduino IDE, alors il vous faudra tout d’abord installer le gestionnaire de carte et ajouter une URL de gestion de carte supplémentaire. Si vous souhaitez en savoir plus, alors cliquez sur ce lien qui vous redirigera vers un article dédié aux premières utilisations de l’ESP32 avec arduino IDE.

Concernant l’ESP32cam, la carte à sélectionner est la dénommée « AI-Thinker ESP32-CAM » (qui est la version d’espressif de l’ESP32cam). Pensez donc à la sélectionner avant toutes tentatives d’upload!

Premiers test avec l'ESP32cam

Pour trouver le programme de base, j’ai suivi l’excellent article venant du site Randomnerdtutoriel.com nommé « ESP32-CAM Take Photo and Display in Web Server ». Dans cet article, l’auteur nous apprend à prendre une photo. Cette photo est ensuite enregistrée dans la mémoire SPIFFS de l’ESP32cam. Elle est finalement diffusée sur un serveur web, lui-même hébergé sur la carte.

Test du code issu de l’article « ESP32-CAM Take Photo and Display in Web Server »

Le code partagé dans cet article était presque parfait ! Le seul problème est qu’il ne permet pas d’enregistrer et d’afficher plusieurs images. Pour modifier ce paramètre, il va donc falloir effectuer quelques modifications décrites ci-dessous.

Modification de la page web

La page web actuelle contient une division incluant une balise d’image. Cette balise pointe sur le dossier source “saved-photo/” et exploite le fichier nommé “photo”. L’idée est ici de tripler cette ligne en modifiant son dossier source et son ID. Cette manipulation indiquera au serveur web d’afficher 3 images sauvegardées dans les dossiers “saved-photo/photo1”, “saved-photo/photo2” et “saved-photo/photo3”. Les images portent les ID “photo1”, “photo2” et “photo3. Pour un affichage optimal, j’ai également modifié le style de la page pour faire en sorte qu’elles soient les une à côté des autres.

Actuellement il est toujours impossible d’afficher les trois photos même si l’on actionne 3 fois le bouton capture photo. Il faut, pour permettre cela, modifier le code au niveau de l’enregistrement de la photo dans la mémoire SPIFFS.

La photo est affiché 3 fois

Extension de la mémoire pour stocker plusieurs photos

théorie

Le code à suivre repose sur un paramètre primordial qui va nous permettre d’enregistrer plusieurs photos. Ce paramètre c’est la constante stockée sous le nom de variable : FILE_PHOTO.

Celle-ci contient le nom de la photo à enregistrer. On devine assez vite que si ce nom varie, alors on pourra enregistrer des photos nommées différemment. En d’autres termes, on pourra enregistrer plusieurs photos puisque la photo enregistrée à l’emplacement mémoire n ne sera pas écrasée par la photo souhaitant s’enregistrer à l’emplacement n+1.

Une simple variation de la variable n entre 1 et 3 va permettre ceci. L’une des particularités à respecter afin de ne pas saturer la mémoire de l’ESP32cam est que lorsque n=3, n+1=0. Cela veut dire qu’à n=3 la photo sera enregistrée sous le nom de “photo3” et à n+1=1 la photo sera enregistrée sous le nom de “photo1”. Cette nouvelle venue écrasera la précédente “photo1” et ainsi de suite…

pratique

J’ai donc dans un premier temps modifié la fonction capturePhotoSaveSpiffs(). Cette fonction est responsable de l’enregistrement de la photo dans la mémoire SPIFFS. J’ai décidé de lui ajouter un paramètre qui sera le numéro d’image. Une variable ‘name’ est ensuite construite autour de ce paramètre avant d’enregistrer l’image.

Dans un second temps, j’ai créé une variable globale responsable du numéro d’image, qui sera utilisé dans la loop(). Grâce à celle-ci, à chaque action du bouton “CAPTURE PHOTO”, la fonction capturePhotoSaveSpiffs() sera appelée avec un autre nouveau paramètre (modulo 3), l’image “n” sera ainsi enregistrée comme prévu.

Pour que le serveur puisse savoir ou se trouve les photos dans la mémoire de l’ESP32cam, il a également été nécessaire de modifier la partie serveur. J’ai simplement ajouté des lignes au niveau de la gestion du serveur asynchrone. Les emplacements mémoires des images sont ainsi transférés au serveur dès lors qu’une requête est captée provenant de la balise (<img ..). Voici ce que l’on obtient du point de vue serveur web.

3 photos distinctes peuvent être affichées

Ajout de la notion de temps

Dans cette section, nous allons voir comment permettre à l’ESP32cam de connaitre la date et l’heure du jour. Cet aspect du projet est important puisque comme je l’ai évoqué dans la partie 1, il faut que le système de surveillance ne soit actif que la nuit!

N’ayant pas de carte externe pour connaitre l’heure, j’ai décidé de m’appuyer sur des serveurs NTP. Le “Network Time Protocol” a pour mission principale de synchroniser des systèmes via le réseau informatique. Les problèmes que l’on risque de rencontrer concernent les fuseaux horaires (qui comme vous le savez varie selon les pays) ainsi que les changements d’heures saisonniers.

Ces problèmes ont été résolus par le Youtuber Andreas spiess dans sa vidéo : “#299 Tricks to get NTP time for the ESP32cam and the ESP8266 incl. Summer- and Daylight Saving time”.

Extrait de la vidéo de Andreas Spiess

Implémentation

Dans celle-ci, il présente un moyen de se connecter à un pool de serveur NTP. Le moyen présenté inclut des paramètres tels que notre fuseau horaire ainsi que la notion de changement d’heure en été et en hiver. Dans le programme arduino qu’il a écrit pour cette vidéo, il a également ajouté une fonction qui permet de convertir l’UNIX time (qui est le temps écoulé en seconde depuis le 1er janvier 1970) en année, mois, jour , heure lisible pour nous, êtres humains.

Si vous êtes intéressé par les méthodes utilisées par Andreas pour récupérer et convertir les temps UNIX, je vous conseille vivement sa vidéo! J’ai utilisé son code arduino en le mixant avec celui que j’avais pour récupérer l’heure du jour.

Récupération du timestamp et affichage de la date et l’heure du jour
Fonction showTime() modifiée pour retourner les heures ou les minutes

Puis j’ai modifié la fonction showTime() pour qu’elle retourne des integer que je compare ensuite dans la boucle loop(). Avec les conditions bien précises ci-contre, il est possible de savoir si on est dans la plage horaire adéquate pour prendre des photos.

Ajout de la détection de lumière

Pour le moment, j’utilise le bouton “CAPTURE PHOTO” créé dans le code de base pour tester la prise d’image. Celui-ci me permet de vérifier que le stockage et l’affichage de plusieurs photos fonctionnent correctement.Il permet également de simuler la prise d’une photo dans une plage horaire prédéfinie.

Ce système de vidéosurveillance ne fonctionnera cependant pas de cette manière. La prise d’image sera réalisée automatiquement par la détection de lumière puis de mouvement. Dans cette partie, j’ai donc ajouté les modes de fonctionnement du dispositif à savoir le “sommeil”, “l’éveil”, “l’alerte”.

Si c’est la première fois que vous lisez les mots “sommeil”, “éveil” et “alerte”, c’est surement que vous avez loupé la première partie de ce projet. Dans cette première partie j’ai précisément défini le cahier des charges. Si vous souhaitez en savoir plus, cliquez ici!

La photorésistance que j’ai achetée est déjà montée sur une carte. Un potentiomètre y est d’ailleurs soudé et permet de régler une valeur seuil qui détermine la polarisation de la broche D0 (3.3v si > seuil, 0v sinon). Cette fonctionnalité m’a permis de simplifier le code. En effet, maintenant que le seuil établit manuellement, je n’ai plus qu’à tester dans le code si D0 est actif ou non.

Cette condition, si elle est respectée, et à condition que la précédente qui est le test de la plage horaire le soit aussi, permet de passer à l’état d’alerte. Nous n’avons maintenant plus qu’à tester s’il y a du mouvement grâce au PIR sensor.

Ajout de la détection de mouvement

Le branchement du PIR sensor au reste du circuit est aussi simple que pour la photorésistance. Ce capteur constitué de 3 broches, dont 2 pour l’alimentation se connecte directement à une entrée digitale de l’ESP. Pas de potentiomètre pour régler une quelconque valeur de seuil. Sa broche d’information est au potentiel 3.3v si du mouvement est détecté et au GND sinon.

Comme pour le détecteur de luminosité, nous n’avons qu’à tester si la broche est à l’état haut. Dans ce cas, cela confirme la prise d’une image si la luminosité extérieure est suffisante.

La partie code du projet est désormais presque terminée! Il manque plus qu’à régler quelques détails pour améliorer ce que nous appellerons l’expérience utilisateur.

Fonctionnalités additionnelles

Les fonctionnalités additionnelles désignent les petites améliorations qui n’entrent pas forcément dans les parties ci-dessus.

Dans un premier temps, j’ai décidé de retirer les boutons (inutiles dans notre cas) qui étaient inclus dans la page web du code de base.

J’ai ensuite ajouté une partie de code écrite en JavaScript dans la page web pour permettre de mettre à jour les photos automatiquement (se qu’un véritable système de vidéo surveillance ferait).

Et j’ai finalement changé la police d’écriture ainsi que la couleur de fond de page. Toutes ces petites fonctionnalités, bien que minimes donnent du charme à l’interface utilisateur final et ne m’ont pas trop prises de temps. J’aurais pu passer beaucoup plus de temps à embellir l’interface. J’ai cependant décidé de m’arrêter là. À voir si dans le futur je décide de continuer dans cette voie-là…

Conclusion

Le système actuel comme l’illustre la photo ci-dessous fonctionne très bien! Je n’ai cependant pas encore eu le temps de le tester dans des conditions réelles. Il est pour le moment dans mon appartement et prend des photos durant la journée (entre 8h et 17h). Notez que les photos ci-dessous ont été provoquées!

En effet, comme vous pouvez vous en douter, avant de le positionner définitivement je tiens à lui imprimer une boite digne de ce nom en 3D. C’est d’abord pour éviter de laisser le système électrique à la vue de tout le monde. C’est également pour le rendre plus esthétique et pour lui donner un aspect plus pro!

Cela va me prendre encore un peu de temps, mais je tiens tout de même à vous tenir informé sur mon Twitter.

Je projette par ailleurs de réaliser un petit compte rendu des résultats obtenus après quelque temps d’utilisation. Si vous souhaitez finalement découvrir qui est l’intrus, alors rejoignez la newsletter en remplissant le petit formulaire ci-dessous. C’est au travers de celle-ci que je compte communiquer sur le résultat final de l’enquête.

Elle est pour moi un bon moyen de communiquer à la sortie des nouveaux articles et j’aime quelques fois envoyé du contenu bonus pour récompenser mes plus fidèles lecteurs 🙂

NEwsletter

  • Des conseils DIY
  • Des présentations de projet inédit
  • Garantie no spam!