navigator.mediaDevices.enumerateDevices（）在Firefox上不显示设备标签

Question

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

Answer 1

为了补充答案，在 Firefox 上，navigator.mediaDevices.enumerateDevices()在没有更多活动的情况下，从 获取的设备标签也将设置为空白字符串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/pense-hawking-hswzi

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

Answer 2

navigator.mediaDevices.enumerateDevices() 如果未授予各自的权限，则它将在媒体设备信息中返回一个空的标签属性值。

为了使其工作，我在授予所有媒体权限之后放置了此函数，因此它也返回标签属性值。