00.webRTC检测音视频设备

作者: 讲武德的年轻人 | 来源:发表于2020-01-12 10:17 被阅读0次

00.webRTC检测音视频设备
Android UVCCamera框架使用指南
在线飞拍视觉检测设备流水线上的检测团队
检测设备旋转
无损检测设备
汽车检测设备尾气检测仪的方法
C#工作相关
android_8.1 hdmi设备热插拔事件
iOS 给APP安全升级
设备监测

转载自https://www.jianshu.com/p/936c6b681022

获取到的音视频设备信息包括：

属性	说明
deviceId	设备ID
label	设备的名字
kind	设备的种类
groupId	设备的groupId,如果2个设备的groupId相同，说明是同一个物理设备

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>webrtc获取音视频设备</title>
        <script type="text/javascript" src="js/jquery-1.12.4.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>

client.js

// 这种方式在各个浏览器都可以（不过在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);
}

在vscode里面Open with Live Server打开html：