navigator.mediaDevices.enumerateDevices() 不在 Firefox 上显示设备标签答案

【问题标题】：navigator.mediaDevices.enumerateDevices() not display device label on firefoxnavigator.mediaDevices.enumerateDevices() 不在 Firefox 上显示设备标签
【发布时间】：2018-03-20 19:01:37
【问题描述】：

我正在研究媒体控制功能。我正在显示要从下拉列表中选择的设备名称，它在 chrome 上运行良好，但在 Firefox 上它不会获取标签或设备名称。

【问题讨论】：

我在 Firefox 上遇到了同样的问题。

标签： javascript firefox video-streaming tokbox

【解决方案1】：

navigator.mediaDevices.enumerateDevices() 如果没有授予相应的权限，将在媒体设备信息中返回一个空的标签属性值。

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

【讨论】：

它对我来说很好。
只有在权限允许的情况下才会获取设备标签。
作为补充，如果您使用this code sample预填充用户的音视频设备列表，您可以在列表旁边添加一个刷新按钮，该按钮将请求相应的麦克风和摄像头权限然后允许您使用适当的标签重新填写设备列表（如果允许）。 function refreshDeviceList() { navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(stream => { stream.getTracks().forEach(t=>t.stop()); fillDeviceList() }) }（不要忘记处理任何错误）

【解决方案2】：

为了补充答案，在 Firefox 上，在没有更多活动的MediaStream 的情况下，即使应用程序先前已被临时授权调用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

【讨论】：

这应该是公认的答案。在枚举设备之前停止获取的流会导致空标签（在 Firefox 上）。感谢您的详细回答。

【解决方案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 实例列表的数组。

【讨论】：

【解决方案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!');
        }

【讨论】：