Node-red-dashboard-2-ui-webcam nightmare

General
1

Hi all.

I'm new on this forum.
I'm trying to use this node, but I can't make it work . I push the on-off icon in the dashboard window but nothing happens. I can open webcam with vlc player without trouble.

I'm using Node-red v5.0.9 and Node.js v22.23.4.

vue is already installed, but no debug messages or errors from node.
Chromium have permission for cameras too, but don't ask anything.

Thanks in advance.

[
    {
        "id": "5a835a85bf8cd2ec",
        "type": "tab",
        "label": "Flujo 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "d6be54455eeea759",
        "type": "inject",
        "z": "5a835a85bf8cd2ec",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "on",
        "payloadType": "str",
        "x": 190,
        "y": 380,
        "wires": [
            [
                "b14bf94f8be4f8fb"
            ]
        ]
    },
    {
        "id": "b14bf94f8be4f8fb",
        "type": "ui-webcam",
        "z": "5a835a85bf8cd2ec",
        "name": "",
        "group": "791bbdc2afef68ef",
        "width": 0,
        "height": 0,
        "passthru": false,
        "qrDetection": false,
        "imageWidth": 640,
        "imageHeight": 480,
        "imageQuality": 0.8,
        "x": 410,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "791bbdc2afef68ef",
        "type": "ui-group",
        "name": "Group 1",
        "page": "3108298ceb31cf38",
        "width": "14",
        "height": "9",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default",
        "tab": ""
    },
    {
        "id": "3108298ceb31cf38",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "738f0ea867901e69",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "cca97d2d0a0db1fc",
        "breakpoints": [
            {
                "name": "Default",
                "px": 0,
                "cols": 3
            },
            {
                "name": "Tablet",
                "px": 576,
                "cols": 6
            },
            {
                "name": "Small Desktop",
                "px": 768,
                "cols": 9
            },
            {
                "name": "Desktop",
                "px": 1024,
                "cols": 12
            }
        ],
        "tabs": [],
        "order": 1,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "738f0ea867901e69",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "cca97d2d0a0db1fc",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#fcfcfd",
            "primary": "#0d74ce",
            "bgPage": "#f9f9fb",
            "groupBg": "#ffffff",
            "groupOutline": "#d9d9e0"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "fde40206e8f9e2c0",
        "type": "global-config",
        "env": [],
        "modules": {
            "@sumit_shinde_84/node-red-dashboard-2-ui-webcam": "1.1.2",
            "@flowfuse/node-red-dashboard": "1.34.0"
        }
    }
]
2

Welcome to the forum.

What url are you using to access the dashboard?

3

Hi, welcome! Your flow looks fine. Can you tell us the exact URL you're using to open the dashboard?

My guess is you're opening it with an IP address, something like http://192.168.x.x:1880/dashboard. Chromium only allows webcam access over HTTPS or on localhost, so over plain HTTP with an IP it blocks the camera without asking for permission. This happens even if Chromium is running on the same machine as Node-RED.

You can check it in the console when you click the button. You'll probably see an "[ui-webcam] Error accessing media devices" message.

To fix it:

  • If Chromium is on the same machine as Node-RED, open http://localhost:1880/dashboard instead of the IP.
  • If you're opening it from another device, you'll need to set up HTTPS for Node-RED.

Also, don't have the camera open in VLC while testing, since on Linux usually only one app can use it at a time.

If you're already using localhost, post the console error here and I'll take a look.

4

Hi, thanks for the reply.

I'm accesing via localhost (127.0.0.1) as "localhost:1880".

26 Oct 16:19:51 - [info] Node-RED version: v5.0.9
26 Oct 16:19:51 - [info] Node.js  version: v22.23.4
26 Oct 16:19:51 - [info] Linux 6.12.109+rpt-rpi-v8 arm64 LE
26 Oct 16:19:51 - [info] Loading palette nodes
26 Oct 16:19:54 - [info] Settings file  : /home/pi/.node-red/settings.js
26 Oct 16:19:54 - [info] Context store  : 'default' [module=memory]
26 Oct 16:19:54 - [info] User directory : /home/pi/.node-red
26 Oct 16:19:54 - [info] Projects directory: /home/pi/.node-red/projects
26 Oct 16:19:54 - [info] Server now running at http://127.0.0.1:1880/
26 Oct 16:19:54 - [info] Active project : Camara_Engobe
26 Oct 16:19:54 - [info] Flows file     : /home/pi/.node-red/projects/Camara_Engobe/flows.json
26 Oct 16:19:54 - [warn] Using unencrypted credentials
26 Oct 16:19:54 - [info] Starting flows
26 Oct 16:19:54 - [info] [ui-base:My Dashboard] Node-RED Dashboard 2.0 (v1.34.0) started at /dashboard
26 Oct 16:19:54 - [info] [ui-base:My Dashboard] Created socket.io server bound to Node-RED port at path /dashboard/socket.io
26 Oct 16:19:54 - [info] Started flows

No errors, but every time I start node-red and I open chromium, the flow appears as "undeployed".

5

So are you VNCing to the PI or do you have a monitor/keyboard connected to PI? Chrome is very often far behind latest and in need of an update on the PI. what version are you rocking on the PI?

Did you look in the browsers console? You might not have server side errors in node-red but you may have client side errors in the browser.

Please explain exactly what you mean. Are you saying after a refresh on node-red editor the "deploy" button appears RED and your flow nodes are present? or old flows come back? / different flows are on your node-red canvas? / canvas is empty?

Have you exposed the PI to the internet (opened a port on your router to allow external access into node-red?)

6

Adding to Steve's questions. To check the browser console, open the dashboard, right-click anywhere on the page, choose "Inspect" and open the "Console" tab. Then click the power button on the widget and look for red errors starting with "[ui-webcam]". Please post them here.

7

When I open localhost:1880 in browser, deploy button always appear in red. No chromium console errors at this time. If I push the power button in the dashboard camera widget, nothing, no console messages or errors. I push "deploy", nothing happens in consoles. Button turn gray, but nothing more. If I reload page, it turns red again.

8

Nothing appears in chromium console. Thanks, I was confused about what console I need to check.

9

What about this ↑

10

Hi Steve.
Pi is direct to monitor/keyboard.
Chromium Versión 155.0.8059.79

11

Nothing with "[ui-webcam]" Seems power button don't make nothing.

12

If you connect to node-red on the pi from a PC do you still see the deploy button problem?

13

Hi Colin.

Yes, same problem. If I reload page from a PC deploy button turn red again. I think is a version issue. I tried with Trixie first, then Bookworm, but I have the same. Maybe something about node.js or node-red version, but I can't find the problem.

14

I forget mention dots to select camera don't appear, and I can open the webcam in VLC.

15

I think this is worth pursuing in case it is related to your issue.

Are any of your flow tabs marked with a blue dot?
image
If so then look in there to see which node is also showing the dot. That will tell you which node that node-red thinks has changed. Select that node and export and paste it here so we can see how it i configured.

16

I’ll take a look today or tomorrow morning using a setup similar to yours, investigate the issue, and fix it if needed. I’ll let you know if I need any additional information from you.

17

Hi Colin.
Yes, blue dot appears every time I reload page.
I attach node as your request:

[
    {
        "id": "3cda3cac291aaf9d",
        "type": "ui-webcam",
        "z": "5a835a85bf8cd2ec",
        "name": "",
        "group": "791bbdc2afef68ef",
        "width": 0,
        "height": 0,
        "passthru": false,
        "qrDetection": false,
        "imageWidth": 640,
        "imageHeight": 480,
        "imageQuality": 0.8,
        "x": 430,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "791bbdc2afef68ef",
        "type": "ui-group",
        "name": "Group 1",
        "page": "3108298ceb31cf38",
        "width": "14",
        "height": "9",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default",
        "tab": ""
    },
    {
        "id": "3108298ceb31cf38",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "738f0ea867901e69",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "cca97d2d0a0db1fc",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "tabs": [],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "738f0ea867901e69",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "cca97d2d0a0db1fc",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#fcfcfd",
            "primary": "#0d74ce",
            "bgPage": "#f9f9fb",
            "groupBg": "#ffffff",
            "groupOutline": "#d9d9e0"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "8404200c9a3491c8",
        "type": "global-config",
        "env": [],
        "modules": {
            "@sumit_shinde_84/node-red-dashboard-2-ui-webcam": "1.1.2",
            "@flowfuse/node-red-dashboard": "1.34.0"
        }
    }
]