navigator.mediaDevices.enumerateDevices() not display device label on firefox

Question

I am working on media control functionality. I am displaying device name to select from a dropdown and it's working fine on chrome but on firefox it will not fetching label or device name.

I am getting same issue on firefox. – Softobiz T Oct 09 '17 at 14:27 — Softobiz T, Oct 09 '17 at 14:27

score 8 · Accepted Answer · edited Aug 08 '18 at 18:50

8

navigator.mediaDevices.enumerateDevices() will return an empty label attribute value in the media device info if the respective permissions are not granted.

To make it work, I placed this function after all of the media permissions have been granted so it returns a label attribute value as well.

edited Aug 08 '18 at 18:50

Manik

1,427
9
17

answered Oct 10 '17 at 06:21

Anuj Negi

438
4
23

It's Working fine for me. – Softobiz T Oct 10 '17 at 06:22
It will get device label only if permissions are allowed. – Anuj Negi Oct 11 '17 at 08:32
As an addendum to this, if you use [this code sample](https://developers.google.com/web/updates/2015/10/media-devices#enumeratedevices) to prefill a user's audio and video device list, you can add a refresh button next to the list, which will request the appropriate mic and camera permissions and then allow you to refill the device list with their proper labels if granted. `function refreshDeviceList() { navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(stream => { stream.getTracks().forEach(t=>t.stop()); fillDeviceList() }) }` (don't forget to handle any errors) – samthecodingman Apr 27 '20 at 07:26

score 3 · Answer 2 · answered Oct 09 '17 at 16:02

navigator.mediaDevices.enumerateDevices() returns a promise that's fulfilled with an array of MediaDeviceInfo instances.

It worked for me in Firefox 56.0 (64-bit).

You can do something like this:

navigator.mediaDevices.enumerateDevices()
.then((data) => {
  console.log('data', data);
})
.catch((err) => {
  console.log('error getting MediaDeviceInfo list', err);
});

where data is the array that contains the list of all MediaDeviceInfo instances.

more info here: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

score 0 · Answer 3 · answered Sep 07 '20 at 06:22

You need to grant the permissions first. try this code

if (navigator.mediaDevices.getUserMedia) {
            console.log('getUserMedia supported.');

            const constraints = {audio: true};
            let chunks = [];

            let onSuccess = function (stream) {

                if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
                    console.log("enumerateDevices() not supported.");
                    return false;
                }

                //List microphones.
                navigator.mediaDevices.enumerateDevices().then(function (devices) {
                    devices.forEach(function (device) {

                        if (device.kind === "audioinput") {
                            console.log(device.label);//Other parameters device.kind/device.deviceId
                        }

                    });
                }).catch(function (err) {
                    console.log(err.name + ": " + err.message);
                });

            }

            let onError = function (err) {
                console.log('The following error occured: ' + err);
            }

            navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);

        } else {
            console.log('getUserMedia not supported on your browser!');
        }

navigator.mediaDevices.enumerateDevices() not display device label on firefox

3 Answers3

Linked