navigator.mediaDevices.enumerateDevices() не отображает метку устройства в Firefox

Question

Я работаю над функциями управления мультимедиа. Я показываю имя устройства, чтобы выбрать из выпадающего списка, и он работает нормально на Chrome, но на Firefox он не будет получать метку или имя устройства.

Answer 1

navigator.mediaDevices.enumerateDevices() вернет пустое значение атрибута метки в информации устройства мультимедиа, если соответствующие разрешения не предоставлены.

Чтобы она работала, я поместил эту функцию после того, как были предоставлены все медиа-разрешения, поэтому она также возвращает значение атрибута метки.

Answer 2

Чтобы дополнить ответы, в Firefox метки устройств, полученные из, также будут установлены на пустую строку в случае, если больше нет активных, даже если приложение было ранее временно авторизовано для доступа к устройствам путем вызова.

В приведенном ниже коде сначала будут отображаться метки (поскольку разрешение было предоставлено от):

      let stream = null

navigator.mediaDevices.getUserMedia({audio: true, video: false})
.then(s => {
  stream = s
  navigator.mediaDevices.enumerateDevices().then(devices => {
    devices.forEach(device => {
      console.log('device.label :', device.label)
    })
  })
})
.catch(error => {
  console.log('Error :', error)
})

Но если очистить следы созданного MediaStream, звоню navigator.mediaDevices.enumerateDevices() снова приведет к тому, что метки будут пустыми:

      stream.getTracks().forEach(track => {
  track.stop()
})

// No more active MediaStream => empty labels
navigator.mediaDevices.enumerateDevices().then(devices => { 
  devices.forEach(device => {
    console.log('device.label :', device.label)
  })
})

И вам действительно нужно позвонить navigator.mediaDevices.getUserMedia() снова для временного разрешения на доступ к устройствам:

      navigator.mediaDevices.getUserMedia({audio: true, video: false})
.then(s => {
  navigator.mediaDevices.enumerateDevices().then(devices => {
    devices.forEach(device => {
      console.log('device.label :', device.label)
    })
  })
})
.catch(error => {
    console.log('Error :', error)
})

Пример здесь: https://codesandbox.io/s/rivate-hawking-hswzi

Ссылка:https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/label

Answer 3

navigator.mediaDevices.enumerateDevices() возвращает обещание, которое выполняется с массивом экземпляров MediaDeviceInfo.

У меня это работало в Firefox 56.0 (64-битная версия).

Вы можете сделать что-то вроде этого:

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

где data - массив, содержащий список всех экземпляров MediaDeviceInfo.

более подробная информация здесь: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

Answer 4

Сначала вам нужно предоставить разрешения. попробуйте этот код

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!');
        }