使用 navigator.mediaDevices.enumerateDevices() 即可获取音视频设备相关信息。

创建如下文件:

1
2
3
.
├── client.js
└── index.html

重点在 client.js 中。

index.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取音视频设备</title>
</head>
<body>

<script src="client.js"></script>

</body>
</html>

client.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
'use strict';

// 打印设备类型、标签、id、组id等
function getDevice(deviceInfos) {
deviceInfos.forEach(function (deviceInfo) {
console.log("kind: " + deviceInfo.kind);
console.log("label: " + deviceInfo.label);
console.log("deviceId: " + deviceInfo.deviceId);
console.log("groupId: " + deviceInfo.groupId);
});
}

// 错误处理
function handelErr(err) {
alert(err);
}

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
// 不支持
alert('不支持');
} else {
// 支持
navigator.mediaDevices.enumerateDevices()
.then(getDevice)
.catch(handelErr)
}

注意:

当前的设备是 MacOS Sierra + Chrome 浏览器,经过测试,以上代码获取设备 label 时总会为空。

原因:

浏览器 提示用户当前页面正在获取音视频设备相关权限,需要获取音视频设备的访问权限后才可获取到 label 相关信息。

解决方法:

在使用 navigator.mediaDevices.getUserMedia() 方法时候浏览器会提示用户获取相关权限是否同意。


EOF