22

Background

The machine I am trying to implement this on contains multiple cameras, I want to select the camera in the code. (all machines have the same hardware)

Issue

I am trying to implement a custom function before requesting video access where I manually set which device that should be used to prevent selection of wrong camera, but when I use

await navigator.mediaDevices.enumerateDevices()

I get empty labels for available video camera devices.

Hoshani
  • 746
  • 1
  • 10
  • 27

3 Answers3

52

navigator.mediaDevices.enumerateDevices() will return an empty label attribute value if the permission for accessing the mediadevice is not given. Try using it after getUserMedia.

(async () => {   
  await navigator.mediaDevices.getUserMedia({audio: true, video: true});   
  let devices = await navigator.mediaDevices.enumerateDevices();   
  console.log(devices); 
})();
Karthik
  • 2,282
  • 2
  • 22
  • 23
  • 1
    but how is google meet accessing these labels when i haven't given it the permission and its not only in chrome but in firefox as well. Really wierd how they are getting this info. – orangespark Mar 02 '20 at 09:07
  • 1
    are you sure you have not given permission for accessing video or audio? Make sure the entry is not present here - chrome://settings/content/camera As far as i have seen hangouts asks for camera and microphone as soon as you click Video call. – Karthik Mar 02 '20 at 09:53
  • 2
    it asks for permission if the camera needs to be accessed has to be shown but the labels are shown before giving permission. I was amazed how it was working – orangespark Mar 02 '20 at 14:48
  • 3
    Note that the enumerate calls don't work on a local dev machine. They have to be deployed to your website in order to function properly. – fmacdee Apr 28 '20 at 04:06
  • 3
    Thanks, It helped me. – Pujan Shah Oct 27 '20 at 20:14
  • It does not work with all Huawei devices and sometimes it doesn't work with iPhones (latest) – Igor Kurkov Nov 26 '20 at 19:04
  • @orangespark Google Meet actually doesn't do fair play when it comes to media access. They have an extension baked into Chromium (even Edge) that they use to access the screen and other media devices. This is what enables them to specifically share a tab a window or the whole screen as well. Took me a lot of reverse engineering to find that out. – david Jul 21 '22 at 11:55
  • @fmacdee it is so crucial that you pointed out it doesnt on a local dev machine. would like to know is there any official doc out there? – zeroflaw Sep 06 '22 at 01:59
  • @zeroflaw not that I have seen, unfortunately... – fmacdee Sep 26 '22 at 21:12
2

I was having the same issue, turns out it was to do with permissions on accessing direct files, so you will need to put it on localhost if that is your issue.

CakDoesCode
  • 31
  • 3
-5

I resolved this issue by just putting my root ca to chrome. It means you should make chome browser recognizing your web server is trustworthy.

owen_lee
  • 1
  • 1