webrtc获取设备音视频
client.js源代码
"use strict"
var audioInputS = document.querySelector("select#audioInputSelect");
var audioOutputS = document.querySelector("select#audioOutputSelect");
var videoInputS = document.querySelector("select#videoInputSelect");
function start() {
if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
console.log('getUserMedia is not supported!');
return;
}
navigator.mediaDevices.enumerateDevices()
.then(function(devicesInfo){
devicesInfo.forEach(function(device){
console.log((device.kind+":"+device.label+ ":" + device.deviceId))
var option = document.createElement("option")
option.text = device.label;
option.value = device.deviceId;
if (device.kind === "audioinput") {
audioInputS.appendChild(option);
} else if(device.kind === "audiooutput") {
audioOutputS.appendChild(option);
} else if (device.kind === "videoinput") {
videoInputS.appendChild(option);
}
});
})
.catch(handleErr);
}
function handleErr(err){
console.log(err.name + ":" + err.message);
}
start();
index.html源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<label>音频输入设备</label>
<select id = "audioInputSelect"></select>
</div>
<div>
<label>音频输出设备</label>
<select id = "audioOutputSelect"></select>
</div>
<div>
<label>视频输入设备</label>
<select id = "videoInputSelect"></select>
</div>
<script src = "./client.js"></script>
</body>
</html>
如果label标签没有任何显示，就使用getUserMedia使得浏览器获取权限，一次获取之后在浏览器设置里，把所有设备权限都改为允许，方便后续操作。
|