8.3 Benutzerdefinierter Video-Streaming-Webserver

Das Projekt „Benutzerdefinierter Video-Streaming-Webserver“ bietet die Möglichkeit, zu lernen, wie man eine Webseite von Grund auf erstellt und sie so anpasst, dass Videostreams abgespielt werden können. Zusätzlich können Sie interaktive Schaltflächen, wie EIN und AUS, integrieren, um die Helligkeit der LED zu steuern.

Durch den Aufbau dieses Projekts sammeln Sie praktische Erfahrungen in der Webentwicklung, HTML, CSS und JavaScript. Sie lernen, wie man eine responsive Webseite erstellt, die Videostreams in Echtzeit anzeigen kann. Außerdem entdecken Sie, wie man interaktive Schaltflächen integriert, um den Zustand der LED zu steuern und so ein dynamisches Benutzererlebnis zu bieten.

Benötigte Komponenten

Für dieses Projekt benötigen wir folgende Komponenten.

Es ist definitiv praktisch, ein komplettes Set zu kaufen. Hier ist der Link:

Name	ARTIKEL IN DIESEM KIT	LINK
ESP32 Starter Kit	320+	ESP32 Starter Kit

Sie können sie auch einzeln über die untenstehenden Links kaufen.

KOMPONENTENVORSTELLUNG	KAUF-LINK
ESP32 WROOM 32E	BUY
ESP32-Kameraerweiterung	-
Steckbrett	BUY
Überbrückungsdrähte	BUY
Widerstand	BUY
LED	BUY

Wie macht man das?

1. Schließen Sie zuerst die Kamera an.

2. Bauen Sie den Schaltkreis.

   

3. Verbinden Sie dann ESP32-WROOM-32E mit dem Computer über das USB-Kabel.

   

4. Öffnen Sie den Code.

   • Öffnen Sie die Datei iot_3_html_cam_led.ino, die sich im Verzeichnis esp32-starter-kit-main\c\codes\iot_3_html_cam_led befindet, oder kopieren Sie den Code in die Arduino IDE.

   • Nachdem Sie das Board (ESP32 Dev Module) und den passenden Port ausgewählt haben, klicken Sie auf den Upload-Knopf.

   • „Unbekanntes COMxx“ wird immer angezeigt?

5. Suchen Sie die folgenden Zeilen und ändern Sie sie mit Ihrem <SSID> und <PASSWORD>.

   // Replace the next variables with your SSID/Password combination
   const char* ssid = "<SSID>";
   const char* password = "<PASSWORD>";
   

6. Nachdem Sie das richtige Board (ESP32 Dev Module) und den Port ausgewählt haben, klicken Sie auf den Upload-Knopf.

7. Im seriellen Monitor sehen Sie eine erfolgreiche WLAN-Verbindungsmeldung und die zugewiesene IP-Adresse.

   WiFi connected
   Camera Stream Ready! Go to: http://192.168.18.77
   

8. Geben Sie die IP-Adresse in Ihrem Webbrowser ein. Sie werden zu der unten gezeigten Webseite geleitet, auf der Sie die benutzerdefinierten EIN- und AUS-Tasten verwenden können, um die LED zu steuern.

   

9. Legen Sie einen Akku in das Erweiterungsboard ein und entfernen Sie das USB-Kabel. Jetzt können Sie das Gerät überall innerhalb der WLAN-Reichweite platzieren.