Hello.
I try to use my USB Webcam (TRUST-vero) on my laptop via node-red
My Node-red instance is running on my VM-linux server.
I tried to include a live stream to my dashboard. I dont need to capture or save anything. Just a livestream.
I did some research here and found, that most people are using node-red-node-ui-webcam.
When i try to use the node, it does not work.
Now the part, where i dont know how to proceed. How can i get the live image of my laptop to my node red?
thank you
In my test, the camera must be on the same device that is running NR and the dashboard.
@dceejay The readme for the node says:
The node provides UI widget that will display a live image from the web camera on the device running the dashboard.
The device running the dashboard is also the device running NR...correct? So you can't put NR on device 1 and the camera on device 2 and open a dashboard on device 2 and expect to see the images from the webcam.
ahh ok. thank you for your answer
may i ask if you know a fast workaround?
I would need a live image of my device for demo a demonstration?
best regards
node-red-node-ui-webcam
Is not a server component, it starts up a camera that is on the client side.
It uses the MediaDevices and associated APIs of the client web browser
User A loads up the dashboard - User A can only see his camera
User B loads up the dashboard - User B can only see his camera
User A & B does not need to be running Node RED - only access the dashboard
Its an API that allows browsers to load up a camera, on the device that has the web browser open.
Web based QR Code scanners use this method often.
MediaDevices: getUserMedia() method - Web APIs | MDN (mozilla.org)
thank you. I will def. look at it.
I tried now to run my webcam localy for testing purpose. I cant even fullfill that.
When i put my node on my flow and deploy i get:
Error: Module not allowed
at Object.requireModule [as require] (C:\Users\MO\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\registry\lib\externalModules.js:103:19)
at Object.requireModule [as require] (C:\Users\MO\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\registry\lib\util.js:50:45)
at new WebcamNode (C:\Users\MO\.node-red\node_modules\node-red-node-ui-webcam\ui_webcam.js:134:26)
at Object.createNode (C:\Users\MO\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\util.js:90:27)
at Flow.start (C:\Users\MO\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\Flow.js:206:48)
at start (C:\Users\MO\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\index.js:371:33) {
code: 'module_not_allowed'
thank you
Last time I seen that error, it was due to an old version of Node RED and or dashboard, make sure your using the latest versions of both
If it can help you, I installed Node Red on Win10 with a PC equipped with an integrated webcam.you take a picture from the web cam and display it on the Dashboard:
instal : node-red-contrib-usbcamera from the palette
[{"id":"35f18345f50f3ec2","type":"ui_button","z":"89d3af175a223bca","name":"webcam","group":"60bff788.d10d28","order":3,"width":1,"height":1,"passthru":true,"label":"cam","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"go","payloadType":"str","topic":"testDetection","topicType":"str","x":390,"y":430,"wires":[["75b97e9991341f20"]]},{"id":"75b97e9991341f20","type":"usbcamera","z":"89d3af175a223bca","filemode":"0","filename":"image01.jpg","filedefpath":"1","filepath":"D:\\Documents\\Pictures\\Camera Roll","fileformat":"jpeg","resolution":"5","name":"","x":540,"y":430,"wires":[["695ed8b1b88af243"]]},{"id":"695ed8b1b88af243","type":"base64","z":"89d3af175a223bca","name":"","action":"str","property":"payload","x":580,"y":470,"wires":[["96efc2f989459ba4"]]},{"id":"96efc2f989459ba4","type":"ui_template","z":"89d3af175a223bca","group":"60bff788.d10d28","name":"tuto aff New pict","order":1,"width":10,"height":8,"format":"<!DOCTYPE html>\n<html>\n<head>\n<style>\ndiv.parent {\n position: relative;\n height: 480px ;\n}\ndiv.absolute {\n position: absolute;\n width: 100%;\n bottom: 0px;\n} \n\n</style>\n</head>\n<body>\n <div class=\"parent\">\n <div class=\"absolute\" >\n <img src=\"data:image/jpg;base64,{{msg.payload}}\" alt=\"Camera New Picture\" style=\"width:100%\"><br>\n {{msg.filename}}\n </div>\n </div>\n</body>\n</html>\n\n\n\n\n\n\n<!--\n<div>\n<img style=\"position:absolute;width:100%;bottom:0px;\" alt=\"Image not found\" \nsrc=\"data:image/jpg;base64,{{msg.payload}}\"/><br>\n</div>\n\n <div>\n {{msg.fileName}} {{msg.affSlideIndex}}/{{msg.numSlides}} \n </div> \n \n -->\n \n \n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":730,"y":470,"wires":[[]]},{"id":"60bff788.d10d28","type":"ui_group","name":"camStream","tab":"edb4afad.52228","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"edb4afad.52228","type":"ui_tab","name":"Home","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
Hi - no - the webcam used is attached to the browser device - ie where the dashboard is running (and not the server). The browser used must support navigator.mediaDevices
Ok, but it doesn't work in Safari, Firefox or Chrome on my Mac mini (Late 2012) using MoJave v10.14.6.
NR is running on my Mac mini M1 and the webcam is plugged into the Mac mini (Late 2012)
All I see is this on all three browsers
My only guess is..
Check System Preferences > Security & Privacy > Privacy > Camera & Microphone. Make sure Chrome (and others) are selected
navigator.mediaDevices is purely a Browser based API, so either the browser versions are too old, or its a permissions related issue on MacOS
I'm not sure Mojave is still supported so best check which versions of Safari etc - and see https://caniuse.com/?search=mediaDevices - also check the browser dev console for any error messages.
(Certainly works with the built in webcam in my MacBook - I don't have a USB webcam to test right now - and it also picks up my nearby iPhone and can use that also.)
sorry for the dumb question. but how do i use navigator.mediaDevices in combination with node-red?
If you just wanting to show your webcam in the browser (for the device looking at the Dash)
then you just use node-red-node-ui-webcam
that's exactly what its doing.
EDIT
A web Browser showing the webcam of the persons device that has the browser open is worlds apart from a browser displaying a remote webcam - they are entirely different technologies.
If you want to show remote webcams in your dashboard, your mileage may vary between a simple remote URL for the image (multipart/x-mixed-replace) or having to setup some transcoder (ffmpeg) to create a live stream using mjpeg
it really depends on your cameras offerings
Sorry @Manuel_o. the navigator.mediaDevices is a call the browser makes to access the webcam. So the browser must be able to support that and that is what the caniuse website can help show you.
From your initial post it looks like you have Node-RED running on a server - and then you are looking at the Dashboard on your laptop and the camera is plugged into the laptop. Depending on the operating system of the laptop you may need to install a device driver for the camera or some software so that it works locally. Then on the server you need to install the node-red-node-ui-webcam node and configure it. Then once deployed (on the server) - you should be able to view the dashboard (on the laptop) and that should have a webcam widget - with a camera icon in the bottom right. If you click on that it should show a list of cameras that it can access...
thank your for the answer.
Yes you are correct. My node red instance is running on my VM linux maschine.
There i have installed node-red-node-ui-webcam node and put the node to my group.
On my surface (where i visit the dashboard) i have an usb-cam.
I tested it first locally in a node-red instance and it worked, with the ui webcam node
When i enter the IP of my linux-VM, where also the webcam node is running, i see the widget with the camera symbol in the middle but nothing happes.
I am now ussing mozilla and tested in on chrome too.
What do i miss? So from the other posts is read out, that it cant work like that?!
Thank you
Aha - I think the real reason is this - javascript - Why navigator.mediaDevice only works fine on localhost:9090? - Stack Overflow
For media access that isn't localhost you must use https.
It its true. I „turned“ https on and now i can see the video from my own device, that is visiting the dashboard.
Now i fell realy dumb, because my original plan was, that extern user can log in from outside to my dashboard and can see what my webcam shows.
So i think the only way to fullfill this, is to let node red localy run on a laptop for example and open my public ip and my port to the outside, so that other people can see it?!
Has someone a better idea?
Thank you for all the support
Dont do that, you will get big problems if you open up ports to outside fully unprotected. Forget it if you feel unsure what you are doing
yeah i would not do it. i will aks our IT guy.
But does someone has an alternative idea?
I read and control my dosing pump via node-red. For demo purpose i would like that someone who is interested can log in into my dashboard (running on a VM linux maschine) with login creds and sees live the reaction of the pump when he changes something in the dashboard.
So thats why the webcam
thank you
Are you interested in just seeing the result - or do you need to review the feed, at any given moment?
If the former, use a combination of the exec node and ffmpeg to take a single frame capture, and send that to the dashboard as an image - say after 5s of the pump state being changed.
If you require a live stream - there is lots of scaffolding you need to put in place, and isn't a simple drop-in node setup.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy