navigator.mediaDevices.enumerateDevices() returns empty labels

Question

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.

Solution

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); 
})();