HowTo: Node Red – Geef IP Cam-afbeeldingen weer in Dashboard

Als u in uw netwerk – of elders – een IP-camera heeft geïnstalleerd, kunt u het camerabeeld ook laten weergeven in het NodeRed dashboard.

Hoe dit werkt, wordt uitgelegd in het volgende artikel.


Veiligheidsinstructies

Ik weet dat de volgende opmerkingen altijd een beetje vervelend zijn en onnodig lijken. Helaas hebben veel mensen die "beter" wisten door onvoorzichtigheid ogen, vingers of andere dingen verloren of zichzelf verwond. Gegevensverlies is in vergelijking bijna te verwaarlozen, maar zelfs dit kan erg vervelend zijn. Neem daarom vijf minuten de tijd om de veiligheidsinstructies te lezen. Omdat zelfs het coolste project geen blessure of andere problemen waard is.
https://www.nerdiy.de/sicherheitshinweise/

Affiliate links / reclame links

De hier vermelde links naar online winkels zijn zogenaamde affiliate-links. Als u op zo'n affiliate-link klikt en via deze link een aankoop doet, ontvangt Nerdiy.de een commissie van de betreffende onlineshop of aanbieder. De prijs verandert voor jou niet. Als u via deze links uw aankopen doet, steunt u Nerdiy.de om in de toekomst andere nuttige projecten aan te kunnen bieden. 🙂 


Eisen

Handige artikelen:
Om deze configuratie te kunnen gebruiken, moet NodeRed natuurlijk al geïnstalleerd zijn.
Hoe je een RaspberryPi voorbereidt en vervolgens NodeRed erop installeert, wordt beschreven in de volgende artikelen.

In de volgende artikelen wordt beschreven wat er moet gebeuren om de RaspberryPi voor te bereiden:
RaspberryPi – setup voor nerds!
RaspberryPi – De eerste configuratie!
RaspberryPi – Bedien de RaspberryPi via SSH
NodeRed – NodeRed installeren op de RaspberryPi
NodeRed – Installeer nieuwe knooppunten
NodeRed - Maak een gebruikersinterface met dashboardknooppunten

Vereist gereedschap:
-Nee-

Benodigd materiaal:

In de volgende lijst vindt u alle onderdelen die u nodig heeft om dit artikel te implementeren.


Log in op de configuratie-interface van NodeRed

Voordat u uw NodeRed-configuratie kunt bewerken, moet u - indien geactiveerd - eerst inloggen op de NodeRed-configuratie-interface.

Weergave van het aanmeldingsvenster. Hier moet u de inloggegevens invoeren die u tijdens de configuratie van de login hebt opgegeven. Informatie hierover vind je in het artikel NodeRed - gebruikersaanmelding instellen.

knooppunt-rood-knooppunt-base64 - Installeer knooppunten

In deze configuratie wordt het camerabeeld gecodeerd als een base64-string om het door te kunnen geven aan het sjabloonknooppunt. Om dit te laten werken, moet het knooppunt “node-red-node-base64” zijn geïnstalleerd. Hoe uw knooppunten worden geïnstalleerd, vindt u in het artikel NodeRed – Installeer nieuwe knooppunten uitgelegd.

Installeer node-red-contrib-image-output -Node

Dankzij de node “node-red-contrib-image-output” kun je de ontvangen afbeelding weergeven in de NodeRed editor. Dit bespaart u het vervelende heen en weer klikken tussen de editor en het dashboard, vooral in de configuratiefase. Om dit te doen, installeert u het knooppunt “node-red-contrib-image-output”. Hoe uw node is geïnstalleerd in het artikel NodeRed – Installeer nieuwe knooppunten uitgelegd.
 

Zoek de juiste camera-URL

Om deze NodeCode te laten werken, is het belangrijk dat je de URL configureert voor het camerabeeld van je IP-cam. Deze URL is helaas niet uniform maar verschilt van fabrikant tot fabrikant en helaas ook vaak van model tot model. De lijst onder de volgende link maakt het echter veel gemakkelijker om de juiste URL te vinden.

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


Knooppuntcode importeren

In principe is deze knooppuntconfiguratie niets anders dan een automatische ophaalservice voor stilstaande beelden. Na het interval dat is opgegeven in het ‘regularRequest’ inject-knooppunt, worden de beelden van de IP-camera opgehaald op de opgegeven URL en weergegeven op het dashboard.

Om deze configuratie voor u te laten werken, is het belangrijk dat u de URL naar uw camerabeeld invoert onder “URL” in de http-request-node.

Zicht op het camerabeeld op het dashboard
Weergave van de configuratie in de editor.
Weergave van het http-verzoekknooppunt. Hier moet u de URL naar het camerabeeld van uw IP-cam invoeren.

In het geval dat de onderstaande code niet correct geformatteerd kan worden gekopieerd: ik heb de code ook geüpload in de nerdiy git: https://github.com/Nerdiyde/NodeRedSnippets/blob/master/View%20IP%20Cam%20Images%20in%20Dashboard.txt

[{"id '50183f7f.5ae77', type 'http aanvraag', z '2bfb0626.bbf15a', name 'imageRequest', method 'GET', 'ret' :"bin", "url":http://YOUR_CAM_IP/image.jpg", "tls":", "x":1320,"y":4600,"draden":[["79c3426c.7df78c ","bf8a81cf.8f74","945489e7.cfc1d8"]]},{"id":835ede3.e20822", type"injecteren", "z":2bfb0626.bbf15a", "naam": "regularRequest", "topic" ", "payload" ", "payloadType "date", "repeat" 10 ", crontab ", "once":false, "onceDelay" :0.1,"x":1120,"y":4600,"draden":[["50183f7f.5ae77"]]},{"id":bf8a81cf.8f74", "type":debug", z '2bfb0626.bbf15a',name 'debug', 'actief':false,'tosidebar':true,'console':false,'tostatus':false,'complete 'true', x":1510,"y":4680,"draden":[]},{"id 'd86c30df.cda1d', 'type 'ui_template', z '2bfb0626.bbf15a', groep "4615860e.37a298","name"DashboardViewer"bestelling":7,"width":6""height""6"format""Camera
Afbeelding ophalen","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":"payload ","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":"Home","icon": "dashboard"}]

Veel plezier met het project

Ik hoop dat alles werkte zoals beschreven. Zo niet, of als je vragen of suggesties hebt, laat het me weten in de commentaren. Ik zal dit dan zo nodig aan het artikel toevoegen.
Ideeën voor nieuwe projecten zijn altijd welkom. 🙂

PS Veel van deze projecten - vooral de hardwareprojecten - kosten veel tijd en geld. Natuurlijk doe ik dit omdat ik het leuk vind, maar als je het cool vindt dat ik de informatie met je deel, dan zou ik blij zijn met een kleine donatie aan het koffiefonds. 🙂

Koop Me a Coffee op ko-fi.com       

6 comments

  1. Hallo Fab,

    wanneer ik je stroom in Node-Red wil importeren, krijg ik een foutmelding:

    SyntaxError: onverwacht token i in JSON op positie 842
    bij <img id="img" src="\"

    Kun je me een hint geven wat er precies mis is? Het probleem zit hem in het script van het dashboard
    kijkers

    Groetjes Hausen

    1. Hallo Hausen,
      Bedankt voor de tip. Dit kwam door de plugin die ik gebruik om de code (min of meer) geformatteerd weer te geven. :/
      Ik heb het nu aangepast en hoop dat het voor jou ook werkt.
      Ik zou het leuk vinden als je me laat weten of het werkt. 🙂
      Hartelijke groeten
      Fab

  2. Hallo Fab,

    Bedankt voor uw feedbacksignaal. Helaas werkt het nog niet. Er is helemaal geen code in de DashboardViewer
    meer, er staat gewoon "Camera".

    Groetjes Hausen

      1. Goedemorgen Fab,

        bijna perfect. Helaas ontbreekt de vermelding msg.payload nog steeds in het knooppunt “image preview”. Jij draagt het
        deze werkt alles meteen als je de URL van de camera hebt aangepast.

        Bedankt voor je inzet en je steun.

        Groetjes Hausen

        1. Hé Hausen,
          Hey man Het wordt gênant. 😀 Bedankt voor de tip! Zal het corrigeren. Ik ben blij dat het werkt.
          Nogmaals bedankt en vriendelijke groeten
          Fabian

Kommentar hinterlassen

Het e-mailadres wordt niet gepubliceerd. Erforderliche Felder sind mit * markiert

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.