L’exemple CameraWebServer pour l’ESP32-CAM a été développé avec l’IDE Arduino. PlatformIO est beaucoup plus fluide et performant que l’IDE Arduino. En attendant que la version Pro de l’IDE Arduino prenne enfin en charge facilement les autres cartes de développement (dont l’ESP32), PlatformIO est une alternative à tester absolument.
PlatformIO n’est pas un éditeur de code, est un tool-chain, c’est à un dire un ensemble d’utils logiciels disponible sous la forme d’un plugin pour la plupart des éditeurs de code (ouverts). Le plus connu est Visual Studio Code (ou VSCode) de Microsoft. Avant de commencer, vous aurez besoin donc besoin d’installer le plugin PlatformIO sur l’éditeur de code de votre choix. Pour VSCode, suivez les étapes de ce tutoriel détaillé.
.IRPP_button , .IRPP_button .postImageUrl , .IRPP_button .centered-text-area { min-height: 86px; position: relative; } .IRPP_button , .IRPP_button:hover , .IRPP_button:visited , .IRPP_button:active { border:0!important; } .IRPP_button { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #eaeaea; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_button:active , .IRPP_button:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_button .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 30%; } .IRPP_button .centered-text-area { float: left; width: 70%; padding:0; margin:0; } .IRPP_button .ctaText { border-bottom: 0 solid #fff; color: #FFFFFF; font-size: 13px; font-weight: bold; letter-spacing: .125em; margin: 0; padding: 0; } .IRPP_button .postTitle { color: #141414; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .IRPP_button .ctaButton { background: #C0392B; color: #FFFFFF; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; margin: 18px 14px 18px 14px; moz-border-radius: 3px; padding: 12px 0; text-align: center; text-decoration: none; text-shadow: none; webkit-border-radius: 3px; width: 80px; position: absolute; } .IRPP_button:hover .ctaButton { background: #E74C3C; } .IRPP_button .centered-text { display: table; height: 86px; padding:0; margin:0; padding-left: 108px!important; top: 0; } .IRPP_button .IRPP_button-content { display: table-cell; margin: 0; padding: 0; padding-right: 10px; position: relative; vertical-align: middle; width: 100%; } .IRPP_button:after { content: « »; display: block; clear: both; }
A LIRE AUSSI :
Débuter avec PlatformIO IDE sur VSCode (Windows, macOS, Raspbian, Linux)
Si ce n’est pas encore fait (si vous débutez avec les cartes de développement ESP32), vous aurez également besoin d’installer le kit de développement pour les cartes ESP32 du fabricant Espressif. Le plus facile est de passer par l’IDE Arduino quelque soit votre environnement (PC Windows, macOS, Linux ou Raspberry Pi OS). Suivez les instructions de ce tutoriel
.IRPP_button , .IRPP_button .postImageUrl , .IRPP_button .centered-text-area { min-height: 86px; position: relative; } .IRPP_button , .IRPP_button:hover , .IRPP_button:visited , .IRPP_button:active { border:0!important; } .IRPP_button { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #eaeaea; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_button:active , .IRPP_button:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_button .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 30%; } .IRPP_button .centered-text-area { float: left; width: 70%; padding:0; margin:0; } .IRPP_button .ctaText { border-bottom: 0 solid #fff; color: #FFFFFF; font-size: 13px; font-weight: bold; letter-spacing: .125em; margin: 0; padding: 0; } .IRPP_button .postTitle { color: #141414; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .IRPP_button .ctaButton { background: #C0392B; color: #FFFFFF; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; margin: 18px 14px 18px 14px; moz-border-radius: 3px; padding: 12px 0; text-align: center; text-decoration: none; text-shadow: none; webkit-border-radius: 3px; width: 80px; position: absolute; } .IRPP_button:hover .ctaButton { background: #E74C3C; } .IRPP_button .centered-text { display: table; height: 86px; padding:0; margin:0; padding-left: 108px!important; top: 0; } .IRPP_button .IRPP_button-content { display: table-cell; margin: 0; padding: 0; padding-right: 10px; position: relative; vertical-align: middle; width: 100%; } .IRPP_button:after { content: « »; display: block; clear: both; }
A LIRE AUSSI :
ESP32. Débuter avec Arduino-ESP32 sur IDE Arduino, macOS, Windows, Linux
Il existe de nombreuses cartes de développement ESP32-CAM (
M5Stack,
générique,
TTGO…). Quelque soit la carte de développement que vous avez acheté, vous devez utiliser l’exemple AI Thinker ESP32-CAM puis choisir la carte dans le code source avant de le compiler et le téléverser. En fait, chaque fabricant a opter pour des broches différentes de l’ESP32 mais le code source reste le même.
Récupérer le code source Camera Server depuis la librairie ESP32-Arduino sur l’IDE Arduino
Un (seul) exemple d’application est livré avec le SDK ESP32 pour la carte de développement ESP-32 Ai Thinker. Pour trouver le dossier, le plus facile est de passer par l’IDE Arduino.
Sélectionner la carte de développement Ai Thinker ESP32-CAM depuis le menu Outils -> Carte de développement -> ESP32 Arduino.
Ensuite, ouvrez l’exemple CameraWebServer depuis le menu Fichier -> Exemples -> ESP32 -> Camera.
Pour trouver le dossier du projet CameraWebServer, il vous suffit maintenant d’aller dans le menu Croquis -> Montrer le dossier du croquis.
Sur macOS, Il devrait se trouver ici
Macintosh HD ▸ Utilisateurs ▸ Votre Nom Utilisateur ▸ Bibliothèque ▸ Arduino15 ▸ packages ▸ esp32 ▸ hardware ▸ esp32 ▸ 1.0.4 ▸ libraries ▸ ESP32 ▸ examples ▸ Camera
Récupérer le projet CameraWebServer depuis GitHub
L’autre méthode consiste à aller directement récupérer le fichier du projet Arduino sur GitHub. Il n’est pas possible de récupérer individuellement les fichiers sur GitHub.
Il faudra créer un fichier texte et coller le code Arduino pour chaque fichier. Pour cela, cliquer sur raw, pour afficher le code sous la forme de texte et le récupérer plus facilement.
Créer un projet ESP32-CAM avec PlatformIO
Ouvrez VSCode ou l’éditeur de code de votre choix et ouvrez le panneau d’accueil de PlatformIO (normalement, il s’ouvre au démarrage). Si ce n’est pas le cas, vous avez un raccourci dans la barre d’option dans le coin inférieur droit de l’écran.
Cliquer sur Import Arduino Project
Un assistant d’important s’ouvre :
Sélectionner (en saisissant les premières lettres de la carte) la carte AI Thinker ESP32-CAM quelque soit le fabricant de votre carte ESP32-CAMOuvrez le dossier du projet CameraWebServer (il ne sera pas modifié)
Lancer l’Import. Il n’est malheureusement pas (encore) possible d’indiquer le dossier de destination. PlatformIO créé automatiquement un projet dans le dossier Documents -> PlatformIO -> Projets.
Le nom du dossier prend la forme date_heure_esp32cam. Vous pourrez le renommer et le déplacer ultérieurement.
Préparer la carte ESP32-CAM
Les cartes de développement ESP32-CAM AI Thinker ainsi que la plupart des autres cartes de développement d’ailleurs ne sont pas équipées d’un convertisseur UART / série. Vous aurez donc besoin obligé d’acheter un module FTDI (convertisseur UART / USB) séparé.
Tout est expliqué en détail dans ce tutoriel, mais voici pour mémoire le schéma de câblage.
N’oubliez pas qu’à chaque fois que vous voulez téléverser le firmware (code Arduino compilé), vous devez connecter les broches IO0 et GND ensemble puis brancher l’alimentation sur la broche 5V.
Après avoir téléverser un nouveau firmware, déconnecter les broches IO0 et GND puis faire un RESet de la carte.
Modifier le fichier de configuration platformio.ini
Pour fonctionner, PIO utilise un fichier de configuration nommé platformio.ini situé à la racine du projet.
Le fonctionnement du fichier platformio.ini est expliqué en détail dans cet article.
.IRPP_button , .IRPP_button .postImageUrl , .IRPP_button .centered-text-area { min-height: 86px; position: relative; } .IRPP_button , .IRPP_button:hover , .IRPP_button:visited , .IRPP_button:active { border:0!important; } .IRPP_button { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #eaeaea; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_button:active , .IRPP_button:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_button .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 30%; } .IRPP_button .centered-text-area { float: left; width: 70%; padding:0; margin:0; } .IRPP_button .ctaText { border-bottom: 0 solid #fff; color: #FFFFFF; font-size: 13px; font-weight: bold; letter-spacing: .125em; margin: 0; padding: 0; } .IRPP_button .postTitle { color: #141414; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .IRPP_button .ctaButton { background: #C0392B; color: #FFFFFF; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; margin: 18px 14px 18px 14px; moz-border-radius: 3px; padding: 12px 0; text-align: center; text-decoration: none; text-shadow: none; webkit-border-radius: 3px; width: 80px; position: absolute; } .IRPP_button:hover .ctaButton { background: #E74C3C; } .IRPP_button .centered-text { display: table; height: 86px; padding:0; margin:0; padding-left: 108px!important; top: 0; } .IRPP_button .IRPP_button-content { display: table-cell; margin: 0; padding: 0; padding-right: 10px; position: relative; vertical-align: middle; width: 100%; } .IRPP_button:after { content: « »; display: block; clear: both; }
A LIRE AUSSI :
Platformio.ini, astuces et paramètres utiles. data_dir, monitor_speed, upload_port…
La seul chose (importante) à modifier est la vitesse du port série car par défaut PIO utilise une vitesse de 9600 bauds.
Ouvrez le fichier platfrmio.ini et ajoutez l’attribut monitor_speed pour modifier la vitesse du port série à 115200 bauds utilisé dans le code source de l’exemple
monitor_speed = 115200
Vérifier que le module ESP32 est en mode bootloader
Ouvrez le moniteur série
Connecter IO0 et GND ensemble et mettez le module sous tension en connectant l’alimentation 5V. Immédiatement vous devez recevoir le message waiting for download. Le module ESP32 est prêt à recevoir le nouveau firmware.
> Executing task: pio device monitor
Configurer le module caméra et la connexion WiFi
Ouvrez maintenant le fichier CameraWebServer.ino. Dé-commenter le module caméra qui correspond à votre carte. Mettez toutes les autres cartes en commentaire (//).
//#define CAMERA_MODEL_WROVER_KIT//#define CAMERA_MODEL_ESP_EYE//#define CAMERA_MODEL_M5STACK_PSRAM//#define CAMERA_MODEL_M5STACK_WIDE#define CAMERA_MODEL_AI_THINKER
Saisissez ensuite les paramètres de connexion au réseau WiFi. Un seul réseau WiFi peut être configuré.
Dans ce projet, il n’est pas prévu de mode AP qui permet de configurer ultérieurement les paramètres WiFi. Cela veut aussi dire que si ne mot de passe ou l’identifiant réseau change, il faudra re-compiler le firmware avec les nouveaux paramètres !
const char* ssid = « saisir_identifiant_reseau »;const char* password = « saisir_motdepasse_wifi »;
Téléverser le firmware sur l’ESP32-CAM
Tout est prêt, cliquer sur le raccourci pour compiler et téléverser le firmware. Ce qui est génial avec PIO, c’est la rapidité avec laquelle le code est compiler (sauf la première fois qui est quasi identique à l’IDE Arduino).
Cliquer sur l’icône Téléverser et laisser faire PIO.
Accéder à l’interface HTML
Une Débrancher les broches IO0 et GND puis débrancher / rebrancher la broche 5V pour redémarrer l’ESP32.
Comme le port série est toujours connecté à la carte, on peut suivre le redémarrage et directement récupérer l’adresse IP. Maintenez la touche Ctrl du clavier en même temps que l’adresse IP du module ESP32-CAM.
Après avoir autorisé l’accès, vous arrivez directement sur l’interface que vous connaissez déjà.
Voilà, rien de très compliqué pour utiliser PlatformIO et VSCode.
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
Avez-vous aimé cet article ?