ESP32 S3 Kamera - Live-Video auf einem TFT-Display anzeigen
Alle anderen Kameraprojekte benötigen WLAN und einen Webbrowser. Dieses benötigt keines von beiden. Der ESP32 S3 sendet das Live-Bild direkt an ein TFT-Display, das daneben sitzt. Sie erhalten eine kleine Kamera mit eigenem Bildschirm, und sie funktioniert ganz ohne Netzwerk.
Was Sie bauen werden:
- Eine ESP32 S3 Kamera mit einem TFT-Display
- Ein Live-Bild auf dem Bildschirm, ohne WLAN und ohne Router
- Einen Bildzähler im Seriellen Monitor, damit Sie sehen, wie schnell es läuft
- Eine kleine Kamera, die Sie überallhin mitnehmen können, nur mit einer Powerbank
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
※ Notiz:
Das ESP32 S3 Kamera-Board hat 40 Pins, aber der Schraubklemmenblock und das Breakout-Board haben 44 Pins. Sie funktionieren trotzdem zusammen. Setzen Sie das Kamera-Board in die Mitte des 44-Pin-Boards, sodass links 2 Pins und rechts 2 Pins frei bleiben.
Mit dem Schraubklemmenblock können Sie Drähte mit einem Schraubendreher anschließen, ganz ohne Löten. Das Breakout-Board bietet Ihnen einfache Stiftleisten für ein Steckbrett.
Wie es funktioniert
Ein Kamerabild und ein Displaybild sind fast dasselbe, wenn Sie die richtigen Einstellungen wählen.
| Einstellung | Wert | Warum |
|---|---|---|
| Bildformat | RGB565 | Das Display erwartet genau das. Zwei Bytes ergeben eine Farbe. |
| Bildgröße | QVGA, 320 x 240 | Das Display im Querformat hat ebenfalls 320 x 240 |
| Drehung | 1 (Querformat) | Dreht das Panel vom Hochformat ins Querformat |
Daher ist der Code kurz. Fragen Sie die Kamera nach einem Bild und geben Sie es dann an das Display weiter:
※ Notiz:
Verwenden Sie für dieses Projekt nicht PIXFORMAT_JPEG. Ein JPEG ist komprimiert, und das Display kann es nicht lesen. PIXFORMAT_RGB565 liefert die Rohfarben, und genau das braucht der Bildschirm.
Warum die Farben falsch aussehen können
Eine Farbe besteht aus zwei Bytes, und die Kamera und das Display sind sich nicht einig, welches Byte zuerst kommt. Wenn Sie das Bild ohne Nachdenken senden, wird der Himmel orange und Gesichter werden blau.
Der Code vertauscht die zwei Bytes, bevor er zeichnet:
※ Notiz:
Wenn Ihr Bild seltsam aussieht, ändern Sie die Zeile #define SWAP_BYTES true in false. Einer der beiden Werte ist für Ihr Display richtig, und es kostet nichts, beide auszuprobieren.
Welche Pins sind noch frei?
Die Kamera verwendet 14 Pins, daher müssen Sie die Display-Pins sorgfältig auswählen:
| Verwendet von | Pins |
|---|---|
| Kamera | GPIO4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 16, 17, 18 |
| microSD-Kartensteckplatz | GPIO38, 39, 40 |
| USB | GPIO19, 20 |
| Serieller Monitor | GPIO43, 44 |
| Boot (niemals verwenden) | GPIO0, 3, 45, 46 |
| Frei für das Display | GPIO1, 2, 14, 21, 41, 42, 47 (wir verwenden 6 davon, GPIO14 bleibt frei) |
Es gibt genügend freie Pins für das Display, sodass alles passt.
Andere Pins als im normalen Display-Tutorial
Wenn Sie bereits das Tutorial ESP32 S3 - TFT LCD Touch Display SPI durchgearbeitet haben: In diesem Projekt ändern sich zwei Drähte:
| Display-Pin | Normales Display-Tutorial | Dieses Kameraprojekt | Warum |
|---|---|---|---|
| CS | GPIO1 | GPIO1 | Gleich |
| DC / RS | GPIO42 | GPIO42 | Gleich |
| RST | GPIO2 | GPIO2 | Gleich |
| SDI / MOSI | GPIO11 | GPIO21 | GPIO11 ist ein Kamera-Datenpin |
| SCK | GPIO12 | GPIO47 | GPIO12 ist ein Kamera-Datenpin |
| SDO / MISO | GPIO13 | nicht verbunden | GPIO13 ist der Pixeltakt der Kamera |
※ Notiz:
GPIO11, GPIO12 und GPIO13 sind die normalen SPI-Pins des ESP32 S3, deshalb verwendet das andere Tutorial sie. Auf dem Kamera-Board gehören diese drei Pins zur Kamera, daher müssen wir andere wählen. Das ist der einzige Unterschied. Die drei Steuerleitungen CS, DC und RST bleiben genau gleich.
Wiring Diagram between TFT Display and ESP32 S3
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
| TFT-Display Pin | ESP32 S3 Pin | Bedeutung |
|---|---|---|
| VCC | 3.3V | Stromversorgung |
| GND | GND | Masse |
| CS | GPIO1 | Chip Select |
| DC / RS | GPIO42 | Daten oder Befehl |
| RESET | GPIO2 | Reset |
| SDI / MOSI | GPIO21 | Daten zum Display |
| SCK | GPIO47 | Takt |
| LED / BL | GPIO41 | Hintergrundbeleuchtung |
| SDO / MISO | nicht verbunden | Nur zum Lesen vom Display erforderlich |
Sicherheitshinweise
Verwenden Sie 3,3V für VCC, nicht 5V. Der ESP32 S3 arbeitet mit 3,3V, und ein 5V-Display kann die Pins des Boards beschädigen.
Der Pin LED oder BL ist die Hintergrundbeleuchtung. Dieses Board hat nur einen 3,3V-Pin, und der VCC-Draht verwendet ihn bereits. Daher legen wir die Hintergrundbeleuchtung stattdessen auf GPIO41, und der Code schaltet sie ein:
Das ist einfacher zu verdrahten, und Sie erhalten zwei kostenlose Extras: TFT_display.backlightOff() schaltet den Bildschirm aus, um Strom zu sparen, und TFT_display.setBacklight(128) macht ihn halb so hell.
Sie benötigen den Draht SDO / MISO nicht. Dieses Projekt schreibt nur auf das Display, es liest nie davon.
※ Notiz:
Verwenden Sie auch den microSD-Kartensteckplatz? Dann lassen Sie GPIO38, 39 und 40 frei. Die obigen Display-Pins berühren diese nicht, sodass Karte und Display zusammen funktionieren.
DIYables TFT SPI Bibliothek installieren
- Öffnen Sie die Arduino IDE.
- Klicken Sie auf das Symbol Libraries in der linken Leiste.
- Geben Sie DIYables TFT SPI in das Suchfeld ein.
- Suchen Sie die Bibliothek von DIYables.io und klicken Sie auf INSTALL.
- Wenn die IDE nach anderen Bibliotheken fragt, klicken Sie auf INSTALL ALL, da diese Bibliothek Adafruit GFX verwendet.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
Die Bibliothek funktioniert mit drei Arten von Displays. Der Code verwendet das ST7789. Verwenden Sie die Zeile, die zu Ihrem eigenen Modul passt:
| Ihr Display | Zeile im Code | Größe |
|---|---|---|
| ST7789 (in diesem Tutorial verwendet) | 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 |
Für ein anderes Display setzen Sie // vor die ST7789-Zeile und entfernen das // aus der Zeile Ihres eigenen Displays. Sonst ändert sich nichts.
Arduino IDE Einstellungen für die ESP32 S3 Kamera
Die Kamera funktioniert nicht mit den Standardeinstellungen der Arduino IDE. Sie müssen einige Punkte im Menü Tools ändern, bevor Sie den Code hochladen.
| Menüpunkt in Tools | Diese Option wählen |
|---|---|
| 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 |
※ Notiz:
PSRAM ist hier sehr wichtig. Ein RGB565-Bild mit 320 x 240 belegt 153600 Bytes, was nicht in den normalen Speicher des Chips passt. Ohne PSRAM greift der Code auf ein sehr kleines Bild zurück.
Wie man das Kamera-Display programmiert
- Binden Sie die Bibliothek ein und wählen Sie Ihr Display.
※ Notiz:
Der ESP32 S3 hat mehr als einen SPI-Bus. Wir verwenden FSPI, damit das Display nie mit etwas anderem auf dem Board in Konflikt gerät.
- Teilen Sie dem SPI-Bus mit, welche Pins er verwenden soll, und starten Sie dann das Display. Die beiden -1 bedeuten "wir lesen nicht vom Display".
- Fragen Sie die Kamera nach dem Bild in dem Format, das das Display erwartet.
- Zeichnen Sie das Bild. Diese eine Zeile bringt das ganze Kamerabild auf den Bildschirm.
- Geben Sie den Speicher zurück, sonst stoppt die Kamera nach wenigen Bildern.
- Sie können auch Text auf den Bildschirm schreiben, da die Bibliothek Adafruit GFX verwendet.
ESP32 S3 Code
Schnelle Schritte
- Neu beim ESP32 S3? Absolvieren Sie zuerst unsere Anleitung Erste Schritte mit dem ESP32 S3.
- Installieren Sie die Bibliothek DIYables TFT SPI und klicken Sie auf INSTALL ALL, wenn die IDE fragt.
- Ziehen Sie das USB-Kabel ab und verdrahten Sie dann das Display wie in der Tabelle oben.
- Kopieren Sie den obigen Code und fügen Sie ihn in die Arduino IDE ein.
- Wenn Ihr Display kein ST7789 ist, ändern Sie die Display-Zeile. Siehe die Tabelle oben.
- Ändern Sie die Einstellungen im Menü Tools. Siehe die Tabelle oben.
- Kompilieren Sie den Code und laden Sie ihn auf das ESP32 S3 Board hoch, indem Sie in der Arduino IDE auf die Schaltfläche Upload klicken.
- Öffnen Sie den Seriellen Monitor in der Arduino IDE.
- Drücken Sie einmal die Taste RESET.
- Der Bildschirm zeigt Starting camera..., dann erscheint das Live-Bild.
- Profi-Tipp: Sehen die Farben falsch aus? Ändern Sie #define SWAP_BYTES true in false und laden Sie den Code erneut hoch.
Serieller Monitor
Der Serielle Monitor zeigt Ihnen, wie viele Bilder das Board zeichnet. Die folgenden Messwerte wurden im Jahr 2026 aufgezeichnet:
※ Notiz:
Etwa 12 Bilder pro Sekunde sind normal. Der langsame Teil ist die SPI-Leitung zum Display, nicht die Kamera. Ein kleineres Bild ist schneller, ein größeres Bild ist langsamer.
Fehlerbehebung
Der Bildschirm ist dunkel, aber ich sehe ein schwaches Bild, wenn ich mit einer Lampe darauf leuchte.
Die Hintergrundbeleuchtung ist aus. Prüfen Sie den Draht LED / BL an GPIO41 und prüfen Sie, ob initBacklight() in Ihrem Code steht.
Die Hintergrundbeleuchtung ist schwach, oder das Board startet neu, wenn der Bildschirm aufleuchtet.
Ihr Display-Modul benötigt mehr Strom, als ein ESP32 S3 Pin liefern kann. Verbinden Sie LED / BL stattdessen zusammen mit VCC an 3,3V und löschen Sie die Zeile initBacklight(). Sie verlieren dann die Ein-/Aus-Steuerung, aber die Hintergrundbeleuchtung ist immer voll.
Der Bildschirm bleibt weiß oder bleibt schwarz.
- Prüfen Sie die Drähte CS, DC und RESET. Diese drei werden am häufigsten vertauscht.
- Prüfen Sie den Draht LED / BL an GPIO41. Ohne ihn bleibt die Hintergrundbeleuchtung aus und Sie sehen nichts, auch wenn das Bild tatsächlich da ist.
- Prüfen Sie, ob VCC an 3,3V angeschlossen ist.
Die Farben sind falsch. Der Himmel ist orange, Gesichter sind blau.
Ändern Sie #define SWAP_BYTES true in false und laden Sie den Code erneut hoch.
Das Bild steht auf dem Kopf oder liegt auf der Seite.
Ändern Sie TFT_display.setRotation(1) in 0, 2 oder 3, bis es richtig aussieht.
Das Bild ist da, aber sehr klein in einer Ecke.
Ihr Display ist größer als das Bild, zum Beispiel ein ILI9488 mit 320 x 480. Das ist normal. Sie können das Bild in die Mitte verschieben, indem Sie die ersten beiden Zahlen von drawRGBBitmap(0, 0, ...) ändern.
Der Serielle Monitor zeigt Camera init failed with error 0x105.
Stellen Sie PSRAM im Menü Tools auf OPI PSRAM und prüfen Sie das Flachbandkabel der Kamera.
Das Video ist sehr langsam, nur 2 oder 3 Bilder pro Sekunde.
- Stellen Sie sicher, dass PSRAM auf OPI PSRAM steht, nicht auf Disabled.
- Verwenden Sie kurze Drähte. Lange Jumper-Kabel machen SPI langsam und unzuverlässig.
- Probieren Sie FRAMESIZE_QQVGA (160 x 120), um zu sehen, ob die Verdrahtung das Problem ist.
Der Serielle Monitor zeigt nach den Boot-Meldungen nichts an.
Wenn Ihr USB-Kabel im Anschluss mit der Bezeichnung UART steckt, stellen Sie USB CDC On Boot auf Disabled. Wenn es im Anschluss mit der Bezeichnung USB steckt, stellen Sie es auf Enabled.
Anwendungen
Eine Kamera mit eigenem Bildschirm benötigt kein WLAN, keinen Router und kein Handy. Hier sind praktische Projekte, die Sie mit diesem Code bauen können:
- Tragbare Kamera: Eine Kamera und ein Bildschirm mit einer Powerbank, die Sie überallhin mitnehmen können.
- Digitale Lupe: Richten Sie sie auf kleinen Text oder eine Platine und lesen Sie ihn auf dem Bildschirm.
- Inspektionskamera: Schauen Sie in eine Maschine, ein Rohr oder eine dunkle Kiste und verfolgen Sie es auf dem Bildschirm.
- Türspion: Ein Bildschirm im Haus zeigt, wer draußen vor der Tür steht.
- Rückfahrkamera für ein Modellauto: Zeigen Sie das Bild der Rückseite auf einem kleinen Bildschirm.
- Mikroskop-Helfer: Setzen Sie die Kamera auf eine Linse und zeigen Sie das Bild vergrößert.
- Fotobox: Lassen Sie Personen sich selbst sehen, bevor das Foto aufgenommen wird.
- Roboter mit Gesicht: Geben Sie einem Roboter einen Bildschirm, der zeigt, was er sieht.
- Lehrmittel: Zeigen Sie Schülern, wie ein Kamerabild zu Pixeln auf einem Bildschirm wird.
- Kamera an einem Ort ohne Netzwerk: Eine Fabrik, ein Keller oder ein Feld, wo das WLAN nicht hinreicht.
Video Tutorial
Wir erwägen die Erstellung von Video-Tutorials. Wenn Sie Video-Tutorials für wichtig halten, abonnieren Sie bitte unseren YouTube-Kanal , um uns zu motivieren, die Videos zu erstellen.
Sehen Sie sich unten die Schritt-für-Schritt-Videoanleitung für dieses ESP32 S3 Projekt an.
Herausforderungen
- Einsteiger: Schreiben Sie den Text "LIVE" in die Ecke des Bildschirms, über das Bild.
- Fortgeschritten: Fügen Sie einen Taster hinzu. Wenn Sie ihn drücken, friert das Bild drei Sekunden lang ein, wie ein Foto.
- Profi: Fügen Sie den microSD-Kartensteckplatz hinzu. Wenn Sie den Taster drücken, speichern Sie das Bild als JPEG-Datei und zeigen Sie "Saved!" auf dem Bildschirm an. Denken Sie daran, esp_camera_reconfigure() zu verwenden, um zwischen RGB565 und JPEG zu wechseln.