Arduino WebRTC-Beispiel – Tutorial zur Echtzeituhr-Schnittstelle
WebRTC-Beispiel - Installationsanleitung
Überblick
Das WebRTC-Beispiel bietet eine umfassende Echtzeituhr-Schnittstelle für Ihre Arduino-Projekte. Entwickelt für die Arduino Uno R4 WiFi- und DIYables STEM V4 IoT-Bildungsplattform mit integrierten RTC-Fähigkeiten, erweiterten Zeitverwaltungsfunktionen und nahtlose Integration in das Bildungsökosystem. Sie können Echtzeit-Uhrinformationen anzeigen, die Zeit vom Webbrowser auf den Arduino synchronisieren und Zeitunterschiede über eine intuitive Weboberfläche überwachen.
Funktionen
- Echtzeituhranzeige: Zeigt die aktuelle Arduino RTC-Zeit mit automatischen Aktualisierungen
- Gerätezeit-Vergleich: Anzeige der Browser-/Gerätezeit neben der Arduino-Zeit
- Zeit-Synchronisierung mit einem Klick: Synchronisiert die Arduino RTC sofort mit der Browserzeit
- Visueller Zeitdifferenz-Indikator: Zeigt die Zeitdifferenz zwischen Geräten in Minuten an
- Zweizeiliges Zeitformat: 12-Stunden-Format mit AM/PM und vollständiger Datumsanzeige
- Modernes Gradient-UI: Kartenlayout mit responsivem Design
- WebSocket-Kommunikation: Echtzeit bidirektionale Updates ohne Neuladen der Seite
- Zeitzonenbewusste Synchronisierung: Verwendet die lokale Gerätezeit für eine genaue Synchronisation
- Verbindungsstatus-Überwachung: Visuelle Indikatoren für den WebSocket-Verbindungsstatus
- Automatische Zeitabfragen: Fordert beim Laden der Seite die aktuelle Arduino-Zeit an
- Plattform erweiterbar: Derzeit implementiert für Arduino Uno R4 WiFi, kann aber auf andere Hardwareplattformen erweitert werden. Siehe DIYables_WebApps_ESP32
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Anweisungen zur Einrichtung
Schnelle Schritte
Befolgen Sie diese Anweisungen Schritt für Schritt:
- Wenn dies das erste Mal ist, dass Sie das Arduino Uno R4 WiFi/DIYables STEM V4 IoT verwenden, lesen Sie das Tutorial zur Einrichtung der Umgebung für Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE Einrichten der Umgebung für Arduino Uno R4 WiFi/DIYables STEM V4 IoT in der Arduino IDE.
- Verbinden Sie das Arduino Uno R4/DIYables STEM V4 IoT-Board mit Ihrem Computer über ein USB-Kabel.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das passende Arduino Uno R4-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
- Gehen Sie zum Libraries-Symbol in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables WebApps", und finden Sie anschließend die DIYables WebApps-Bibliothek von DIYables.
- Klicken Sie auf die Installieren-Schaltfläche, um die Bibliothek zu installieren.
- Sie werden aufgefordert, weitere Bibliotheksabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.
- In der Arduino IDE gehen Sie zu Datei Beispiele DIYables WebApps WebRTC Beispiel, oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino IDE ein
/*
* DIYables WebApp Library - Web RTC Example
*
* This example demonstrates the Web RTC feature:
* - Real-time clock display for both Arduino and client device
* - One-click time synchronization from web browser to Arduino
* - Hardware RTC integration for persistent timekeeping
* - Visual time difference monitoring
*
* Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/web-rtc
*/
#include <DIYablesWebApps.h>
#include "RTC.h"
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebRTCPage webRTCPage;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables WebApp - Web RTC Example");
// Initialize RTC
RTC.begin();
// Check if RTC is running and set initial time if needed
RTCTime savedTime;
RTC.getTime(savedTime);
if (!RTC.isRunning() || savedTime.getYear() == 2000) {
Serial.println("RTC is NOT running, setting initial time...");
// Set a default time - you can modify this to match current time
RTCTime startTime(28, Month::AUGUST, 2025, 12, 0, 0, DayOfWeek::THURSDAY, SaveLight::SAVING_TIME_ACTIVE);
RTC.setTime(startTime);
Serial.println("RTC initialized with default time");
} else {
Serial.println("RTC is already running");
}
// Print initial RTC time
RTCTime initialTime;
RTC.getTime(initialTime);
Serial.print("Initial RTC Time: ");
Serial.print(initialTime.getYear());
Serial.print("/");
Serial.print(Month2int(initialTime.getMonth()));
Serial.print("/");
Serial.print(initialTime.getDayOfMonth());
Serial.print(" - ");
if (initialTime.getHour() < 10) Serial.print("0");
Serial.print(initialTime.getHour());
Serial.print(":");
if (initialTime.getMinutes() < 10) Serial.print("0");
Serial.print(initialTime.getMinutes());
Serial.print(":");
if (initialTime.getSeconds() < 10) Serial.print("0");
Serial.print(initialTime.getSeconds());
Serial.println();
// Add pages to server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRTCPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Set callback for time sync from web
webRTCPage.onTimeSyncFromWeb(onTimeSyncReceived);
// Set callback for time request from web
webRTCPage.onTimeRequestToWeb(onTimeRequested);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to connect to WiFi");
delay(1000);
}
}
}
void loop() {
// Handle web server
webAppsServer.loop();
// Send current time to web clients and print to Serial every 1 second
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate >= 1000) {
lastUpdate = millis();
// Get current RTC time
RTCTime currentTime;
RTC.getTime(currentTime);
// Send time to web clients in human readable format
webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()),
currentTime.getDayOfMonth(), currentTime.getHour(),
currentTime.getMinutes(), currentTime.getSeconds()); // Print time to Serial Monitor
Serial.print("RTC Time: ");
Serial.print(currentTime.getYear());
Serial.print("/");
Serial.print(Month2int(currentTime.getMonth()));
Serial.print("/");
Serial.print(currentTime.getDayOfMonth());
Serial.print(" - ");
if (currentTime.getHour() < 10) Serial.print("0");
Serial.print(currentTime.getHour());
Serial.print(":");
if (currentTime.getMinutes() < 10) Serial.print("0");
Serial.print(currentTime.getMinutes());
Serial.print(":");
if (currentTime.getSeconds() < 10) Serial.print("0");
Serial.print(currentTime.getSeconds());
Serial.println();
}
delay(10);
}
// Callback function called when web client sends time sync command
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// Convert Unix timestamp to RTCTime
RTCTime newTime;
newTime.setUnixTime(unixTimestamp);
// Set RTC time
RTC.setTime(newTime);
Serial.println("Arduino RTC synchronized!");
}
// Callback function called when web client requests current Arduino time
void onTimeRequested() {
// Get current RTC time and send to web in human readable format
RTCTime currentTime;
RTC.getTime(currentTime);
webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()),
currentTime.getDayOfMonth(), currentTime.getHour(),
currentTime.getMinutes(), currentTime.getSeconds());
}
- Konfigurieren Sie die WiFi-Zugangsdaten im Code, indem Sie diese Zeilen aktualisieren:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie in der Arduino IDE auf die Upload-Schaltfläche, um den Code auf den Arduino hochzuladen.
- Öffnen Sie den Seriemonitor in der Arduino IDE.
- Warten Sie auf die Verbindung zum WLAN und auf die Ausgaben der WLAN-Informationen im Seriemonitor.
- Schauen Sie sich das Ergebnis im Seriemonitor an. Es sieht wie folgt aus.
COM6
DIYables WebApp - Web RTC Example
RTC is already running
Initial RTC Time: 2025/8/28 - 12:00:08
INFO: Added app /
INFO: Added app /web-rtc
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
🕐 Web RTC: http://192.168.0.2/web-rtc
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Wenn Sie nichts sehen, starten Sie das Arduino-Board neu.
Die Weboberfläche verwenden
- Öffnen Sie einen Webbrowser auf Ihrem Computer oder Mobilgerät, das mit demselben WLAN-Netzwerk verbunden ist
- Geben Sie die im seriellen Monitor angezeigte IP-Adresse in den Webbrowser ein
- Beispiel: http://192.168.1.100
- Sie sehen die Startseite wie im folgenden Bild:
- Klicken Sie auf den WebRTC-Link, dann sehen Sie die Benutzeroberfläche der WebRTC-App wie unten dargestellt:
- Oder Sie können die Seite auch direkt über die IP-Adresse aufrufen, gefolgt von /web-rtc. Zum Beispiel: http://192.168.1.100/web-rtc
- Sie sehen die WebRTC-Oberfläche, die Folgendes zeigt:
- Arduino-Zeit: Aktuelle Zeit vom RTC des Arduino
- Ihre Gerätezeit: Aktuelle Uhrzeit von Ihrem Webbrowser/Gerät
- Zeitunterschied: Unterschied zwischen den beiden Zeiten in Minuten
- Arduino-Zeitsynchronisations-Schaltfläche: Klicken Sie, um die Arduino-Zeit mit Ihrem Gerät zu synchronisieren
Zeitsynchronisierung
- Klicken Sie auf die "Arduino-Zeit synchronisieren"-Schaltfläche, um die RTC des Arduino mit der lokalen Zeit Ihres Geräts zu synchronisieren.
- Der Synchronisationsprozess:
- Ermittelt die aktuelle lokale Zeit Ihres Geräts (nicht UTC)
- Berücksichtigt den Zeitzonenoffset, um eine genaue Synchronisierung der lokalen Zeit sicherzustellen
- Sendet den Zeitstempel über WebSocket an den Arduino
- Der Arduino aktualisiert seine RTC mit der empfangenen Zeit
- Die Weboberfläche aktualisiert sich, um die synchronisierte Zeit anzuzeigen
Nach der Synchronisation sollte der Zeitunterschied minimal sein (in der Regel 0–1 Minute)
Der Arduino wird auch nach dem Schließen der Weboberfläche die genaue Zeit beibehalten
Code-Erklärung
Schlüsselkomponenten
#include <DIYablesWebApps.h>
#include <RTC.h>
// Initialize web server and RTC page
DIYablesWebAppServer server;
DIYablesWebRTCPage rtcPage;
Setup-Funktion
void setup() {
Serial.begin(9600);
// Initialize RTC
RTC.begin();
// Setup WiFi connection
server.setupWiFi(WIFI_SSID, WIFI_PASSWORD);
// Add RTC page to server
server.addWebApp(rtcPage);
// Set up callback functions
rtcPage.onTimeSyncFromWeb(onTimeSyncReceived);
rtcPage.onTimeRequestToWeb(onTimeRequested);
// Start the server
server.begin();
}
Callback-Funktionen
Zeit-Synchronisation-Callback:
// Called when web interface sends time sync command
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// Convert Unix timestamp to RTCTime
RTCTime newTime;
newTime.setUnixTime(unixTimestamp);
// Set RTC time
RTC.setTime(newTime);
Serial.println("Arduino RTC synchronized!");
}
Zeitanfrage-Rückruf:
// Called when web interface requests current Arduino time
void onTimeRequested() {
RTCTime currentTime;
RTC.getTime(currentTime);
// Send current time to web interface
rtcPage.sendTimeToWeb(
currentTime.getYear(),
currentTime.getMonth(),
currentTime.getDayOfMonth(),
currentTime.getHour(),
currentTime.getMinutes(),
currentTime.getSeconds()
);
}
Hauptschleife
void loop() {
server.handleClient();
// Optional: Print current time every 10 seconds
static unsigned long lastPrint = 0;
if (millis() - lastPrint > 10000) {
RTCTime currentTime;
RTC.getTime(currentTime);
Serial.print("Current Arduino Time: ");
Serial.print(currentTime.getHour());
Serial.print(":");
if (currentTime.getMinutes() < 10) Serial.print("0");
Serial.print(currentTime.getMinutes());
Serial.print(":");
if (currentTime.getSeconds() < 10) Serial.print("0");
Serial.println(currentTime.getSeconds());
lastPrint = millis();
}
delay(10);
}
API-Methoden
DIYablesWebRTCPage Klassenmethoden
onZeitAbgleichVomWeb(callback)
- Setzt die Callback-Funktion fest, um die Zeitsynchronisierung aus dem Webbrowser zu behandeln.
- Parameter: void (*callback)(unsigned long unixTimestamp)
- Verwendung: Wird aufgerufen, wenn der Benutzer auf die Schaltfläche „Arduino-Zeit synchronisieren“ klickt.
onTimeRequestToWeb(callback)
- Setzt die Callback-Funktion zur Bearbeitung von Zeitabfragen vom Webbrowser
- Parameter: void (*callback)()
- Verwendung: Wird aufgerufen, wenn die Weboberfläche die aktuelle Arduino-Zeit anfordert
sendTimeToWeb(jahr, monat, tag, stunde, minute, sekunde)
- Sendet die aktuelle Arduino-Zeit an die Weboberfläche
- Parameter:
- Jahr: aktuelles Jahr (z. B. 2025)
- month: Aktueller Monat (1-12)
- day: Aktueller Tag des Monats (1-31)
- hour: Aktuelle Stunde (0-23)
- minute: Aktuelle Minute (0-59)
- second: Aktuelle Sekunde (0-59)
WebSocket-Kommunikation
Nachrichten vom Web an Arduino
- RTC:GET_TIME - Abrufen der aktuellen Arduino-Zeit
- RTC:SYNC:[timestamp] - Arduino-Zeit mit Unix-Zeitstempel synchronisieren
Nachrichten vom Arduino zum Web
- DATETIME:YYYY,MM,DD,HH,MM,SS - Sende die aktuellen Arduino-Zeitkomponenten
Fehlerbehebung
Häufige Probleme
1. Zeitunterschied von mehreren Stunden
- Problem: Arduino zeigt die Uhrzeit um mehrere Stunden gegenüber der Gerätezeit an
- Ursache: In der Regel handelt es sich um ein Zeitzonenproblem oder eine RTC, die nicht ordnungsgemäß initialisiert wurde
- Lösung:
- Klicken Sie auf die Schaltfläche „Arduino-Zeit synchronisieren“, um die Zeit neu zu synchronisieren.
- Prüfe, ob RTC in setup() ordnungsgemäß initialisiert ist.
- Überprüfen Sie, ob die WLAN-Verbindung stabil ist.
2. "Nicht mit Arduino verbunden" Fehler
- Problem: Fehler beim Klicken auf den Synchronisationsknopf
- Ursache: WebSocket-Verbindung ist fehlgeschlagen
- Lösung:
- Überprüfe, ob die Arduino-IP-Adresse korrekt ist.
- Lade die Webseite neu.
- Vergewissern Sie sich, dass Arduino mit demselben WLAN-Netzwerk verbunden ist.
- Firewall-Einstellungen überprüfen
- Die Zeit hört auf, sich zu aktualisieren.
- Problem: Die Zeitanzeige friert ein oder aktualisiert sich nicht
- Ursache: WebSocket-Verbindung verloren oder RTC gestoppt
- Lösung:
- Webseite aktualisieren
- WebSocket-Verbindungsstatus prüfen.
- Starte den Arduino neu, wenn die RTC nicht mehr reagiert
4. Große Zeitunterschiede (Tage/Monate)
- Problem: Der Zeitunterschied zeigt Tausende von Minuten
- Ursache: RTC war nicht ordnungsgemäß eingestellt oder ist deutlich abgewichen
- Lösung: Klicken Sie mehrmals auf die Sync-Schaltfläche und überprüfen Sie die Callback-Funktionen
Tipps zum Debuggen
Serielles Debugging aktivieren:
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// ... rest of function
}
void onTimeRequested() {
Serial.println("Time request received from web");
// ... rest of function
}
RTC-Initialisierung überprüfen:
void setup() {
// ... other setup code
if (RTC.begin()) {
Serial.println("RTC initialized successfully");
} else {
Serial.println("RTC initialization failed!");
}
}
Erweiterte Nutzung
Datenprotokollierung mit Zeitstempeln
void logSensorData(float temperature, float humidity) {
RTCTime currentTime;
RTC.getTime(currentTime);
String logEntry = String(currentTime.getYear()) + "-" +
String(currentTime.getMonth()) + "-" +
String(currentTime.getDayOfMonth()) + " " +
String(currentTime.getHour()) + ":" +
String(currentTime.getMinutes()) + ":" +
String(currentTime.getSeconds()) + " - " +
"Temp: " + String(temperature) + "°C, " +
"Humidity: " + String(humidity) + "%";
Serial.println(logEntry);
// Save to SD card, send to database, etc.
}
Geplante Aktionen
void checkScheduledActions() {
RTCTime currentTime;
RTC.getTime(currentTime);
// Turn on LED every day at 6:00 AM
if (currentTime.getHour() == 6 && currentTime.getMinutes() == 0) {
digitalWrite(LED_BUILTIN, HIGH);
Serial.println("Morning LED activated!");
}
// Turn off LED every day at 10:00 PM
if (currentTime.getHour() == 22 && currentTime.getMinutes() == 0) {
digitalWrite(LED_BUILTIN, LOW);
Serial.println("Evening LED deactivated!");
}
}
Integration mehrerer Webanwendungen
// Combine WebRTC with other web apps
server.addWebApp(rtcPage); // Real-time clock
server.addWebApp(monitorPage); // Serial monitor with timestamps
server.addWebApp(plotterPage); // Data plotting with time axis
Anwendungen und Anwendungsfälle
Bildungsprojekte
- Zeitmanagement-Lernen: Schülerinnen und Schülern RTC, Zeitmessung und Synchronisation beibringen
- IoT-Zeitkonzepte: Die Netzwerkzeitsynchronisation in IoT-Systemen demonstrieren
- Datenprotokollierungsprojekte: Sensoraufzeichnungen und Experimente mit Zeitstempeln versehen
- Zeitplanungssysteme: Zeitbasierte Automatisierungs- und Steuerungssysteme erstellen
Anwendungen in der realen Welt
- Hausautomation: Beleuchtung, Bewässerung oder andere Geräte planen
- Datenerfassung: Sensorwerte mit Zeitstempeln für die Analyse erfassen
- Ereignisprotokollierung: Aufzeichnen, wann bestimmte Ereignisse mit präzisen Zeitstempeln auftreten
- Fernüberwachung: Aus der Ferne den Zustand des Geräts und die letzten Aktualisierungszeiten überprüfen
Vorteile der MINT-Bildung
- Zeitzonenkonzepte: Verstehen von Ortszeit im Vergleich zu UTC und der Handhabung von Zeitzonen
- Netzwerkkommunikation: Lernen Sie WebSocket-Kommunikation und Echtzeit-Updates
- Hardware-Integration: Webschnittstellen mit Hardware-RTC-Funktionalität kombinieren
- Problemlösung: Timing-Probleme und Synchronisationsprobleme debuggen
Technische Spezifikationen
Speicherverbrauch
- Flash-Speicher: ~8KB für WebRTC-Funktionalität
- SRAM: ~2KB während des Betriebs
- WebSocket-Puffer: ~1KB für die Nachrichtenverarbeitung
Leistungsmerkmale
- Aktualisierungsfrequenz: Echtzeit-Updates über WebSocket
- Synchronierungsgenauigkeit: Typischerweise innerhalb von 1–2 Sekunden
- Netzwerk-Overhead: ca. 50 Bytes pro Zeitaktualisierungsmeldung
- Antwortzeit: <100 ms für Zeitabgleich-Operationen
Kompatibilität
- Arduino-Boards: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- Browser: Alle modernen Browser mit WebSocket-Unterstützung
- Geräte: Desktop-Computer, Tablets und Mobilgeräte
- Netzwerke: WLAN-Netzwerke mit Internetzugang
Zusammenfassung
Das WebRTC-Beispiel zeigt, wie man:
- Webbasierte Echtzeituhr-Schnittstelle erstellen
- Synchronisieren Sie das Arduino-RTC mit der Uhrzeit des Webbrowsers
- Zeigen Sie Zeitinformationen in einem benutzerfreundlichen Format an
- Überwachen Sie Zeitdifferenzen und den Verbindungsstatus
- Integrieren Sie Zeitfunktionen in andere Webanwendungen
- Bildungsorientierte IoT-Projekte mit Zeitmanagement-Funktionen bauen
Dieses Beispiel eignet sich perfekt für Projekte, die eine genaue Zeitmessung, Datenprotokollierung mit Zeitstempeln, zeitgesteuerte Automatisierung sowie lehrreiche Demonstrationen von Zeit-Synchronisationskonzepten in IoT-Systemen erfordern.