navigator.mediaDevices.enumerateDevices() returns empty labels

问题

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.

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/60297972/navigator-mediadevices-enumeratedevices-returns-empty-labels