HowTo : Node Red - Afficher les images de la caméra IP dans le tableau de bord

Si vous avez installé une caméra IP dans votre réseau - ou ailleurs - vous pouvez également afficher l'image de la caméra dans le tableau de bord de NodeRed.

Comment faire cela est expliqué dans l'article suivant.


Consignes de sécurité

Je sais que les notes suivantes sont toujours un peu ennuyeuses et semblent inutiles. Malheureusement, de nombreuses personnes qui savaient "mieux" ont perdu des yeux, des doigts ou d'autres choses à cause d'une négligence ou se sont blessées. La perte de données est presque négligeable en comparaison, mais même celles-ci peuvent être vraiment ennuyeuses. Par conséquent, veuillez prendre cinq minutes pour lire les consignes de sécurité. Parce que même le projet le plus cool ne vaut pas une blessure ou d'autres problèmes.
https://www.nerdiy.de/sicherheitshinweise/

Liens d'affiliation/publicitaires

Les liens vers des boutiques en ligne répertoriés ici sont des liens dits d'affiliation. Si vous cliquez sur un tel lien d'affiliation et effectuez un achat via ce lien, Nerdiy.de recevra une commission de la boutique en ligne ou du fournisseur concerné. Le prix ne change pas pour vous. Si vous effectuez vos achats via ces liens, vous aidez Nerdiy.de à pouvoir proposer d'autres projets utiles à l'avenir. 🙂 


Conditions préalables

Articles utiles :
Pour que vous puissiez accepter cette configuration, NodeRed doit bien entendu déjà être installé.
Comment préparer un RaspberryPi puis installer NodeRed dessus est décrit dans les articles suivants.

Les articles suivants décrivent ce qui doit être fait pour préparer le RaspberryPi :
RaspberryPi - configuration pour les nerdiys !
RaspberryPi – La première configuration !
RaspberryPi - Contrôlez le RaspberryPi via SSH
NodeRed – Installer NodeRed sur le RaspberryPi
NodeRed – Installer de nouveaux nœuds
NodeRed - Créer une interface utilisateur avec des nœuds de tableau de bord

Outil requis :
-Non-

Matériel requis :

Dans la liste suivante, vous trouverez toutes les pièces dont vous avez besoin pour mettre en œuvre cet article.


Connectez-vous à l'interface de configuration de NodeRed

Avant de pouvoir modifier votre configuration NodeRed, vous devez - si activé - vous connecter d'abord à l'interface de configuration NodeRed.

Vue de la boîte de dialogue de connexion. Ici, vous devez entrer les données de connexion que vous avez spécifiées lors de la configuration de la connexion. Vous trouverez des informations à ce sujet dans l'article NodeRed - configurer la connexion de l'utilisateur.

noeud-rouge-noeud-base64 -Installer des nœuds

Dans cette configuration, l'image de la caméra est codée en tant que chaîne base64 afin de pouvoir la transmettre au nœud template. Pour que cela fonctionne, le noeud "node-red-node-base64" doit être installé. Pour savoir comment installer votre node, consultez l'article NodeRed – Installer de nouveaux nœuds expliqué.

Installer node-red-contrib-image-output -Node

Grâce au nœud "node-red-contrib-image-output", vous pouvez afficher l'image reçue dans l'éditeur de NodeRed. Cela vous évite - surtout dans la phase de configuration - de devoir cliquer dans tous les sens entre l'éditeur et le tableau de bord. Installez donc le noeud "node-red-contrib-image-output". Comment votre nœud est installé dans l'article NodeRed – Installer de nouveaux nœuds expliqué.
 

Trouver la bonne URL de caméra

Pour que ce NodeCode fonctionne, il est important que vous configuriez l'URL de l'image de la caméra de votre caméra IP. Malheureusement, cette URL n'est pas uniforme mais diffère d'un fabricant à l'autre et malheureusement aussi souvent d'un modèle à l'autre. Cependant, la liste sous le lien suivant facilite grandement la recherche de l'URL correcte.

https://www.ispyconnect.com/sources.aspx


Importer le code du nœud

En principe, cette configuration de nœuds n'est rien d'autre qu'un service automatique de collecte d'images fixes. Après l'intervalle défini dans le nœud d'injection "regularRequest", les images de la caméra IP sont récupérées à l'URL indiquée et affichées sur le tableau de bord.

Pour que cette configuration fonctionne chez vous, il est important que vous entriez l'URL de l'image de votre caméra dans le http-request-node sous "URL".

Affichage de l'image de la caméra sur le tableau de bord
Visualisation de la configuration sous l'éditeur.
Vue du http-request-node. Ici, vous devez saisir l'URL de l'image de votre caméra IP.

Dans le cas où le code ci-dessous ne peut pas être copié correctement formaté : j'ai également téléchargé le code dans le git nerdiy : https://github.com/Nerdiyde/NodeRedSnippets/blob/master/View%20IP%20Cam%20Images%20in%20Dashboard.txt

[{"id" : "50183f7f.5ae77","type":"http request","z":"2bfb0626.bbf15a","name":"imageRequest","method":"GET","ret":"bin","url":"http://YOUR_CAM_IP/image.jpg","tls":"","x":1320,"y":4600,"wires":[["79c3426c.7df78c","bf8a81cf.8f74","945489e7.cfc1d8"]]},{"id":"835ede3.e20822","type":"inject","z":"2bfb0626.bbf15a","name":"regularRequest","topic":"","payload":"","payloadType":"date","repeat":"10","crontab":"","once":false,"onceDelay":0.1,"x":1120,"y":4600,"wires":[["50183f7f.5ae77"]]},{"id":"bf8a81cf.8f74","type":"debug","z":"2bfb0626.bbf15a","name":"debug","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1510,"y":4680,"wires":[]},{"id":"d86c30df.cda1d","type":"ui_template","z":"2bfb0626.bbf15a","group":"4615860e.37a298","name":"DashboardViewer","order":7,"width":"6","height":"6","format":"Camera
Obtenir une image","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1790,"y":4600,"wires":[[]]}, {"id":"945489e7.cfc1d8","type":"base64","z":"2bfb0626.bbf15a","name":"convertingToBase64","action":"","property":"charge utile ","x":1560,"y":4600,"wires":[["d86c30df.cda1d"]]},{"id":"79c3426c.7df78c","type":"image","z ":"2bfb0626.bbf15a","name":"","width":200,"x":1530,"y":4640,"wires":[]},{"id":"4615860e.37a298 ","type":"ui_group","z":"","name":"Status","tab":"a958b123.88e1d","order":1,"disp":true,"width" :"6","collapse":false},{"id":"a958b123.88e1d","type":"ui_tab","z":"","name":"Accueil","icon": "tableau de bord"}]

Amusez-vous avec le projet

J'espère que tout a fonctionné comme décrit. Si ce n'est pas le cas ou si vous avez des questions ou des suggestions, faites-le moi savoir dans les commentaires. Je les ajouterai à l'article si nécessaire.
Les idées de nouveaux projets sont toujours les bienvenues. 🙂

PS Beaucoup de ces projets - en particulier les projets matériels - coûtent beaucoup de temps et d'argent. Bien sûr, je le fais parce que j'aime ça, mais si vous pensez que c'est cool que je partage l'information avec vous, je serais heureux d'un petit don au fonds du café. 🙂

Achetez-moi un café sur ko-fi.com       

6 commentaires

  1. Bonjour Fab,

    quand je veux importer votre flux dans Node-Red, j'obtiens une erreur :

    SyntaxError : Jeton inattendu i dans JSON à la position 842
    à <img id="img" src="\"

    Pouvez-vous me donner un indice sur ce qui ne va pas exactement ? Le problème réside dans le script du tableau de bord
    les spectateurs

    Salutations Hausen

    1. Salut Hausen,
      Merci pour l'indice. Cela était dû au plugin que j'utilise pour afficher le code (plus ou moins) formaté. :/
      Je l'ai corrigé maintenant et j'espère que cela fonctionnera pour vous aussi.
      Je serais heureux si vous me faites savoir si cela fonctionne. 🙂
      Cordialement
      Fab

  2. Bonjour Fab,

    Merci pour votre signal de retour. Malheureusement ça ne marche pas encore. Il n'y a aucun code dans le DashboardViewer
    plus, mais il n'y a plus que "Camera" dedans.

    Salutations Hausen

      1. Bonjour Fab,

        presque parfait. Malheureusement, il manque encore l'entrée msg.payload dans le nœud "image preview". Si l'on met
        celle-ci, tout fonctionne tout de suite si vous avez ajusté l'URL de la caméra.

        Merci pour vos efforts et votre soutien.

        Salutations Hausen

        1. Salut Hausen,
          salut mec Ça devient embarrassant. 😀 Merci pour le tuyau ! Va le corriger. Je suis content que ça marche.
          Merci encore et meilleures salutations
          Fabien

Kommentar hinterlassen

Votre adresse e-mail ne sera pas publiée. Erforderliche Felder sind mit * markiert

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