HTML 如何使用JavaScript获取计算机上连接的视频摄像头列表

来源：恒创科技编辑：恒创科技编辑部

2024-04-15 01:30:48

要使用JavaScript获取计算机上连接的视频摄像头列表，可以使用navigator.mediaDevices.enumerateDevices()方法，这个方法返回一个Promise，解析为一个包含所有可用媒体设备信息的数组。

以下是详细的步骤和代码示例：

1、检查浏览器是否支持navigator.mediaDevices对象，如果不支持，给出提示信息。

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("您的浏览器不支持访问摄像头和麦克风等媒体设备。");
} else {
  // 继续执行获取视频摄像头列表的操作
}

2、使用navigator.mediaDevices.enumerateDevices()方法获取所有可用的媒体设备。

navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    // 处理设备列表
  })
  .catch(error => {
    console.log("获取设备列表失败：", error);
  });

3、遍历设备列表，筛选出类型为videoinput的设备，这些设备通常是摄像头。

let videoDevices = [];
navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    devices.forEach(device => {
      if (device.kind === "videoinput") {
        videoDevices.push(device);
      }
    });
    // 输出视频摄像头列表
    console.table(videoDevices);
  })
  .catch(error => {
    console.log("获取设备列表失败：", error);
  });

4、将以上代码整合到一个HTML文件中，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>获取视频摄像头列表</title>
</head>
<body>
  <h1>视频摄像头列表</h1>
  <table id="videoDevicesTable"></table>
  <script>
    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
      console.log("您的浏览器不支持访问摄像头和麦克风等媒体设备。");
    } else {
      let videoDevices = [];
      navigator.mediaDevices.enumerateDevices()
        .then(devices => {
          devices.forEach(device => {
            if (device.kind === "videoinput") {
              videoDevices.push(device);
            }
          });
          // 输出视频摄像头列表
          const table = document.getElementById("videoDevicesTable");
          videoDevices.forEach((device, index) => {
            const row = table.insertRow(index);
            const cell1 = row.insertCell(0);
            const cell2 = row.insertCell(1);
            cell1.textContent = device.deviceId;
            cell2.textContent = device.label;
          });
        })
        .catch(error => {
          console.log("获取设备列表失败：", error);
        });
    }
  </script>
</body>
</html>

这个HTML文件会显示一个表格，列出计算机上连接的所有视频摄像头及其标签。

本文地址：https://www.henghost.com/jishu/52506/