云主机测评网要使用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文件会显示一个表格，列出计算机上连接的所有视频摄像头及其标签。
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错，值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布！
我在用这类站群服务器、还可以. 用很多年了。