Exemple ESP32 WebRTC - Tutoriel sur l'interface de l'horloge temps réel
Vue d'ensemble
L’exemple WebRTC fournit une interface complète d’horloge en temps réel pour vos projets ESP32. Conçu pour l’ESP32 — plateforme éducative dotée de capacités RTC intégrées, de fonctionnalités améliorées de gestion du temps et d’une intégration transparente avec l’écosystème éducatif. Vous pouvez afficher les informations de l’horloge en temps réel, synchroniser l’heure depuis le navigateur Web vers Arduino et surveiller les écarts temporels via une interface Web intuitive.

Fonctionnalités
- Affichage de l'horloge en temps réel: Affiche l'heure RTC actuelle de l'ESP32 avec des mises à jour automatiques
- Comparaison de l'heure de l'appareil: Affiche l'heure du navigateur Web et celle de l'appareil aux côtés de l'heure ESP32
- Synchronisation horaire en un clic: Synchronise l'heure RTC de l'ESP32 avec l'heure du navigateur Web instantanément
- Indicateur visuel de l'écart temporel: Affiche le décalage entre les appareils en minutes
- Format d'heure sur deux lignes: Format 12 heures avec AM/PM et affichage complet de la date
- Interface moderne en dégradé: Mise en page en style carte avec design réactif
- Communication WebSocket: Mises à jour bidirectionnelles en temps réel sans rafraîchissement de la page
- Synchronisation sensible au fuseau horaire: Utilise l'heure locale de l'appareil pour une synchronisation précise
- Surveillance de l'état de connexion: Indicateurs visuels de l'état de connexion WebSocket
- Demandes automatiques de l'heure: Demande l'heure actuelle de l'ESP32 lors du chargement de la page
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 (ESP32 inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Diagramme de câblage

Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Si vous ne savez pas comment alimenter l'ESP32 et d'autres composants, consultez les instructions dans le tutoriel suivant : Comment alimenter l'ESP32..
ESP32 - Module horloge temps réel DS3231
| DS1307 RTC Module | ESP32 |
|---|---|
| Vin | 3.3V |
| GND | GND |
| SDA | GPIO21 |
| SCL | GPIO22 |
Étapes rapides
Suivez ces instructions étape par étape :
- Si c'est votre première utilisation de l'ESP32, reportez-vous au tutoriel sur la configuration de l'environnement pour ESP32 dans l'IDE Arduino (BASE_URL/tutorials/esp32/esp32-software-installation).
- Connectez la carte ESP32 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte ESP32 appropriée (par ex. ESP32 Dev Module) et le port COM.
- Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino.
- Recherchez "DIYables ESP32 WebApps", puis trouvez la bibliothèque DIYables ESP32 WebApps de DIYables
- Cliquez sur le bouton Install pour installer la bibliothèque.

- Vous serez invité à installer d'autres dépendances de bibliothèque
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances de la bibliothèque.

- Recherchez “RTClib”, puis trouvez la bibliothèque RTC d'Adafruit
- Cliquez sur le bouton Install pour installer la bibliothèque RTC.

- Il peut vous être demandé d'installer les dépendances de la bibliothèque
- Installez toutes les dépendances de la bibliothèque en cliquant sur le bouton Install All.

- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables ESP32 WebApps WebRTC exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE Arduino
- Configurez les identifiants WiFi dans le code en mettant à jour ces lignes :
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur Arduino.
- Ouvrez le Moniteur série dans l'IDE Arduino
- Attendez la connexion au WiFi et l'affichage des informations WiFi dans le Moniteur série.
- Consultez le résultat dans le Moniteur série. Il ressemble à ce qui suit.
- Si vous ne voyez rien, redémarrez la carte ESP32.
Utilisation de l'interface Web
- Ouvrez un navigateur Web sur votre ordinateur ou votre appareil mobile connecté au même réseau Wi‑Fi
- Saisissez l’adresse IP affichée dans le Moniteur série dans le navigateur
- Exemple : http://192.168.1.100
- Vous verrez la page d'accueil comme sur l'image ci-dessous :

- Cliquez sur le lien Web RTC, vous verrez l'interface utilisateur de l'application Web RTC comme ci-dessous :

- Ou vous pouvez également accéder directement à la page en utilisant l'adresse IP suivie de /web-rtc. Par exemple : http://192.168.1.100/web-rtc
- Vous verrez l'interface WebRTC s'afficher :
- Temps Arduino: Heure actuelle du RTC de l'Arduino
- L'heure de votre appareil: Heure actuelle provenant de votre navigateur/appareil
- Différence de temps: Différence entre les deux temps en minutes
- Bouton de synchronisation de l'heure ESP32: Cliquez pour synchroniser l'heure de l'ESP32 avec votre appareil
Synchronisation de l'heure
- Cliquez sur le bouton "Synchroniser l'heure ESP32" pour synchroniser l'horloge RTC de l'Arduino avec l'heure locale de votre appareil

- Le processus de synchronisation :
- Obtient l'heure locale actuelle de votre appareil (pas UTC)
- Ajuste le décalage du fuseau horaire pour garantir une synchronisation précise de l'heure locale
- Envoie l'horodatage à l'Arduino via WebSocket
- L'Arduino met à jour son RTC avec l'heure reçue
- L'interface Web se met à jour pour afficher l'heure synchronisée
Explication du code
Composants clés
Fonction de configuration
Fonctions de rappel
Callback de synchronisation de l'heure:
Rappel de la demande d'heure :
Boucle principale
Méthodes de l'API
Méthodes de la classe DIYablesWebRTCPage
onSynchronisationDuTempsDepuisLeWeb(callback)
- Définit la fonction de rappel pour gérer la synchronisation de l'heure à partir du navigateur web
- Paramètre: void (*callback)(unsigned long unixTimestamp)
- Utilisation: Appelée lorsque l'utilisateur clique sur le bouton « Synchroniser l'heure ESP32 »
onTimeRequestToWeb(callback)
- Définit la fonction de rappel pour gérer les demandes d'heure provenant du navigateur Web
- Paramètre: void (*callback)()
- Utilisation: Appelé lorsque l'interface Web demande l'heure actuelle de l'ESP32
envoyerLeTempsSurLeWeb(année, mois, jour, heure, minute, seconde)
- Envoie l'heure actuelle de l'ESP32 à l'interface Web
- Paramètres:
- année: Année en cours (par exemple, 2025)
- mois: Mois actuel (1-12)
- jour: Jour actuel du mois (1-31)
- heure: Heure actuelle (0-23)
- minute : Minute actuelle (0-59)
- second: Seconde actuelle (0-59)
Communication WebSocket
Messages du Web vers Arduino
- RTC:GET_TIME - Obtenir l'heure actuelle de l'ESP32
- RTC:SYNC:[timestamp] - Synchroniser l'heure de l'ESP32 avec un horodatage Unix
Messages de l'ESP32 vers le Web
- DATETIME:YYYY,MM,DD,HH,MM,SS - Envoyer les composants temporels actuels de l'ESP32
Dépannage
Problèmes fréquents
1. Écart de plusieurs heures
- Problème: L'ESP32 affiche une heure qui diffère de plusieurs heures par rapport à l'heure de l'appareil
- Cause: Habituellement un problème de fuseau horaire ou le RTC n'est pas correctement initialisé
- Solution:
- Cliquez sur le bouton « Synchroniser l'heure ESP32 » pour resynchroniser.
- Vérifie si le RTC est correctement initialisé dans setup()
- Vérifier que la connexion Wi-Fi est stable.
- Erreur : « Le module RTC est introuvable ».
- Problème: Le module RTC n'a pas été détecté lors de l'initialisation
- Raison: Le module DS3231 n'est pas correctement connecté ou est défectueux
- Solution:
- Vérifiez le câblage I2C (SDA vers GPIO 21, SCL vers GPIO 22)
- Vérifier les connexions d'alimentation (VCC vers 3,3 V/5 V, GND vers la masse)
- Tester avec un scanner I2C pour détecter l'adresse du module
- Essayez un autre module DS3231 s'il est disponible.
- Erreur « Non connecté à Arduino »
- Problème: Erreur lors du clic sur le bouton de synchronisation
- Cause: La connexion WebSocket a échoué
- Solution:
- Vérifier si l'adresse IP de l'ESP32 est correcte
- Rafraîchir la page web
- Vérifier que l'ESP32 est connecté au même réseau Wi-Fi
- Vérifier les paramètres du pare-feu
3. Le temps cesse d'être mis à jour
- Problème: L'affichage de l'heure se fige ou ne se met pas à jour
- Cause: Connexion WebSocket perdue ou le RTC arrêté
- Solution:
- Actualiser la page web
- Vérifier l'état de la connexion WebSocket
- Redémarrer l'ESP32 si le RTC ne répond plus
4. Grandes différences temporelles (jours/mois)
- Problème: La différence de temps affiche des milliers de minutes d'écart
- Raison: L'horloge temps réel (RTC) n'était pas correctement réglée ou a dérivé de manière significative
- Solution: Cliquez sur le bouton de synchronisation plusieurs fois et vérifiez les fonctions de rappel
Astuces de débogage
Activer le débogage série :
Vérifier l'initialisation de l'RTC:
Utilisation avancée
Journalisation des données avec des horodatages
Actions planifiées
Intégration de plusieurs applications web
Applications et cas d'utilisation
Projets éducatifs
- Apprentissage de la gestion du temps : enseigner aux étudiants le RTC (horloge temps réel), la mesure du temps et la synchronisation
- Notions de temps pour l'IoT : démontrer la synchronisation du temps réseau dans les systèmes IoT
- Projets de journalisation des données : ajouter des horodatages aux lectures des capteurs et aux expériences
- Systèmes de planification : créer des systèmes d'automatisation et de contrôle basés sur le temps
Applications du monde réel
- Domotique: Planifier l’éclairage, l’irrigation ou d’autres appareils
- Acquisition de données: Horodater les relevés des capteurs pour analyse
- Journalisation d'événements: Enregistrer lorsque des événements spécifiques se produisent avec un horodatage précis
- Surveillance à distance: Vérifier l'état des dispositifs et les horodatages des dernières mises à jour à distance
Avantages de l'éducation STEM
- Concepts des fuseaux horaires : Comprendre l'heure locale vs UTC et la gestion des fuseaux horaires
- Communication réseau : Apprendre la communication WebSocket et les mises à jour en temps réel
- Intégration matérielle : Associer des interfaces Web aux fonctionnalités RTC matérielles
- Résolution de problèmes : Déboguer les problèmes de synchronisation et de temporisation
Spécifications techniques
Utilisation de la mémoire
- Mémoire flash: environ 8 Ko pour la fonctionnalité WebRTC
- SRAM: environ 2 Ko pendant le fonctionnement
- Tampon WebSocket: environ 1 Ko pour la gestion des messages
Caractéristiques de performance
- Fréquence de mise à jour : Mises à jour en temps réel via WebSocket
- Précision de la synchronisation : Typiquement entre 1 et 2 secondes
- Surcharge réseau : ~50 octets par message de mise à jour de l'heure
- Temps de réponse : <100 ms pour les opérations de synchronisation de l'heure
Compatibilité
- Cartes ESP32 : ESP32, ESP32 Web Apps
- Navigateurs : Tous les navigateurs modernes prenant en charge WebSocket
- Périphériques : Ordinateur de bureau, tablette et appareils mobiles
- Réseaux : réseaux Wi‑Fi avec accès à Internet
Résumé
L'exemple WebRTC montre comment :
- Créer une interface d'horloge en temps réel basée sur le Web
- Synchroniser l'horloge RTC de l'ESP32 avec l'heure du navigateur Web
- Afficher les informations temporelles dans un format convivial
- Surveiller les écarts de temps et l'état de la connexion
- Intégrer les fonctionnalités liées au temps avec d'autres applications Web
- Construire des projets IoT éducatifs avec des fonctionnalités de gestion du temps
Cet exemple est parfait pour des projets nécessitant une mesure du temps précise, l’enregistrement des données avec horodatage, une automatisation planifiée et des démonstrations pédagogiques des concepts de synchronisation du temps dans les systèmes IoT.