Intégrer un module ESP32-CAM à un Dashboard Node-RED (firmware modifié)

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

En installant le firmware officiel modifié proposé sur Github, il est très facile d’intégrer une image de surveillance provenant d’un module ESP32-CAM à un dashboard Node-RED.

 

Le Dashboard Node-RED

Avant de vous lancer, vous aurez besoin de Node-RED avec le plugin Dashboard configuré. Tout est expliqué en détail dans les tutoriels suivants

A LIRE AUSSI :
Installer Node-RED sur macOS ou Windows 10, démarrage automatique avec PM2
A LIRE AUSSI :
Créer un dashboard pour objet connecté avec Node-RED. Partie 1 : bouton, liste, interrupteur, slider, formulaire saisie
A LIRE AUSSI :
Dashboard pour objet connecté avec Node-RED. Partie 2 : jauges, graphiques, notifications, template HTML

Installer le firmware modifié sur le module ESP32-CAM

Suivez les étapes détaillées dans ce tutoriel pour installer le firmware officiel modifié.

A LIRE AUSSI :
ESP32-CAM, flash du firmware officiel modifié avec capture d'image

Intégrer un module ESP32-CAM à un dashboard Node-RED

Le plugin Dashboard de Node-RED permet en quelques instants de développer une interface de contrôle pour ses objets connectés sans avoir besoin d’installer un serveur domotique. Si vous ne connaissez pas encore Node-RED, vous pouvez commencer par ici. Vous aurez également besoin d’installer le plugin Dashboard (commencez par lire ce tutoriel).

Une fois que tout est prêt, placez un Node Template sur le flow

node-red template esp32-cam

Faites un double clic pour ouvrir l’éditeur du template et collez le code HTML suivant en modifiant l’adresse IP de la caméra IP.

<div style="margin-bottom: 10px;">
<img src="https://192.168.1.58/stream" width="600px" style="max-width:100%; height:auto;" >
<p>projetsdiy.fr - diyprojects.io</p>
</div>

node-red template dashboard camera esp32-cam

Créez un groupe sur lequel sera placé le Widget de la caméra en cliquant sur le crayon situé à droite de l’option group. Vous pouvez ajuster la largeur du widget avec l’option Width. Enregistrer et sélectionner le groupe avant d’enregistrer le template

node-red dashboard group

Dans la barre latérale droite de Node-RED, cliquer sur l’icône de gestion du Dashboard

node-red open dashboard settings

Puis cliquer sur le bouton d’ouverture de la fenêtre encadré en rouge sur l’image ci-dessous.

open node-red dashboard ip cam esp32-cam

 

Voilà, le flux vidéo de la caméra ESP32-CAM est parfaitement affiché sur le Dashboard. On pourra même y incorporer une interface pour gérer les options (ce sera pour le prochain tutoriel).

node-red esp32-cam widget

Vous pouvez également copier le flow pour gagner du temps. menu -> import -> clipboard

node-red flow past coller clipboard

[{"id":"e7934f4a.30204","type":"tab","label":"ESP32-CAM","disabled":false,"info":""},{"id":"fe904cea.e0fc7","type":"ui_template","z":"e7934f4a.30204","group":"44d922f7.9de63c","name":"","order":0,"width":"0","height":"0","format":"<div style=\"margin-bottom: 10px;\">\n<img src=\"http://192.168.1.58/stream\" width=\"600px\" style=\"max-width:100%; height:auto;\" >\n<p>projetsdiy.fr - diyprojects.io</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":244.5,"y":118,"wires":[[]]},{"id":"44d922f7.9de63c","type":"ui_group","z":"","name":"ESP32-CAM - Node-RED","tab":"d71da7b7.5bc958","disp":true,"width":"8","collapse":false},{"id":"d71da7b7.5bc958","type":"ui_tab","z":"","name":"ESP32-CAM","icon":"dashboard","disabled":false,"hidden":false}]
Avez-vous aimé cet article ?
[Total: Moyenne: ]
Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

Vous avez aimé ce projet ? Ne manquez plus aucun projet en vous abonnant à notre lettre d’information hebdomadaire!

Ressources utiles
quel modèle esp8266 choisir
Quel modèle d'ESP8266EX choisir en 2020 ?
guide choix esp32 development board
Quel ESP32 choisir en 2020 ?
Nous serions ravis de connaître votre avis

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Sondage
Aimez-vous le nouveau design du blog ?
  • Proposer une autre réponse

Chercher

Partager
Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur pinterest
Partager sur email
Partager sur telegram

Table des matières

À lire aussi
Domotique et objets connectés à faire soi-même