使用 getUserMedia 获取指定设备的媒体流

在WebRTC应用程序中，使用getUserMediaAPI可以访问本地媒体设备（如摄像头和麦克风），并生成一个可供WebRTC使用的MediaStream对象。但是，如果用户拥有多个媒体设备，或者需要手动切换媒体设备，程序员就需要使用 deviceId参数来控制要使用哪个媒体设备。

使用方法

使用getUserMedia方法时，可以通过constraints参数来指定设备ID:

navigator.mediaDevices.getUserMedia({
  audio: {
    deviceId: <audio-device-id>
  },
  video: {
    deviceId: <video-device-id>
  }
})
.then(function(stream) {
  // 成功获取媒体流
})
.catch(function(error) {
  // 处理错误
});

这里的audio-device-id和video-device-id分别是音频和视频设备的ID，可以通过以下方式获取：

navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
  });
})
.catch(function(error) {
  console.error(error);
});

这个示例代码会列出所有可用的设备，包括麦克风和摄像头，以及他们的deviceId值。在使用时，只需将设备的deviceId值作为constraints参数的一部分即可。

注意事项

• 如果指定的设备不可用，getUserMedia会抛出NotFoundError错误。因此，程序员需要对此进行处理。
• 在某些浏览器（如Safari和Internet Explorer）上，不支持deviceId参数。在这种情况下，程序员需要使用MediaStreamTrack.getSources()方法获取可用设备，并手动筛选要使用的设备。
• 如果多个页面同时使用相同的音视频设备，可能会遇到竞争问题，导致所有页面无法获取媒体流。此时，程序员需要使用navigator.mediaDevices.enumerateDevices()方法获取所有可用设备，并在用户选择设备后，从页面中的getUserMedia方法中的deviceId参数中过滤掉其他已经被占用的设备。