Caméra ESP32 S3 - Sonnette vidéo intelligente avec un bouton
Une sonnette de magasin avec caméra coûte beaucoup d'argent et nécessite un compte payant. Celle-ci coûte quelques euros et n'a besoin que de votre WiFi.
Un visiteur appuie sur le bouton. L'ESP32 S3 prend une photo et l'envoie sur votre téléphone via Telegram, avec un lien vers la vidéo en direct. Vous regardez la photo tout de suite, et vous appuyez sur le lien quand vous voulez voir ce qui se passe en ce moment. La petite LED sur la carte répond au visiteur, pour qu'il sache que la sonnette a fonctionné.
Ce que vous allez construire :
- Un bouton de sonnette qui prend une photo du visiteur
- Un message Telegram avec la photo et un lien vers la vidéo en direct
- Une page vidéo en direct que n'importe qui avec le lien peut ouvrir sur un téléphone ou un ordinateur
- Une LED qui répond au visiteur, pour qu'il sache que la sonnette a fonctionné
- Un temps de silence, pour qu'un enfant appuyant dix fois sur le bouton n'envoie pas dix photos
Matériel Requis
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
※ Note:
La carte caméra ESP32 S3 a 40 broches, mais le bornier à vis et la carte de répartition ont 44 broches. Elles fonctionnent quand même ensemble. Placez la carte caméra au centre de la carte à 44 broches, afin que 2 broches restent libres du côté gauche et 2 broches restent libres du côté droit.
Le bornier à vis vous permet de connecter des fils avec un tournevis, sans soudure. La carte de répartition vous donne des broches faciles pour une breadboard.
Comment ça fonctionne
Tout le projet tient en six étapes :
| Étape | Ce qui se passe |
|---|---|
| 1 | Un visiteur appuie sur le bouton |
| 2 | La LED s'allume, pour que le visiteur voie que la sonnette fonctionne |
| 3 | La caméra prend une photo |
| 4 | L'ESP32 S3 envoie la photo ET le lien vidéo en direct sur votre téléphone via Telegram |
| 5 | La LED clignote deux fois. Le visiteur sait que le message est en route. |
| 6 | Vous appuyez sur le lien quand vous voulez regarder la porte en direct |
Le message sur votre téléphone ressemble à ceci :
ArduinoBot
Pourquoi une photo ET un lien ?
Une photo et une vidéo en direct sont bonnes pour des choses différentes :
| Photo dans le message | Lien vidéo en direct | |
|---|---|---|
| Arrive tout seul | Oui | Non, vous devez appuyer dessus |
| Fonctionne de partout | Oui, toujours | Seulement à la maison, sauf si vous faites de la redirection de port |
| Montre un moment | Oui | Non, elle montre maintenant |
| Montre ce que le visiteur fait ensuite | Non | Oui |
| Coûte de la batterie et du WiFi | Quelques secondes | Pendant que vous regardez |
Ainsi, la photo vous dit que quelqu'un est là, et le lien vous permet de voir ce qu'il fait maintenant. C'est ainsi que fonctionne une vraie sonnette vidéo.
※ Note:
La vidéo en direct s'arrête d'elle-même après 60 secondes. C'est voulu. Pendant que quelqu'un regarde la vidéo, la carte est occupée et ne peut pas voir le bouton. La limite de temps garantit que la sonnette revient toujours à la vie. Pour la changer, modifiez la ligne #define STREAM_SECONDS 60.
La LED parle au visiteur
Une sonnette sans réponse est une mauvaise sonnette. Personne ne sait si elle a fonctionné, alors les gens appuient encore et encore. La petite LED de couleur déjà présente sur la carte donne une réponse pour chaque situation :
| Ce que fait la LED | Ce que ça veut dire |
|---|---|
| 3 clignotements quand vous allumez la carte | La sonnette est prête |
| Reste allumée | La photo est en train d'être prise et envoyée. Veuillez patienter. |
| 2 clignotements lents | La photo a été envoyée. Quelqu'un va venir. |
| 5 clignotements rapides | Quelque chose s'est mal passé. Pas de WiFi, ou Telegram a refusé. |
| 1 long clignotement | Vous avez appuyé trop tôt après la dernière sonnerie. |
※ Note:
C'est la partie qui donne au projet un aspect fini. Le code ne fait que quelques lignes, mais un visiteur qui reçoit une réponse n'appuiera pas vingt fois sur le bouton.
Pourquoi un bouton a besoin d'aide
Un bouton poussoir, ce sont deux morceaux de métal. Quand ils se touchent, ils rebondissent l'un contre l'autre plusieurs fois dans les premières millisecondes. Sans protection, un appui ressemble à cinq appuis, et votre téléphone reçoit cinq photos.
Vous pourriez écrire vous-même le code d'attente, mais la bibliothèque ezButton le fait déjà. Trois lignes suffisent pour tout le travail :
Ensuite, vous demandez simplement si quelqu'un a appuyé :
※ Note:
isPressed() est vrai seulement au moment où le bouton s'enfonce, pas pendant qu'il est maintenu. Ainsi, un appui fait le travail une seule fois, même quand un visiteur garde le bouton enfoncé pendant trois secondes.
※ Note:
button.loop() doit être la première ligne à l'intérieur de votre propre loop(). C'est la ligne qui lit la broche et fait l'attente. Si vous l'oubliez, le bouton ne fonctionne jamais.
À propos du module de bouton
Nous utilisons un module de bouton, pas un simple bouton poussoir. Un module, c'est le même bouton, mais il est monté sur une petite carte qui a déjà la résistance dessus, et il a trois broches propres. Vous n'avez qu'à brancher trois fils, et rien ne peut être dans le mauvais sens.
La résistance sur le module est une résistance de tirage vers le bas (pull-down). Elle maintient la broche à GND tant que personne ne touche le bouton :
| Bouton | La broche lit |
|---|---|
| Personne ne le touche | LOW, la résistance la maintient basse |
| Quelqu'un appuie dessus | HIGH, le bouton relie la broche au 3,3V |
Nous le disons à la bibliothèque avec un seul mot :
※ Note:
EXTERNAL_PULLDOWN signifie « la résistance est à l'extérieur de la puce, sur le module, et elle tire la broche vers le bas ». La bibliothèque sait alors que HIGH veut dire appuyé.
Avez-vous un simple bouton poussoir au lieu d'un module ? Alors la carte doit créer elle-même la résistance. Le code a les deux lignes. Échangez les marques // :
| Ce que vous avez | Ligne à utiliser | Câblage |
|---|---|---|
| Module de bouton | ezButton button(BUTTON_PIN, EXTERNAL_PULLDOWN); | VCC, GND et OUT |
| Bouton poussoir simple | ezButton button(BUTTON_PIN); | Une patte à la broche, une patte à GND |
※ Note:
N'utilisez jamais les deux. Avec un bouton simple, vous avez besoin de la résistance à l'intérieur de la carte, et avec un module, vous ne devez pas l'utiliser, car le module en a déjà une.
Créer votre bot Telegram
Vous avez besoin d'un jeton de bot (bot token) et d'un ID de chat. Cela prend trois minutes.
Étape 1 : Créer votre bot
- Installez Telegram sur votre téléphone, et créez un compte.
- Dans Telegram, cherchez @BotFather. Il a une coche bleue.
- Ouvrez la conversation avec BotFather et parlez-lui ainsi :
BotFather
- Copiez le jeton de bot du dernier message et gardez-le en lieu sûr.
Étape 2 : Trouver votre ID de chat
- Dans Telegram, cherchez le nom de votre nouveau bot et ouvrez la conversation.
- Envoyez n'importe quel message à votre bot, par exemple hello. Cette étape est nécessaire. Telegram ne laisse pas un bot vous écrire avant que vous ne lui ayez écrit.
ArduinoBot
- Ouvrez cette adresse dans votre navigateur web. Mettez votre propre jeton de bot à la place de <YOUR_BOT_TOKEN> :
- Le navigateur affiche un long texte. Cherchez "chat":{"id":. Le nombre qui suit est votre ID de chat.
※ Note:
Le navigateur affiche-t-il {"ok":true,"result":[]} avec rien à l'intérieur ? Alors vous n'avez pas encore envoyé de message à votre bot. Retournez à l'étape 2, envoyez hello à votre bot, puis rechargez l'adresse.
※ Note:
Ne montrez jamais votre jeton de bot à personne, et ne le mettez jamais sur un site web ou sur GitHub. S'il fuite, envoyez /revoke à BotFather et vous en obtenez un nouveau.
Le lien vidéo en direct
Le lien à l'intérieur du message Telegram vient d'une ligne en haut du code :
| Ce que vous écrivez là | Ce que le lien devient | Où ça fonctionne |
|---|---|---|
| Rien (vide) | http://192.168.0.2/stream, l'adresse de la carte | Seulement à la maison, sur le même WiFi |
| Votre propre adresse | http://my-house.duckdns.org:8080/stream | De n'importe où dans le monde |
Le code choisit tout seul :
※ Note:
Commencez avec le réglage vide. Testez d'abord tout à la maison. C'est seulement quand la sonnette fonctionne bien qu'il faut penser à l'ouvrir sur internet.
Pourquoi le lien peut ne pas fonctionner en dehors de chez vous
L'adresse de la carte, par exemple 192.168.0.2, est une adresse privée. Elle n'existe qu'à l'intérieur de votre maison. Votre téléphone la trouve quand il est sur votre propre WiFi, mais internet ne peut pas la voir du tout. Ainsi, le lien fonctionne à la maison, et ne fait rien quand vous êtes absent.
Pour ouvrir le lien depuis l'extérieur, vous avez besoin d'une adresse publique : l'adresse de votre routeur, avec la redirection de port, pour que le routeur transmette le visiteur à la carte. Chaque routeur fait cela un peu différemment, alors consultez le manuel de votre propre routeur, ou demandez à votre fournisseur internet.
Quand vous l'avez, écrivez cette adresse dans le code :
※ Note:
La plupart des routeurs reçoivent de temps en temps une nouvelle adresse publique, et votre lien cesse alors de fonctionner. Un nom DDNS gratuit, par exemple de DuckDNS ou No-IP, pointe toujours vers votre maison, donc vous pouvez écrire http://my-house.duckdns.org:8080 et l'oublier ensuite.
Mettez un mot de passe dessus
Quand vous ouvrez votre caméra sur internet, n'importe qui trouvant l'adresse peut regarder votre porte. Des programmes scannent tout internet toute la journée à la recherche de caméras ouvertes.
Alors, dès que vous utilisez PUBLIC_ADDRESS, activez le mot de passe :
Le navigateur web les demande la première fois, et s'en souvient ensuite.
※ Note:
C'est un mot de passe simple, envoyé en http et non en https. Il arrête un inconnu qui trouve votre adresse, mais il n'est pas assez fort pour une banque. Pour une porte d'entrée, c'est un juste équilibre. Voulez-vous plus de sécurité ? Alors n'ouvrez pas du tout la caméra sur internet, et ne regardez la vidéo en direct que lorsque vous êtes chez vous.
Schéma de câblage entre le bouton et l'ESP32 S3
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
| Broche du module de bouton | Broche ESP32 S3 |
|---|---|
| VCC (ou +) | 3.3V |
| GND (ou -) | GND |
| OUT (ou S, ou SIG) | GPIO47 |
C'est tout le câblage. Trois fils, et aucune résistance.
※ Note:
Vous n'avez pas besoin d'une LED. La carte en a déjà une petite de couleur, et le code utilise celle-ci :
※ Note:
Votre carte n'a pas de LED ? Alors connectez votre propre LED avec une résistance de 220 ohms à une broche libre, par exemple GPIO21, et changez la ligne en #define LED_PIN 21.
Notes de sécurité
Utilisez 3,3V pour le module de bouton, pas 5V. Les broches de l'ESP32 S3 sont faites pour le 3,3V, et le 5V peut les endommager.
Le module de bouton n'a besoin d'aucune résistance supplémentaire, car la résistance est déjà sur le module.
La caméra utilise les broches GPIO4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17 et 18. N'utilisez pas ces broches. GPIO47 est libre, donc nous l'utilisons pour le bouton.
※ Note:
Un vrai bouton de sonnette a quatre pattes, mais seules deux sont nécessaires. Si votre bouton ne fait rien, tournez-le d'un quart de tour sur la breadboard et réessayez. Deux pattes déjà reliées à l'intérieur ne fonctionneront jamais.
Installer les bibliothèques
Ce projet a besoin de deux bibliothèques.
DIYables ESP32 WebServer crée la page vidéo en direct :
- Ouvrez Arduino IDE.
- Cliquez sur l'icône Libraries dans la barre latérale gauche.
- Saisissez DIYables ESP32 WebServer dans la zone de recherche.
- Trouvez la bibliothèque de DIYables.io et cliquez sur INSTALL.
- Search for DIYables ESP32 WebServer created by DIYables.io and click the Install button.
ezButton lit le bouton et s'occupe du rebond :
- Saisissez ezButton dans la même zone de recherche.
- Trouvez la bibliothèque d'ArduinoGetStarted.com et cliquez sur INSTALL.
- Search for ezButton created by ArduinoGetStarted.com and click the Install button.
Réglages d'Arduino IDE pour la caméra ESP32 S3
La caméra ne fonctionne pas avec les réglages par défaut d'Arduino IDE. Vous devez changer certains éléments dans le menu Tools avant de téléverser le code.
| Élément du menu Tools | Sélectionnez ceci |
|---|---|
| Board | ESP32S3 Dev Module |
| Flash Size | 16MB (128Mb) |
| PSRAM | OPI PSRAM |
| Partition Scheme | Huge APP (3MB No OTA/1MB SPIFFS) |
| CPU Frequency | 240MHz (WiFi) |
| USB Mode | Hardware CDC and JTAG |
| Upload Mode | UART0 / Hardware CDC |
| Upload Speed | 921600 |
| USB CDC On Boot | Enabled |
Code ESP32 S3
Changez votre WiFi, votre jeton de bot et votre ID de chat en haut du code.
Les réglages que vous pouvez changer :
| Nom | Commence avec | Ce que ça fait |
|---|---|---|
| PUBLIC_ADDRESS | vide | Le lien dans le message. Vide veut dire l'adresse de la carte. |
| USE_PASSWORD | false | Réglez-le sur true quand vous ouvrez la caméra sur internet |
| QUIET_TIME | 10000 | Millisecondes à attendre avant la prochaine sonnerie |
| STREAM_SECONDS | 60 | La vidéo en direct s'arrête d'elle-même après ce nombre de secondes |
| DEBOUNCE_TIME | 50 | Millisecondes à attendre, car le bouton rebondit |
Étapes rapides
- Nouveau sur l'ESP32 S3 ? Terminez d'abord notre guide ESP32 S3 - Premiers pas.
- Créez votre bot Telegram et trouvez votre ID de chat. Voir les étapes ci-dessus.
- Installez les bibliothèques DIYables ESP32 WebServer et ezButton.
- Débranchez le câble USB, puis câblez le module de bouton comme dans le tableau ci-dessus.
- Copiez le code ci-dessus et collez-le dans Arduino IDE.
- Changez WIFI_SSID, WIFI_PASSWORD, BOT_TOKEN et CHAT_ID. Laissez PUBLIC_ADDRESS vide pour l'instant.
- Changez les réglages dans le menu Tools. Voir le tableau ci-dessus.
- Compilez et téléversez le code sur la carte ESP32 S3 en cliquant sur le bouton Upload dans Arduino IDE.
- Ouvrez le Serial Monitor dans Arduino IDE.
- Appuyez une fois sur le bouton RESET. La LED clignote trois fois, pour vous montrer que la sonnette est prête.
- Pointez la caméra vers votre visage et appuyez sur le bouton de la sonnette.
- La LED reste allumée un moment, puis clignote deux fois.
- Regardez votre téléphone. La photo est dans votre conversation Telegram, avec le lien en dessous.
ArduinoBot
- Appuyez sur le lien. Votre téléphone ouvre la vidéo en direct de votre porte.
- Regardez un moment, puis fermez la page. La sonnette est de nouveau prête.
- Astuce : Voulez-vous que le lien fonctionne quand vous n'êtes pas chez vous ? Lisez Le lien vidéo en direct ci-dessus, et faites la redirection de port.
Serial Monitor
Les relevés suivants ont été capturés en 2026 :
※ Note:
Too soon after the last ring (Trop tôt après la dernière sonnerie) montre le temps de silence en train de faire son travail. Quelqu'un a appuyé de nouveau sur le bouton après 4 secondes, et le code n'a pas envoyé de deuxième photo.
※ Note:
Somebody is watching the live video (Quelqu'un regarde la vidéo en direct) apparaît quand vous appuyez sur le lien. Si vous ne voyez jamais cette ligne, le lien n'a pas atteint la carte. Lisez le dépannage ci-dessous.
Les deux lignes au début vous disent ce qui est entré dans le message. Quand vous réglez PUBLIC_ADDRESS, la deuxième ligne devient votre propre adresse :
Dépannage
Rien ne se passe quand j'appuie sur le bouton.
- Vérifiez les trois fils. VCC vers 3,3V, GND vers GND, OUT vers GPIO47.
- Est-ce que button.loop() est la première ligne à l'intérieur de loop() ? Sans cela, la bibliothèque ne lit jamais la broche.
- Votre module a-t-il une résistance de tirage vers le haut (pull-up) au lieu d'une résistance de tirage vers le bas ? Alors changez le code en ezButton button(BUTTON_PIN, EXTERNAL_PULLUP);
- Regardez le Serial Monitor pendant que vous appuyez. Aucune ligne là veut dire que c'est le câblage, pas le code.
La sonnette sonne toute seule, sans que personne ne soit là.
Le fil OUT est mal fixé, donc la broche capte du bruit. Enfoncez bien le fil. Un module avec sa propre résistance ne devrait jamais faire cela s'il est correctement câblé.
Un appui envoie deux ou trois photos.
Augmentez DEBOUNCE_TIME de 50 à 150.
La LED clignote cinq fois après chaque appui.
Cinq clignotements rapides veulent dire que la photo n'a pas pu être envoyée. Lisez le Serial Monitor :
- Telegram did not answer at all (Telegram n'a pas répondu du tout) veut dire que la photo est partie mais que rien n'est revenu. Vérifiez votre internet, et essayez un partage de connexion depuis un téléphone, car certains réseaux bloquent Telegram.
- Sending stopped after ... bytes (L'envoi s'est arrêté après ... octets) veut dire que le WiFi s'est coupé en plein milieu. Rapprochez la carte du routeur.
- Cannot connect to Telegram (Impossible de se connecter à Telegram) veut dire qu'il n'y a pas d'internet du tout.
- Unauthorized (Non autorisé) veut dire que votre jeton de bot est faux.
- chat not found (chat introuvable) veut dire que votre ID de chat est faux.
Le Serial Monitor affiche Forbidden: bot can't initiate conversation with a user.
Vous n'avez jamais écrit à votre bot. Ouvrez Telegram, trouvez votre bot, et envoyez-lui n'importe quel message. Puis appuyez sur RESET sur la carte.
La LED ne s'allume jamais.
Le code utilise la LED présente sur la carte. Toutes les cartes n'en ont pas une. Si la vôtre n'en a pas, connectez votre propre LED avec une résistance de 220 ohms à GPIO21, et changez la ligne en #define LED_PIN 21.
Le lien dans le message n'ouvre rien.
- Laissez PUBLIC_ADDRESS vide et réessayez à la maison, sur le même WiFi que la carte. Cela doit fonctionner en premier.
- Votre téléphone doit être sur le WiFi, pas sur les données mobiles. Une adresse privée comme 192.168.0.2 n'existe pas en dehors de votre maison.
- Écrivez http://, pas https://. La carte n'utilise pas https.
Le lien fonctionne à la maison mais pas à l'extérieur.
C'est normal avec un PUBLIC_ADDRESS vide. Pour que ça fonctionne de partout, vous avez besoin de la redirection de port et d'un nom DDNS. Lisez Le lien vidéo en direct ci-dessus.
J'ai fait la redirection de port, et ça ne fonctionne toujours pas.
- Donnez à la carte une adresse fixe dans votre routeur, sinon la redirection pointe vers le mauvais appareil après une coupure de courant.
- Certains fournisseurs internet vous donnent une adresse partagée avec d'autres maisons (CGNAT). Alors la redirection de port ne peut pas fonctionner du tout. Demandez à votre fournisseur une vraie adresse publique.
- Testez depuis les données mobiles, pas depuis votre WiFi de la maison. Beaucoup de routeurs ne peuvent pas ouvrir leur propre adresse publique depuis l'intérieur.
La vidéo en direct s'arrête après une minute.
C'est voulu. Pendant que quelqu'un regarde, la carte ne peut pas voir le bouton. Rechargez la page pour regarder à nouveau, ou changez #define STREAM_SECONDS 60.
Le bouton de la sonnette ne fait rien pendant que quelqu'un regarde la vidéo.
La carte peut faire une seule chose à la fois. Fermez la page vidéo, et le bouton fonctionne à nouveau. C'est aussi pour cela que la vidéo s'arrête d'elle-même après une minute.
La photo montre le visiteur d'en bas, ou sa tête est coupée.
Déplacez la caméra. Une caméra de sonnette devrait se trouver à environ 150 cm au-dessus du sol, pour regarder un visage et non une poitrine.
La photo est sombre le soir.
La caméra ne peut pas voir dans le noir. Voir le tutoriel Caméra ESP32 S3 - Ajouter une LED flash pour des photos de nuit. Une lumière à une porte est aussi accueillante pour le visiteur.
La photo prend beaucoup de temps.
Utilisez une taille d'image plus petite. FRAMESIZE_VGA (640 × 480) fait environ la moitié de SVGA.
Le Serial Monitor n'affiche rien après les messages de démarrage.
Si votre câble USB est dans le port nommé UART, réglez USB CDC On Boot sur Disabled. S'il est dans le port nommé USB, réglez-le sur Enabled.
Applications
Un bouton, une caméra et un message. Cette petite idée trouve sa place à beaucoup d'endroits. Voici des projets pratiques que vous pouvez construire avec ce code :
- Sonnette vidéo pour votre maison : Voyez le visiteur sur votre téléphone, de n'importe où.
- Sonnette pour une personne sourde : La photo et l'alerte téléphone remplacent le son.
- Sonnette de réception de bureau : Un visiteur sonne, et la bonne personne voit qui c'est.
- Sonnette d'atelier ou de garage : Sachez que quelqu'un est à la porte arrière pendant qu'une machine fait du bruit.
- Bouton d'aide pour une personne âgée : Un appui envoie une photo de la pièce à un membre de la famille.
- Sonnette d'hôtel ou de chambre d'invité : Le propriétaire voit l'invité sans marcher jusqu'à la porte.
- Sonnette de livraison d'entrepôt : Le chauffeur sonne, et le bureau voit le camion.
- Bouton de service de magasin : Un client demande de l'aide, et une photo montre où il se trouve.
- Entrée d'école ou de club : Gardez un enregistrement photo de chaque personne qui a sonné.
- Bouton de photomaton : Appuyez pour prendre votre propre photo et la recevoir sur votre téléphone.
Vidéo
Regardez ci-dessous le tutoriel vidéo étape par étape de ce projet ESP32 S3.
Défis
- Débutant : Changez le texte Somebody is at the door! par votre propre message, par exemple le nom de votre maison.
- Intermédiaire : Ajoutez un buzzer qui fait un son à l'intérieur de la maison quand le bouton est appuyé, pour que vous entendiez la sonnette en plus de la voir.
- Avancé : Enregistrez aussi chaque photo sur la carte microSD, afin de garder un enregistrement de tous vos visiteurs même quand internet est en panne. Voir le tutoriel Caméra ESP32 S3 - Enregistrer une photo sur carte SD à l'ouverture de la porte.