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

Das Kamerabild wird in dieser Konfiguration als base64-String codiert um es an die template-Node übergeben zu können. Damit dies funktioniert muss die Node “node-red-node-base64” installiert werden. Wie Ihr Nodes installiert ist in dem Artikel NodeRed – Installer de nouveaux nœuds expliqué.

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

Dank der Node “node-red-contrib-image-output” könnt Ihr euch das empfangene Bild im NodeRed-Editor anzeigen lassen. Dies erspart euch – gerade in der Konfigurationsphase das lästige hin- und herklicken zwischen Editor und Dashboard. Installiert dazu also die Node “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

Im Prinzip ist diese Node-Konfiguration nichts weiter als ein automatischer Standbild-Abholservice. Nach dem in der Inject-Node “regularRequest” festgelegtem Intervall werden die Bilder der IP-Cam unter der angegebenen URL abgeholt und auf dem Dashboard angezeigt.

Damit diese Konfiguration bei Euch funktioniert, ist es wichtig, dass Ihr in der http-request-node unter “URL” die URL zu Eurem Kamerabild eintragt.

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
    mehr sondern es steht nur noch “Camera” darin.

    Salutations Hausen

      1. Bonjour Fab,

        fast perfekt. Leider fehlt in dem Node “image preview” noch der Eintrag msg.payload. Trägt man
        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.