ESP32 WebRTC Voorbeeld - Tutorial Real-Time Klok Interface
Overzicht
Het WebRTC voorbeeld biedt een uitgebreide real-time klok interface voor uw ESP32 projecten. Ontworpen voor het ESP32 educatieve platform met ingebouwde RTC-mogelijkheden, verbeterde tijdbeheerfuncties en naadloze integratie met het educatieve ecosysteem. U kunt realtime klokinformatie tonen, tijd synchroniseren van de webbrowser naar Arduino, en tijdsverschillen monitoren via een intuïtieve webinterface.

Functies
- Real-time Klok Weergave: Toont huidige ESP32 RTC-tijd met automatische updates
- Vergelijking Apparaten Tijd: Toont webbrowser-/apparaatstijd naast ESP32-tijd
- Tijdsynchronisatie met één klik: Synchroniseer direct de ESP32 RTC met de webbrowser tijd
- Visuele Tijd Verschil Indicator: Toont tijdafwijking tussen apparaten in minuten
- Twee-regelige Tijdweergave: 12-uurs AM/PM formaat met volledige datumaanduiding
- Moderne Gradient UI: Kaartstijl-layout met responsief ontwerp
- WebSocket Communicatie: Real-time bidirectionele updates zonder pagina verversen
- Tijdzone-bewuste Synchronisatie: Gebruikt lokale apparaatstijd voor nauwkeurige synchronisatie
- Connectie Status Monitoring: Visuele indicatoren voor WebSocket verbindingsstatus
- Automatische Tijdaanvragen: Vraagt huidige ESP32 tijd op bij pagina laden
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Bedrading Schema

This image is created using Fritzing. Click to enlarge image
Als u niet weet hoe u ESP32 en andere componenten van stroom moet voorzien, vindt u instructies in de volgende tutorial: Hoe ESP32 van stroom te voorzien.
ESP32 - DS3231 RTC Module
| DS1307 RTC Module | ESP32 |
|---|---|
| Vin | 3.3V |
| GND | GND |
| SDA | GPIO21 |
| SCL | GPIO22 |
Snelle Stappen
Volg deze instructies stap voor stap:
- Als dit uw eerste keer is met ESP32, volg dan de handleiding voor het opzetten van de ESP32-omgeving in de Arduino IDE.
- Verbind de ESP32-ontwikkelmodule met uw computer via een USB-kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste ESP32 board (bijv. ESP32 Dev Module) en de juiste COM-poort.
- Ga naar het Libraries-icoon in de linkerzijbalk van de Arduino IDE.
- Zoek op "DIYables ESP32 WebApps" en vind de DIYables ESP32 WebApps Library van DIYables.
- Klik op de Install-knop om de bibliotheek te installeren.

- U wordt gevraagd om enkele andere bibliotheekafhankelijkheden te installeren.
- Klik op de Install All-knop om alle afhankelijkheden te installeren.

- Zoek op “RTClib” en vind de RTC-library van Adafruit.
- Klik op de Install-knop om de RTC-library te installeren.

- U wordt mogelijk gevraagd om afhankelijkheden voor de bibliotheek te installeren.
- Installeer alle afhankelijkheden door te klikken op de Install All-knop.

- In de Arduino IDE, ga naar File Examples DIYables ESP32 WebApps WebRTC voorbeeld, of kopieer de bovenstaande code en plak deze in de editor van Arduino IDE
- Configureer WiFi-inloggegevens in de code door deze regels aan te passen:
- Klik op de Upload-knop in de Arduino IDE om de code naar de ESP32 te uploaden.
- Open de Serial Monitor in Arduino IDE.
- Wacht tot de verbinding met WiFi is gemaakt en WiFi-informatie wordt weergegeven in de Serial Monitor.
- Controleer het resultaat in de Serial Monitor. Dit ziet er als volgt uit:
- Als u niets ziet, herstart dan uw ESP32 board.
Gebruik van de Webinterface
- Open een webbrowser op uw computer of mobiele apparaat dat verbonden is met hetzelfde WiFi-netwerk.
- Typ het IP-adres dat in de Serial Monitor wordt weergegeven in de webbrowser.
- Bijvoorbeeld: http://192.168.1.100
- U ziet de startpagina zoals hieronder afgebeeld:

- Klik op de Web RTC-link, u ziet dan de UI van de Web RTC app zoals hieronder:

- U kunt de pagina ook direct bereiken door het IP-adres te gebruiken gevolgd door /web-rtc. Bijvoorbeeld: http://192.168.1.100/web-rtc
- De Web RTC interface toont dan:
- Arduino Tijd: Huidige tijd van de Arduino RTC
- Uw Apparaat Tijd: Huidige tijd van uw webbrowser/apparaat
- Tijdverschil: Verschil tussen de twee tijden in minuten
- Sync ESP32 Tijd Knop: Klik om ESP32 tijd te synchroniseren met uw apparaat
Tijdsynchronisatie
- Klik op de knop "Sync ESP32 Time" om de Arduino RTC te synchroniseren met de lokale tijd van uw apparaat.

- Het synchronisatieproces verloopt als volgt:
- Leest de huidige lokale tijd van uw apparaat (niet UTC)
- Past de tijdzone-offset aan om nauwkeurige lokale tijdsynchrone te garanderen
- Stuurt een tijdstempel naar Arduino via WebSocket
- Arduino werkt zijn RTC bij met de ontvangen tijd
- Webinterface wordt bijgewerkt om de gesynchroniseerde tijd te tonen
Code Uitleg
Sleutelelementen
Setup Functie
Callback Functies
Tijdsynchronisatie Callback:
Tijd Aanvraag Callback:
Hoofdlus
API Methoden
DIYablesWebRTCPage Klasse Methoden
onTimeSyncFromWeb(callback)
- Stelt de callback-functie in die tijdsynchronisatie vanuit de webbrowser afhandelt
- Parameter: void (*callback)(unsigned long unixTimestamp)
- Gebruik: Wordt aangeroepen wanneer gebruiker op "Sync ESP32 Time" knop klikt
onTimeRequestToWeb(callback)
- Stelt de callback-functie in die tijdaanvragen vanuit de webbrowser afhandelt
- Parameter: void (*callback)()
- Gebruik: Wordt aangeroepen wanneer webinterface de huidige ESP32 tijd opvraagt
sendTimeToWeb(year, month, day, hour, minute, second)
- Stuurt de huidige ESP32 tijd naar de webinterface
- Parameters:
- year: Huidig jaar (bijv. 2025)
- month: Huidige maand (1-12)
- day: Huidige dag van de maand (1-31)
- hour: Huidig uur (0-23)
- minute: Huidige minuut (0-59)
- second: Huidige seconde (0-59)
WebSocket Communicatie
Berichten van Web naar Arduino
- RTC:GET_TIME - Vraag de huidige ESP32 tijd op
- RTC:SYNC:[timestamp] - Synchroniseer ESP32 tijd met Unix timestamp
Berichten van ESP32 naar Web
- DATETIME:YYYY,MM,DD,HH,MM,SS - Stuur huidige ESP32 tijd-componenten
Problemen Oplossen
Veelvoorkomende Problemen
1. Tijdverschil van enkele uren
- Probleem: ESP32 toont een tijd die meerdere uren afwijkt van de apparaattijd
- Oorzaak: Doorgaans een tijdzoneprobleem of RTC niet goed geïnitialiseerd
- Oplossing:
- Klik op de knop "Sync ESP32 Time" om opnieuw te synchroniseren
- Controleer of RTC correct is geïnitialiseerd in setup()
- Zorg voor een stabiele WiFi-verbinding
- Probleem: RTC-module wordt niet gedetecteerd tijdens initialisatie
- Oorzaak: DS3231-module is slecht aangesloten of defect
- Oplossing:
- Controleer I2C bedrading (SDA naar GPIO21, SCL naar GPIO22)
- Controleer voedingsaansluitingen (VCC naar 3.3V/5V, GND naar GND)
- Test met een I2C-scanner om moduleadres te detecteren
- Probeer een andere DS3231-module indien beschikbaar
- Probleem: Fout bij WebSocket-verbinding
- Oorzaak: Verbindingsfout
- Oplossing:
- Controleer of ESP32 IP-adres correct is
- Vernieuw de webpagina
- Controleer of ESP32 verbonden is met hetzelfde WiFi-netwerk
- Controleer firewallinstellingen
- Probleem: Tijdweergave bevriest of wordt niet bijgewerkt
- Oorzaak: WebSocket-verbinding verbroken of RTC is gestopt
- Oplossing:
- Vernieuw de webpagina
- Controleer de status van de WebSocket-verbinding
- Herstart de ESP32 als de RTC niet meer reageert
- Probleem: Tijdverschil toont duizenden minuten verschil
- Oorzaak: RTC was niet goed ingesteld of is aanzienlijk gedrift
- Oplossing: Klik meerdere keren op sync-knop en verifieer of callback-functies werken
2. Foutmelding "RTC module is NOT found"
3. Foutmelding "Not connected to Arduino" bij klik op synchroniseerknop
4. Tijd stopt met bijwerken
5. Grote tijdsverschillen (dagen/maanden)
Debug Tips
Enable Serial Debugging:
Controleer RTC Initialisatie:
Geavanceerd Gebruik
Data Logging met Timestamps
Geplande Acties
Integratie van Meerdere Web Apps
Toepassingen en Gebruiksscenario’s
Educatieve Projecten
- Leren over Tijdbeheer: Studenten leren over RTC, tijdsregistratie en synchronisatie
- IoT Tijdconcepten: Demonstreren van netwerksynchronisatie in IoT-systemen
- Data Logging Projecten: Timestamps toevoegen aan sensorwaarden en experimenten
- Planningssystemen: Tijdgebaseerde automatisering en besturingssystemen creëren
Praktische Toepassingen
- Home Automation: Verlichten, irrigatie of andere apparaten op schema zetten
- Data Acquisitie: Sensorwaarden voorzien van tijdstempel voor analyse
- Event Logging: Registreren wanneer gebeurtenissen plaatsvinden met accurate tijd
- Remote Monitoring: Controle van apparaatstatus en laatste update tijden op afstand
Voordelen voor STEM-onderwijs
- Tijdzoneconcepten: Begrijpen van lokale tijd vs. UTC en tijdzonebeheer
- Netwerkcommunicatie: Leren over WebSocket communicatie en real-time updates
- Hardware Integratie: Combineren van webinterfaces met hardware RTC functionaliteit
- Probleemoplossing: Debuggen van timingproblemen en synchronisatie-uitdagingen
Technische Specificaties
Geheugen Gebruik
- Flash Memory: ~8KB voor WebRTC-functionaliteit
- SRAM: ~2KB tijdens werking
- WebSocket Buffer: ~1KB voor berichtafhandeling
Prestatiekenmerken
- Update Frequentie: Real-time updates via WebSocket
- Synchronisatie Nauwkeurigheid: Meestal binnen 1-2 seconden
- Netwerk Overhead: ~50 bytes per tijdupdatebericht
- Reactietijd: <100ms voor tijdsync-operaties
Compatibiliteit
- ESP32 boards: ESP32, ESP32 Web Apps
- Browsers: Alle moderne browsers met WebSocket ondersteuning
- Apparaten: Desktop, tablet en mobiele apparaten
- Netwerken: WiFi-netwerken met internettoegang
Samenvatting
Het WebRTC voorbeeld toont aan hoe u:
- Een webgebaseerde real-time klokinterface maakt
- De ESP32 RTC synchroniseert met de webbrowser tijd
- Tijdinformatie in een gebruikersvriendelijk formaat toont
- Tijdverschillen en verbindingsstatus monitort
- Tijdfunctionaliteit integreert met andere webapplicaties
- Educatieve IoT-projecten bouwt met tijdbeheerfuncties
Dit voorbeeld is perfect voor projecten die nauwkeurige tijdregistratie, data logging met timestamps, geplande automatisering en educatieve demonstraties van tijdsynchronisatieconcepten in IoT-systemen vereisen.