webrtc获取音视频设备信息
2019-08-11 本文已影响0人
一叶知秋0830
API说明
webrtc获取电脑所有音视频设备的API：enumerateDevices。获取成功后走then的方法，获取失败走catch的方法。
var ePromise = navigator.mediaDevices.enumerateDevices();
ePromise.then(successFunction);
ePromise.catch(failureFunction);
获取到的音视频设备信息包括：
| 属性 | 说明 |
|---|---|
| deviceId | 设备ID |
| label | 设备的名字 |
| kind | 设备的种类 |
| groupId | 设备的groupId,如果2个设备的groupId相同，说明是同一个物理设备 |
测试
首先通过nodejs搭建web服务器，搭建好后将服务启动。然后在public目录下新建一个device目录，在device目录下创建一个index.html文件，代码内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webrtc获取音视频设备</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/client.js"></script>
</head>
<body>
<div>
<label>音频输入设备：</label>
<select id="audioinput">
</select>
</div>
<div>
<label>音频输出设备：</label>
<select id="audiooutput">
</select>
</div>
<div>
<label>视频输入设备：</label>
<select id="videoinput">
</select>
</div>
</body>
</html>
然后在device目录下新建一个js目录，在js目录下创建一个client.js文件，代码内容如下：
// 这种方式只在Chrome浏览器有效，因为各个浏览器获取音视频权限的内部实现都不一样，所以这种方式在Safari和Firefox浏览器看不到设备名称
'use strict'
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
console.log('不支持获取设备信息！');
}else{
// 获取音视频数据的api，这里需要给浏览器授权。audio和video都为true表示采集的既有音频又有视频数据
navigator.mediaDevices.getUserMedia({audio: true, video: true});
// 获取音视频设备，成功调用gotDevices方法，失败调用handleError方法
navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
}
// 浏览器获取音视频设备成功时调用的方法
function gotDevices(deviceInfos){
const audioInputSelect = $("#audioinput")[0];
const audioOutputSelect = $("#audiooutput")[0];
const videoInputSelect = $("#videoinput")[0];
deviceInfos.forEach(function(deviceInfo){
console.log('设备种类='+deviceInfo.kind + '：设备名 = ' + deviceInfo.label + '；设备id = ' + deviceInfo.deviceId + '；groupId='+deviceInfo.groupId);
const option = document.createElement('option');
option.value = deviceInfo.deviceId;
option.text = deviceInfo.label;
if (deviceInfo.kind === 'audioinput') {
audioInputSelect.appendChild(option);
}else if (deviceInfo.kind === 'audiooutput') {
audioOutputSelect.appendChild(option);
}else if (deviceInfo.kind === 'videoinput') {
videoInputSelect.appendChild(option);
}
})
}
// 浏览器获取音视频设备失败时调用的方法
function handleError(err){
console.log(err.name+':'+err.message);
}
// 这种方式在各个浏览器都可以（不过在Safari和Firefox浏览器获取的设备信息和在Chrome获取的信息还是不一样的）
'use strict'
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
console.log('不支持获取设备信息！');
}else{
// 首先获取到流，获取流成功后再获取设备信息
navigator.mediaDevices.getUserMedia({video:true,audio:true}).then(gotMediaStream).then(gotDevices).catch(handleError);
}
// 采集音视频数据成功时调用的方法
function gotMediaStream(stream){
return navigator.mediaDevices.enumerateDevices();
}
// 浏览器获取音视频设备成功时调用的方法
function gotDevices(deviceInfos){
const audioInputSelect = $("#audioinput")[0];
const audioOutputSelect = $("#audiooutput")[0];
const videoInputSelect = $("#videoinput")[0];
deviceInfos.forEach(function(deviceInfo){
console.log('设备种类='+deviceInfo.kind + '：设备名 = ' + deviceInfo.label + '；设备id = ' + deviceInfo.deviceId + '；groupId='+deviceInfo.groupId);
const option = document.createElement('option');
option.value = deviceInfo.deviceId;
option.text = deviceInfo.label;
if (deviceInfo.kind === 'audioinput') {
audioInputSelect.appendChild(option);
}else if (deviceInfo.kind === 'audiooutput') {
audioOutputSelect.appendChild(option);
}else if (deviceInfo.kind === 'videoinput') {
videoInputSelect.appendChild(option);
}
})
}
// 浏览器获取音视频设备失败时调用的方法
function handleError(err){
console.log(err.name+':'+err.message);
}
然后打开浏览器在地址栏输入https://192.168.20.242:8081/device/index.html，如果是第一次运行，会弹出摄像头和麦克风的授权弹框，允许就可以了。然后就可以看到获取到的设备信息了。
打印信息
页面效果
