USB-Webcam on dashboard


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


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 (

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 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 - 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.

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.