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

Question

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

用户可以在此弹出对话框中选择所需的设备。但是有没有办法从这个对话框中获取用户选择的选定设备ID？ promise 返回对流的访问，但此流的 ID/名称与设备无关。

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

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

Answer 1

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

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

获取 MediaTracks 对象的示例 getUserMedia...

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 */
});

和一个示例函数，它将匹配 id 以获取所选设备...

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示例代码。