허락을 받기 전에 MediaStream 카메라 및 마이크 레이블이 필요합니까?

Question

이 일을 code의이 종류를 얻을 사소한 :

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

어떻게 장치를 선택하기 전에 어떻습니까?

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)는 false입니다.

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

:

은 내가 여러 캠과 마이크를 지원하기 위해, 그래서처럼 사용하기 때문에 특정 장치가 여기에 선택해야합니다 그래서 나는 추한 내 입력에 dev.deviceId을 사용해야합니다

내 카메라 및 마이크 용 레이블을 얻으려면 어떻게해야합니까? 사용자가 테마에서 선택할 수 있도록하려면 어떻게해야합니까?

Answer 1

으로 연결되는 .then() 내에서 navigator.mediaDevices.enumerateDevices()으로 전화 할 수 있습니다. 프로토콜이 https:이고 장치 또는 장치에 대한 사용 권한이 부여 된 경우 MediaDeviceInfo 개체 "label" 속성을 사용 가능한 미디어 장치로 설정해야합니다.

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