# Ui Webcam node camera select

**URL:** <https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386>\
**Category:** Dashboard\
**Created:** [22 September 2021 11:50 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386 "2021-09-22T11:50:27Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaap](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jaap](https://discourse.nodered.org/u/jaap)\
**Post date:** [22 September 2021 11:50 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/1 "2021-09-22T11:50:27Z")

</div>

Hi. I use the node-red-node-ui-webcam node and it works fine but when i use it on a mobile phone with a lot of camera's inside, the node is always startup with the front camera. I can switch it to the back camera with the smal dropdown menu. But is it possible to startup automatically with the back camera??

Maybe it is a option to add a new config item to this node. So that you can select which camera is the first one to startup.....

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [23 September 2021 03:06 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/2 "2021-09-23T03:06:56Z")

</div>

I thought maybe it would remember last used camera... but (after fighting with Chrome to honor me with permission to use my own camera 😛 ) I realized that is NOT the case.

I would suggest asking on the GitHub page, for this dynamically controllable selection feature to be added... but this is one of the core nodes that seem all lumped into one, on said page. So I guess asking here is what we do.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 September 2021 05:25 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/3 "2021-09-23T05:25:41Z")

</div>

Not sure how that should be implemented. Most users use their dashboard on multiple devices. For example:

- On a smartphone which has a rear and a back cam.
- On a labtop which only has a rear camera.

Some options:

1. You cannot show a dropdown in the node's config screen, to select one of the available cams as default one. Because the node (which is running on the server side ), isn't aware of that...
2. Keeping track of the last selected cam per client device somehow on the server side, seems complex to me...
3. Perhaps the node can store (e.g. using [this](https://www.w3schools.com/jsref/prop_win_localstorage.asp) the last selected device on the client side, and select it automatically again the next time you open your dashboard. Such a behaviour could be activated explicit with a checkbox on the node's config screen.

Bart

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [23 September 2021 06:37 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/4 "2021-09-23T06:37:55Z")

</div>

Any device with multiple cameras has some way of numerating them... as shown by being able to chose in the dropdown. Perhaps an option to inject a command to use the 1st, 2nd, 3rd, etc. camera availed.

That way, if a device only has on camera, that is all it shows regardless of choice, but if it has more it choses the number listed.

Yes, that may mean it isn't always the right alternate camera, depending on device, but as most are not going to use that feature across many devices, then it is at least an option.

---

<div class="post-metadata">

**Author:** ![jaap](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jaap](https://discourse.nodered.org/u/jaap)\
**Post date:** [23 September 2021 07:03 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/5 "2021-09-23T07:03:01Z")

</div>

I used the standard node "node-red-node-ui-webcam" ver 0.3.0 I think there is no option to selected which camera is startup. when i test the dashboard on a system with one camera(laptop) then it is off course always startup with the first camera. But on my phone with 4 camera it is always startup with camera one, and that is the front camera. I try to startup with camera 3 (rear camera)

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [23 September 2021 07:13 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/6 "2021-09-23T07:13:53Z")

</div>

As the creator of the webcam node, I agree this would be a very useful feature to add. However I'm unlikely to have time to do it at any point soon.

If someone wanted to contribute a change, I'd be happy to discuss/review etc.

The main design question is, as has been mentioned, how exactly to pick the preferred camera.

For the cases where the dashboard is only ever viewed on one particular device, hard-coding the camera in the node config would be okay - but it would still have to do the right thing when viewed on a different device.

In many cases, the computer where the flows are edited is not the computer where the dashboard is viewed. So whilst picking a camera in the node config would work in some cases, it wouldn't make sense in all.

But regardless, if someone wanted to give it a go, I'm sure we'd welcome the contribution.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [23 September 2021 07:38 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/7 "2021-09-23T07:38:02Z")

</div>

> [@knolleary](#):
>
> So whilst picking a camera in the node config would work in some cases, it wouldn't make sense in all.

Most devices would have either one, two or perhaps three cameras... anything more almost gets into the realm of use something different for the job 😉

So a simple option (via settings and/or msg) to have the node always chose the 2nd (or 3rd) camera (unless there is only one, and fall back to next last of a higher choice is offered then availed) would seem applicable. One could test and set the best option for most desired use case across needed devices. Even have multiple nodes to be chosen from based on device used to view.

> [@knolleary](#):
>
> But regardless, if someone wanted to give it a go, I'm sure we'd welcome the contribution.

Wish I could... probably already would have tried instead of elevating this topic. But this is all I can do.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 September 2021 08:04 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/8 "2021-09-23T08:04:30Z")

</div>

Looks like the two options are

1 - allow setting an index in the config - and fail back to 0 or highest in list (TBD) if not valid for that device.  
2 - store last chosen in the browser localStorage - so would need to be set by the user the first time the node was used by each device.

1 is "easy" to implement as it's standard Node-RED node config type work.  
2 is harder as I'm not sure it's been done before - certainly not accessing localStorage from a ui node so would need more investigation (if it is even possible).

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 September 2021 08:22 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/9 "2021-09-23T08:22:02Z")

</div>

Actually option 2 also looks doable - so which would users prefer ? I think I prefer 2 as it is one less thing to try to guess/configure for the app writer. But opinions please before I write any code.

---

<div class="post-metadata">

**Author:** ![jaap](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jaap](https://discourse.nodered.org/u/jaap)\
**Post date:** [23 September 2021 08:29 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/10 "2021-09-23T08:29:06Z")

</div>

I think option2 is the best way.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [23 September 2021 08:29 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/11 "2021-09-23T08:29:25Z")

</div>

Would this permit the user to change camera after the choice is made? Perhaps simply tapping the camera image should cycle through all cameras & store last used in browser storage ready for next time?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 September 2021 08:32 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/12 "2021-09-23T08:32:18Z")

</div>

There is already a drop down for the user to choose from  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf353021db64ee51b4e1b82476b73db8e6836736.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/0542c5a708266a1fced49fdbcdbd2c8d0b9b3367.png)

so yes the user can change at any time.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [23 September 2021 08:32 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/13 "2021-09-23T08:32:20Z")

</div>

Which ever way, I think it should be an option that could be passed in via a msg. I can see someone using it with multiple cameras and wanting them to switch based on a timer or a 'next' button or something else where it is done automatically.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 September 2021 08:37 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/14 "2021-09-23T08:37:58Z")

</div>

Really ? Is that an actual requirement ? No-one has asked for that.

---

<div class="post-metadata">

**Author:** ![jaap](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jaap](https://discourse.nodered.org/u/jaap)\
**Post date:** [23 September 2021 08:38 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/15 "2021-09-23T08:38:10Z")

</div>

Yes i know there is a drop down. But this is not a good option for me.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [23 September 2021 08:53 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/16 "2021-09-23T08:53:06Z")

</div>

> [@dceejay](#):
>
> Really ? Is that an actual requirement ? No-one has asked for that.

🙁 It's not an 'actual' requirement but a suggestion. I've been working on a security system with some others and just thought this would be a useful feature.....

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 September 2021 08:56 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/17 "2021-09-23T08:56:52Z")

</div>

so this needs the client device to have a dashboard browser open in order for you to grab pics... for a security system I would think you wouldn't want to rely on that being the case... and indeed most browsers need the user to allow the camera first as well... but I guess maybe.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [23 September 2021 09:57 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/18 "2021-09-23T09:57:06Z")

</div>

OK - PR raised

> <https://github.com/node-red/node-red-ui-nodes/pull/75>
>
> \<!--
> \## Before you hit that Submit button....
> 
> Please read our \[contribution …guidelines\](https://github.com/node-red/node-red-nodes/blob/master/CONTRIBUTING.md)
> before submitting a pull-request.
> 
> \## Types of changes
> 
> What types of changes does your code introduce?
> Put an \`x\` in the boxes that apply
> \--\>
> 
> \- \[\] Bugfix (non-breaking change which fixes an issue)
> \- \[X\] New feature (non-breaking change which adds functionality)
> 
> \<!--
> If you want to raise a pull-request with a new feature, or a refactoring
> of existing code, it \*\*may well get rejected\*\* if it hasn't been discussed on
> the \[forum\](https://discourse.nodered.org) or
> \[slack team\](https://nodered.org/slack) first.
> 
> \--\>
> 
> \## Proposed changes
> 
> 
> This PR lets the user set the default camera to use (via the select dropdown) and that is then stored in the browser localStorage for next time it is used.
> 
> It also adds and allows a \`msg.camera\` control message that can be set to the index in the list of available cameras (usually 0,1,2,3 etc) - if valid the stream will switch to that camera. If the camera is currently disabled it does NOT re-enable the camera.
> 
> \## Checklist
> 
> 
> \- \[x\] I have read the \[contribution guidelines\](https://github.com/node-red/node-red-nodes/blob/master/CONTRIBUTING.md)
> \- \[x\] For non-bugfix PRs, I have discussed this change on the forum/slack team.
> \- \[\] I have run \`grunt\` to verify the unit tests pass
> \- \[\] I have added suitable unit tests to cover the new/changed functionality

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 September 2021 10:12 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/19 "2021-09-23T10:12:23Z")

</div>

Nice work!!!

---

<div class="post-metadata">

**Author:** ![jaap](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jaap](https://discourse.nodered.org/u/jaap)\
**Post date:** [23 September 2021 10:25 UTC](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386/20 "2021-09-23T10:25:06Z")

</div>

So that's really fast. How can i use it?

[Next page](https://discourse.nodered.org/t/ui-webcam-node-camera-select/51386.md?page=2)