UI-WebCam node, is there a way to hide the camera select dropdown button?

Dashboard
1

Hi there,

I'm sure there's a super simple way to do this, I'm just not entirely sure I know it. I'm building a prototype of a webapp the utilizes Node-Red UI-WebCam to capture a barcode from an id. Everything works great but I would like to hide the camera selection dropdown arrow in the UI-WebCam node. The device used to connect to the node-red instance will only have one camera and thus users will not need to select other cameras. Also, it's in the way of the image while trying to lineup the barcode.

Additionally, is there any way to possibly overlay a square target onto the camera so users can lign up their barcode accurately?

Thanks so much for your help!

2

What settings do you have of the ui-webcam and/or are you sending any in via the msg?
how many webcam's do you have connected to the device running NR?

3

Hey @zenofmud thanks for the reply. Below are my answers to your questions.

Currently the only settings I have set are the ones in the screen shot below.

Screen Shot 2023-06-07 at 5.50.12 AM
Screen Shot 2023-06-07 at 5.50.12 AM982Ă—552 19.8 KB

The only message passed into the node is a msg.capture boolean set to "true".

The device running Node-Red doesn't have any webcams connected. The "client device" is just a chromebook that access node-red dashboard through chrome web browser. This device only has a front facing camera and no other camera's will be connected.

4

A nice enhancement Pull Request would be to not show the chooser if only one camera is detected.

5

@dceejay thanks for the suggestion.

Is this something that I can do/how might I go about doing this? I'm not a total noob, but in regards to doing a Pull Request it would honestly be my first.

Thanks for any help or pointers in the right direction!

6

I'll take a stab at this in the next day or two (on 'grampa duty' today and Friday). But I have a question

That option also allows you to turn off the camera. Should that be removed too or would adding an option to send msg.camera_state (on/off) suffice?

7

Good point - the end user should always have the option to turn off the camera ... hmmm

8

According to the help for the node,

webcam

A Node Red dashboard ui node to capture images from the browser's webcam.

Inputs

payloadBuffer | Boolean
If set to a Buffer containing an image, it will be displayed in the place of the webcam view on the dashboard. If set to null or false, the displayed image will be cleared.

But on my Mac it doesn't clear the image from the dashboard. I'm going to try it on a Pi (currently installing things on teh Pi so I can use the usb camera).

9

Andy, did you enable HTTPS access on the device running Node-RED?

if you look at teh ui-webcam documentation you will see:

Browser Support

This node will work in all modern browsers, but not IE.

If you are accessing the dashboard remotely (not via localhost), then you must use HTTPS otherwise the browser will block access to the webcam.

I just wanted to check before I dig any further.

10

@zenofmud

Thanks for taking a stab at this. I did get the HTTPS up and running and have a cert installed so I'm all good there. I even set up a proxy to force all HTTP traffic to HTTPS which I was pretty proud of myself for.

So my final steps are just basic UI beautification and user-proofing it to avoid someone clicking something and breaking the functionality. Let me know if there is anything I can help with or steps I can test!

(For what it's worth, for my purposes, I'd prefer to prevent the end user from turning the camera off. Essentially the app will act as a kiosk to scan so while I understand the implications of an always on camera, I'm not sure I'd want an end user to necessarily turn it off? But I understand why the option might be desired by others. I think I could definitely make use of msg.camera_state (on/off) option.)

Thanks so much to everyone for your support and help!

1 Like
11

Well I took a look and played a bit but this is over my head (sorry).
@dceejay - fyi

1 Like
12

Thanks for the attempt!

I'll keep playing with it and seeing what I can learn from various tutorials. Maybe @dceejay can throw some suggestions our way.

I appreciate your time!

13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.