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.

Answer 1

To complement the answers, on Firefox, the device labels obtained from navigator.mediaDevices.enumerateDevices() will also be set to the blank string in the case where there is no more active MediaStream, even though the application has been previously temporarily authorized to access the devices by calling navigator.mediaDevices.getUserMedia().

In the code below, the navigator.mediaDevices.enumerateDevices() will display the labels first (because the permission was granted from 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)
})

But if you clear the tracks of the created MediaStream, calling navigator.mediaDevices.enumerateDevices() again will result in labels being empty:

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)
  })
})

And you actually have to call navigator.mediaDevices.getUserMedia() again for a temporary permission to access the devices:

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)
})

Example here: https://codesandbox.io/s/pensive-hawking-hswzi

Reference: https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/label