EnumerationDevices 从麦克风、摄像头一网打尽各种媒体设备

2023-11-25 18:55:44

使用 WebRTC enumerateDevices() 方法列出可用媒体设备

WebRTC (Web 实时通信) 提供了一个浏览器原生解决方案，用于在网络浏览器中建立实时通信。它的 enumerateDevices() 方法允许您列出系统中可用的媒体设备，例如麦克风、摄像头和扬声器。

基本用法

调用 enumerateDevices() 方法非常简单，只需使用 navigator.mediaDevices 对象即可：

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices.forEach((device) => {
    console.log(device.kind + ": " + device.label);
  });
});

这会打印出每个设备的类型（kind）和名称（label）。

媒体设备类型

enumerateDevices() 方法可识别以下类型的媒体设备：

麦克风：用于捕获音频输入
摄像头：用于捕获视频输入
扬声器：用于播放音频输出

摄像头前后置区分

摄像头设备可以分为前后置。您可以通过检查设备的 label 属性来区分它们。此属性通常会包含“前置摄像头”或“后置摄像头”等信息。

navigator.mediaDevices.enumerateDevices().then((devices) => {
  devices.forEach((device) => {
    if (device.kind === "videoinput") {
      if (device.label.includes("前置摄像头")) {
        // 前置摄像头
      } else if (device.label.includes("后置摄像头")) {
        // 后置摄像头
      }
    }
  });
});

避免广角摄像头

虽然广角摄像头可以提供更宽的视野，但它们也可能导致图像失真。在视频通话中，这可能会导致用户看起来不自然。因此，建议避免使用广角摄像头。

GetUserMedia() 和 MediaStream

获取摄像头视频流时，可以使用 getUserMedia() 方法。它返回一个 MediaStream 对象，可用于播放视频流。

navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
  const video = document.querySelector("video");
  video.srcObject = stream;
});

常见问题解答

如何检查设备是否可用？
使用 enumerateDevices() 方法，并检查设备的可用性标志（device.enabled）。
如何更改摄像头？
通过 getUserMedia() 方法指定一个约束对象（{ video: { facingMode: "environment" } }），可以切换摄像头。
如何禁用或启用设备？
调用 enumerateDevices() 方法，然后使用 setEnabled() 方法。
如何处理不同分辨率的摄像头？
通过 getUserMedia() 方法使用一个约束对象（{ video: { width: 1280, height: 720 } }）来指定所需的设备分辨率。
如何处理多个媒体设备？
enumerateDevices() 方法返回一个设备数组。您可以遍历此数组并根据需要选择设备。