navigator.mediaDevices.enumerateDevices() 不在 firefox 上显示设备标签

Question

我正在研究媒体控制功能。我从下拉列表中向 select 显示设备名称，它在 chrome 上工作正常，但在 firefox 上它不会获取标签或设备名称。

Answer 1

navigator.mediaDevices.enumerateDevices() returns 通过 MediaDeviceInfo 实例数组实现的承诺。

它适用于 Firefox 56.0（64 位）。

你可以这样做：

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

其中数据是包含所有 MediaDeviceInfo 实例列表的数组。

更多信息在这里： https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

Answer 2

如果未授予相应权限，

navigator.mediaDevices.enumerateDevices() 将 return 媒体设备信息中的空标签属性值。

为了让它工作，我在授予所有媒体权限之后放置了这个函数，所以它return也是一个标签属性值。

Answer 3

您需要先授予权限。试试这个代码

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

Answer 4

为了补充答案，在 Firefox 上，如果没有更多活动的 MediaStream，从 navigator.mediaDevices.enumerateDevices() 获得的设备标签也将设置为空字符串，即使应用程序之前已通过调用 navigator.mediaDevices.getUserMedia().

临时授权访问设备

在下面的代码中，navigator.mediaDevices.enumerateDevices() 将首先显示标签（因为权限是从 navigator.mediaDevices.getUserMedia() 授予的）：

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/pensive-hawking-hswzi

参考： https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/label

navigator.mediaDevices.enumerateDevices() 不在 firefox 上显示设备标签

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

javascript

firefox

video-streaming

tokbox