1

让这种代码工作很简单：

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。所以我必须dev.deviceId在我的输入中使用，这很难看：

相机选择画面

我需要这里选择的特定设备，因为我使用它来支持多个摄像头和麦克风：

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

如何获取相机和麦克风的标签，以便用户可以在主题中选择它们？

4

1 回答 1

2

您可以navigator.mediaDevices.enumerateDevices()在.then()链接到的范围内调用navigator.mediaDevices.getUserMedia()。当协议是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))
于 2017-10-11T02:01:42.550 回答