Caméra ESP32 S3 - Afficher une vidéo en direct sur un écran TFT
Tous les autres projets de caméra ont besoin de WiFi et d'un navigateur web. Celui-ci n'a besoin ni de l'un ni de l'autre. L'ESP32 S3 envoie l'image en direct directement vers un écran TFT placé juste à côté. Vous obtenez une petite caméra avec son propre écran, et elle fonctionne sans aucun réseau.

Ce que vous allez construire :
- Une caméra ESP32 S3 avec un écran TFT
- Une image en direct à l'écran, sans WiFi et sans routeur
- Un compteur d'images dans le Serial Monitor, pour voir à quelle vitesse ça tourne
- Une petite caméra que vous pouvez emporter partout, avec seulement une batterie externe
Matériel nécessaire
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 d'extension (breakout board) ont 44 broches. Elles fonctionnent tout de même ensemble. Placez la carte caméra au centre de la carte à 44 broches, pour 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 d'extension vous donne des broches faciles à utiliser pour une plaque d'essai.
Comment ça fonctionne
Une image de caméra et une image d'écran sont presque la même chose, si vous choisissez les bons paramètres.
| Paramètre | Valeur | Pourquoi |
|---|---|---|
| Format d'image | RGB565 | L'écran veut exactement ce format. Deux octets font une couleur. |
| Taille d'image | QVGA, 320 x 240 | L'écran en mode paysage fait aussi 320 x 240 |
| Rotation | 1 (paysage) | Fait passer le panneau de la position debout à la position couchée |
Le code est donc court. Demandez une image à la caméra, puis donnez-la à l'écran :
※ Note:
N'utilisez pas PIXFORMAT_JPEG pour ce projet. Un JPEG est compressé, et l'écran ne peut pas le lire. PIXFORMAT_RGB565 donne les couleurs brutes, ce dont l'écran a besoin.
Pourquoi les couleurs peuvent sembler fausses
Une couleur fait deux octets, et la caméra et l'écran ne sont pas d'accord sur l'octet qui vient en premier. Si vous envoyez l'image sans y penser, le ciel devient orange et les visages deviennent bleus.
Le code inverse les deux octets avant de dessiner :
※ Note:
Si votre image semble étrange, changez la ligne #define SWAP_BYTES true en false. L'une des deux valeurs est la bonne pour votre écran, et cela ne coûte rien d'essayer les deux.
Quelles broches restent libres ?
La caméra utilise 14 broches, vous devez donc choisir les broches de l'écran avec soin :
| Utilisé par | Broches |
|---|---|
| Caméra | GPIO4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18 |
| Logement de carte microSD | GPIO38, 39, 40 |
| USB | GPIO19, 20 |
| Serial Monitor | GPIO43, 44 |
| Boot (à ne jamais utiliser) | GPIO0, 3, 45, 46 |
| Libre pour l'écran | GPIO1, 2, 14, 21, 41, 42, 47 (nous en utilisons 6, GPIO14 reste libre) |
Il y a assez de broches libres pour l'écran, donc tout rentre.
Des broches différentes du tutoriel d'écran normal
Si vous avez déjà suivi le tutoriel ESP32 S3 - Écran tactile TFT LCD ILI9341 ILI9488 ST7789 interface SPI, deux fils changent dans ce projet :
| Broche de l'écran | Tutoriel d'écran normal | Ce projet caméra | Pourquoi |
|---|---|---|---|
| CS | GPIO1 | GPIO1 | Identique |
| DC / RS | GPIO42 | GPIO42 | Identique |
| RST | GPIO2 | GPIO2 | Identique |
| SDI / MOSI | GPIO11 | GPIO21 | GPIO11 est une broche de données de la caméra |
| SCK | GPIO12 | GPIO47 | GPIO12 est une broche de données de la caméra |
| SDO / MISO | GPIO13 | non connecté | GPIO13 est l'horloge de pixel de la caméra |
※ Note:
GPIO11, GPIO12 et GPIO13 sont les broches SPI normales de l'ESP32 S3, c'est pourquoi l'autre tutoriel les utilise. Sur la carte caméra, ces trois broches appartiennent à la caméra, nous devons donc en choisir d'autres. C'est la seule différence. Les trois fils de contrôle, CS, DC et RST, restent exactement les mêmes.
Schéma de câblage entre l'écran TFT et l'ESP32 S3

Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
| Broche de l'écran TFT | Broche ESP32 S3 | Signification |
|---|---|---|
| VCC | 3.3V | Alimentation |
| GND | GND | Masse |
| CS | GPIO1 | Sélection de puce |
| DC / RS | GPIO42 | Données ou commande |
| RESET | GPIO2 | Réinitialisation |
| SDI / MOSI | GPIO21 | Données vers l'écran |
| SCK | GPIO47 | Horloge |
| LED / BL | GPIO41 | Rétroéclairage |
| SDO / MISO | non connecté | Nécessaire seulement pour lire depuis l'écran |
Notes de sécurité
Utilisez 3,3V pour VCC, pas 5V. L'ESP32 S3 fonctionne en 3,3V, et un écran alimenté en 5V peut endommager les broches de la carte.
La broche LED ou BL est le rétroéclairage. Cette carte n'a qu'une seule broche 3,3V, et le fil VCC l'utilise déjà. Nous plaçons donc le rétroéclairage sur GPIO41 à la place, et le code l'allume :
C'est plus simple à câbler, et vous obtenez deux avantages gratuits : TFT_display.backlightOff() éteint l'écran pour économiser l'énergie, et TFT_display.setBacklight(128) le règle à moitié luminosité.
Vous n'avez pas besoin du fil SDO / MISO. Ce projet ne fait qu'écrire sur l'écran, il ne lit jamais depuis celui-ci.
※ Note:
Utilisez-vous aussi le logement de carte microSD ? Gardez alors GPIO38, 39 et 40 libres. Les broches de l'écran ci-dessus n'y touchent pas, donc la carte et l'écran fonctionnent ensemble.
Installer la bibliothèque DIYables TFT SPI
- Ouvrez Arduino IDE.
- Cliquez sur l'icône Libraries sur la barre de gauche.
- Tapez DIYables TFT SPI dans le champ de recherche.
- Trouvez la bibliothèque de DIYables.io et cliquez sur INSTALL.
- Quand l'IDE demande d'installer d'autres bibliothèques, cliquez sur INSTALL ALL, car cette bibliothèque utilise Adafruit GFX.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
La bibliothèque fonctionne avec trois types d'écran. Le code utilise le ST7789. Utilisez la ligne qui correspond à votre propre module :
| Votre écran | Ligne dans le code | Taille |
|---|---|---|
| ST7789 (utilisé dans ce tutoriel) | DIYables_ST7789_SPI TFT_display(...) | 240 x 320 |
| ILI9341 | DIYables_ILI9341_SPI TFT_display(...) | 240 x 320 |
| ILI9488 | DIYables_ILI9488_SPI TFT_display(...) | 320 x 480 |
Pour un autre écran, mettez // devant la ligne ST7789 et retirez le // de la ligne de votre propre écran. Rien d'autre ne change.
Paramètres Arduino IDE pour la caméra ESP32 S3
La caméra ne fonctionne pas avec les paramètres par défaut d'Arduino IDE. Vous devez modifier 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 |
※ Note:
Le PSRAM est très important ici. Une image RGB565 de 320 x 240 prend 153600 octets, ce qui ne tient pas dans la mémoire normale de la puce. Sans PSRAM, le code retombe sur une image très petite.
Comment programmer l'affichage de la caméra
- Incluez la bibliothèque et choisissez votre écran.
※ Note:
L'ESP32 S3 a plus d'un bus SPI. Nous utilisons FSPI, pour que l'écran n'entre jamais en conflit avec autre chose sur la carte.
- Indiquez au bus SPI quelles broches utiliser, puis démarrez l'écran. Les deux -1 signifient "nous ne lisons pas depuis l'écran".
- Demandez à la caméra l'image dans le format voulu par l'écran.
- Dessinez l'image. Cette seule ligne place toute l'image de la caméra à l'écran.
- Rendez la mémoire, sinon la caméra s'arrête après quelques images.
- Vous pouvez aussi écrire du texte à l'écran, car la bibliothèque utilise Adafruit GFX.
Code ESP32 S3
Étapes rapides
- Nouveau sur ESP32 S3 ? Suivez d'abord notre guide ESP32 S3 - Premiers pas.
- Installez la bibliothèque DIYables TFT SPI, et cliquez sur INSTALL ALL quand l'IDE le demande.
- Débranchez le câble USB, puis câblez l'écran comme indiqué dans le tableau ci-dessus.
- Copiez le code ci-dessus et collez-le dans Arduino IDE.
- Si votre écran n'est pas un ST7789, changez la ligne d'écran. Voir le tableau ci-dessus.
- Modifiez les paramètres 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.
- L'écran affiche Starting camera..., puis l'image en direct apparaît.
- Astuce pro : les couleurs semblent fausses ? Changez #define SWAP_BYTES true en false et téléversez de nouveau.
Serial Monitor
Le Serial Monitor vous indique combien d'images la carte dessine. Les relevés suivants ont été capturés en 2026 :
※ Note:
Environ 12 images par seconde est normal. La partie lente est le fil SPI vers l'écran, pas la caméra. Une image plus petite est plus rapide, et une image plus grande est plus lente.
Dépannage
L'écran est sombre, mais je vois une image faible quand j'éclaire dessus.
Le rétroéclairage est éteint. Vérifiez le fil LED / BL sur GPIO41, et vérifiez que initBacklight() est dans votre code.
Le rétroéclairage est faible, ou la carte redémarre quand l'écran s'allume.
Votre module d'écran demande plus de courant qu'une seule broche de l'ESP32 S3 ne peut en donner. Connectez plutôt LED / BL au 3,3V en même temps que VCC, et supprimez la ligne initBacklight(). Vous perdez alors le contrôle d'allumage et d'extinction, mais le rétroéclairage est toujours au maximum.
L'écran reste blanc ou reste noir.
- Vérifiez les fils CS, DC et RESET. Ce sont les trois que l'on inverse le plus souvent.
- Vérifiez le fil LED / BL sur GPIO41. Sans lui, le rétroéclairage reste éteint et vous ne voyez rien, même quand l'image est vraiment là.
- Vérifiez que VCC est bien sur 3,3V.
Les couleurs sont fausses. Le ciel est orange, les visages sont bleus.
Changez #define SWAP_BYTES true en false et téléversez de nouveau.
L'image est à l'envers ou sur le côté.
Changez TFT_display.setRotation(1) en 0, 2 ou 3 jusqu'à ce que ça semble correct.
L'image est là mais très petite dans un coin.
Votre écran est plus grand que l'image, par exemple un ILI9488 de 320 x 480. C'est normal. Vous pouvez déplacer l'image vers le centre en changeant les deux premiers nombres de drawRGBBitmap(0, 0, ...).
Le Serial Monitor affiche Camera init failed with error 0x105.
Réglez PSRAM sur OPI PSRAM dans le menu Tools, et vérifiez le câble plat de la caméra.
La vidéo est très lente, seulement 2 ou 3 images par seconde.
- Assurez-vous que le PSRAM est sur OPI PSRAM, pas Disabled.
- Utilisez des fils courts. Des fils de raccordement longs rendent le SPI lent et instable.
- Essayez FRAMESIZE_QQVGA (160 x 120) pour voir si le câblage est le problème.
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
Une caméra avec son propre écran n'a besoin ni de WiFi, ni de routeur, ni de téléphone. Voici des projets pratiques que vous pouvez construire avec ce code :
- Caméra portable : une caméra et un écran avec une batterie externe, et vous pouvez l'emporter partout.
- Loupe numérique : pointez-la vers un petit texte ou un circuit imprimé et lisez-le sur l'écran.
- Caméra d'inspection : regardez à l'intérieur d'une machine, d'un tuyau ou d'une boîte sombre, et observez sur l'écran.
- Judas de porte : un écran à l'intérieur de la maison montre qui est à la porte dehors.
- Caméra de recul pour une voiture miniature : affichez l'image de l'arrière sur un petit écran.
- Assistant microscope : placez la caméra sur une lentille et affichez l'image en grand.
- Photobooth : laissez les gens se voir avant que la photo soit prise.
- Robot avec un visage : donnez à un robot un écran qui montre ce qu'il voit.
- Outil pédagogique : montrez aux étudiants comment l'image d'une caméra devient des pixels sur un écran.
- Caméra dans un lieu sans réseau : une usine, une cave, ou un champ où le WiFi ne porte pas.
Vidéo
Regardez la vidéo pas à pas de ce projet ESP32 S3 ci-dessous.
Défis
- Débutant : écrivez le texte "LIVE" dans le coin de l'écran, par-dessus l'image.
- Intermédiaire : ajoutez un bouton. Quand vous appuyez dessus, l'image se fige pendant trois secondes, comme une photo.
- Avancé : ajoutez le logement de carte microSD. Quand vous appuyez sur le bouton, enregistrez l'image en fichier JPEG, et affichez "Saved!" à l'écran. N'oubliez pas d'utiliser esp_camera_reconfigure() pour basculer entre RGB565 et JPEG.