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

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

Intégration d'un ESP32-CAM sur un Dashboard Node-RED

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

Installer le firmware modifié sur le module ESP32-CAM

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

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

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="http://192.168.1.58/stream" width="600px" style="max-width:100%; height:auto;" >
<p>projetsdiy.fr - diyprojects.io</p>
</div>

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

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

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

 

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).

Vous pouvez également copier le flow pour gagner du temps. menu -> import -> 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: 2 Moyenne: 5]
Quitter la version mobile