Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 255
Hoshani Avatar asked Feb 19 '20 10:02

Hoshani


People also ask

What is enumerateDevices?

enumerateDevices() The MediaDevices method enumerateDevices() requests a list of the available media input and output devices, such as microphones, cameras, headsets, and so forth. The returned Promise is resolved with a MediaDeviceInfo array describing the devices.

What is navigator MediaDevices?

The Navigator. mediaDevices read-only property returns a MediaDevices object, which provides access to connected media input devices like cameras and microphones, as well as screen sharing.


1 Answers

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); 
})();
like image 135
Karthik Avatar answered Oct 09 '22 00:10

Karthik