如何获取用户在请求权限对话框中选择的媒体设备ids？

Question

我希望我的用户选择所需的音频输入设备和视频输入设备。在第一次请求getUserMedia时，用户将看到这样的对话框(Opera )：

​

​

用户可以在此弹出对话框中选择所需的设备。但是，是否有任何方法可以获得用户从此对话框中选择的所选deviceIds？承诺返回对流的访问，但该流的id/名称与设备无关。

我使用了这个例子并试图修改它：https://webrtc.github.io/samples/src/content/devices/input-output/

我的目的是同步弹出窗口中的选定设备和网站选择。有什么想法吗？

Answer 1

您可以使用.getSettings().deviceId在MediaTrack对象上获得设备id，然后使用此设备id与navigator.mediaDevices.enumerateDevices()中的设备匹配，一旦匹配，您将得到一个具有以下属性的对象：

deviceId:"<device id>"
groupId:""
kind:"videoinput"
label:"Integrated Webcam (<id>)"

获取getUserMedia对象的示例MediaTracks .

navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 1280, height: 720 } })
.then(function(stream) {
  var tracks = stream.getTracks();
  for(var i = 0; i < tracks.length; i++){
     GetDevice(tracks[i].getSettings().deviceId)
  }
})
.catch(function(err) {
  /* handle the error */
});

和一个示例函数，它将匹配ids以获得所选的设备.

function GetDevice(id){
  navigator.mediaDevices.enumerateDevices()
  .then(function(devices) {
    devices.forEach(function(device) {

      if(device.deviceId == id){
          console.log(device.kind + ": " + device.label != undefined ? device.label : 'Default');
      }
    });
  })
  .catch(function(err) {
    console.log(err.name + ": " + err.message);
  });
}

查看我的JSFiddle中的示例代码。