How to choose input video device for webrtc?

在WebRTC中选择输入视频设备主要涉及以下几个步骤：

1. 获取设备信息

首先，需要使用navigator.mediaDevices.enumerateDevices()函数来获取系统中所有可用的媒体输入和输出设备的信息。这个函数会返回一个Promise，它解析为一个MediaDeviceInfo对象数组。每个MediaDeviceInfo对象包含了设备的deviceId, kind, label, 和groupId等属性。

javascript
async function getDevices() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  return devices.filter(device => device.kind === 'videoinput');
}

2. 选择视频设备

一旦获取到视频输入设备的列表，用户可以通过设备名称或其他标识选择一个特定的视频设备。在实际应用中，这通常通过一个下拉菜单让用户选择实现。

3. 请求视频流

选择了设备后，可以通过navigator.mediaDevices.getUserMedia()函数请求视频流，可以通过指定deviceId来选择特定的视频输入设备。constraints对象用于指定媒体类型和具体设备的ID。

javascript
async function getStream(deviceId) {
  const constraints = {
    video: {
      deviceId: { exact: deviceId }
    }
  };
  
  try {
    return await navigator.mediaDevices.getUserMedia(constraints);
  } catch (error) {
    console.error('Error accessing media devices.', error);
  }
}

4. 显示视频流

获取到MediaStream后，可以将它绑定到一个<video>元素上，以显示视频。

javascript
function playVideoFromStream(stream, videoElement) {
  videoElement.srcObject = stream;
  videoElement.play();
}

实际应用示例

假设在一个Web应用中，你需要让用户从可用的视频输入设备中选择一个，然后显示该设备的视频流。

1. 列出设备 - 在页面上展示一个下拉菜单，列出所有视频输入设备。
2. 用户选择 - 用户从下拉菜单中选择一个设备。
3. 请求并显示视频 - 根据用户的选择请求视频流，并在页面上的<video>元素中显示。

这个过程不仅确保了用户可以自由选择输入设备，而且通过程序确保了设备选择的灵活性和功能的具体实现。