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.
noeud-rouge-noeud-base64 -Installer des nœuds
Installer node-red-contrib-image-output -Node
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".
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 ","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é. 🙂
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
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
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
Salut Hausen,
le code est probablement encore mal représenté. :/ J'ai maintenant téléchargé à nouveau le code sur mon GitHub. Vous pouvez le retrouver sur : https://github.com/Nerdiyde/NodeRedSnippets/blob/master/View%20IP%20Cam%20Images%20in%20Dashboard.txt
J'espère que cela fonctionne. 🙂
Cordialement
Fab
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
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