Étiquettes de caméra et de micro MediaStream avant l'autorisation?

Question

Il est trivial d'obtenir ce genre de code au travail:

const videoTracks = this.localStream.getVideoTracks(); 
const audioTracks = this.localStream.getAudioTracks(); 
if (videoTracks.length > 0) 
    this.trace('Using video device: ' + videoTracks[0].label); 
if (audioTracks.length > 0) 
    this.trace('Using audio device: ' + audioTracks[0].label); 

Que diriez-vous avant que les appareils sont choisis?

navigator.mediaDevices 
    .enumerateDevices() 
    .then(this.gotDevices.bind(this)) 
    .catch(this.alertsService.add.bind(this.alertsService)); 
} 

gotDevices(deviceInfos: MediaDeviceInfo[]) { 
    this.mediaDeviceInfos = deviceInfos; 
    this.mediaDeviceInfos.forEach(device => { 
     if (device.kind === 'audioinput') 
      this.mics.push(device); 
     else if (device.kind === 'videoinput') 
      this.cams.push(device); 
     else 
      console.warn(`Unexpected: ${JSON.stringify(device)}`); 
    }); 
} 

this.mediaDeviceInfos.some(dev => dev.label) est false. Je dois donc utiliser dev.deviceId dans mon entrée, ce qui est laid:

J'ai besoin du dispositif spécifique choisi ici parce que je l'utilise comme si, pour supporter de multiples cames et micros:

const constraints: MediaStreamConstraints = { 
    audio: { advanced: [{ deviceId: mic.deviceId, groupId: mic.groupId }] }, 
    video: { advanced: [{ deviceId: cam.deviceId, groupId: cam.groupId }] } 
}; 

Comment obtenir des étiquettes pour mon appareil photo et mon micro, afin que l'utilisateur puisse les choisir dans le thème?

Answer 1

Vous pouvez appeler navigator.mediaDevices.enumerateDevices() au sein de .then() chaîné à navigator.mediaDevices.getUserMedia(). Lorsque le protocole est https: et que la permission est accordée au périphérique ou aux périphériques, la propriété MediaDeviceInfo objet "label" doit être définie sur le périphérique de support disponible.

navigator.mediaDevices.getUserMedia(/* {video:true, audio:true} */) 
.then(stream => 
    navigator.mediaDevices 
    .enumerateDevices() 
    .then(devices => { 
     return devices 
    }) 
    .catch(err => {throw err}) 
) 
.then(devices => { 
    console.log(devices); 
    for (const mediaDeviceInfo of devices) { 
    const {deviceId, kind, label} = mediaDeviceInfo; 
     console.log(deviceId, kind, label); 
    } 
}) 
.catch(err => console.error(err))