欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

WebRTC: (1)设备管理

程序员文章站 2022-05-15 23:40:02
...

重要的API: enumerateDevices

基本格式:

WebRTC: (1)设备管理

其中ePromise中有个重要的结构体:MediaDevicesInfo

WebRTC: (1)设备管理


实操:

先准备express 部署一个Web服务器:

WebRTC: (1)设备管理

WebRTC: (1)设备管理

然后启动web服务器:

WebRTC: (1)设备管理

WebRTC: (1)设备管理

就可以访问public下发布路径下的文件了:

WebRTC: (1)设备管理

WebRTC: (1)设备管理

 这样就进入了设备管理准备的代码:

案例1: 打印设备信息

WebRTC: (1)设备管理

 WebRTC: (1)设备管理

WebRTC: (1)设备管理 其中的label没显示是因为http和https不安全的访问具有安全性问题,所以不会显示出来,

即使我这里使用的是https,但是WebRTC: (1)设备管理

证书是自己的WebRTC: (1)设备管理

可以通过letsencryp网站进行解决。

案例2: 在页面中显示设备

注意这里需要处理获取认证证书不安全的问题,否则这里的label为空:

WebRTC: (1)设备管理

WebRTC: (1)设备管理

client.js:

var audioSource = document.querySelector('select#audioSource');
var audioOutput = document.querySelector('select#audioOutput');
var videoSource = document.querySelector('select#videoSource');

if(!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices){
    console.log('enumerateDevices are not supported!');
}else{
    navigator.mediaDevices.enumerateDevices()
        .then(gotDevices)
        .catch(handleError);
}

function gotDevices(deviceInfos){
    deviceInfos.forEach( function(deviceInfo){
        console.log(deviceInfo.kind + ": label = " +deviceInfo.label + ": id = " +deviceInfo.deviceId + ": groupId = " + deviceInfo.groupId);

        var option = document.createElement('option');
        option.text = deviceInfo.label;
        option.value = deviceInfo.deviceId;
        if(deviceInfo.kind === 'audioinput'){
            audioSource.appendChild(option);
        }else if(deviceInfo.kind === 'audiooutput'){
            audioOutput.appendChild(option);
        }else if(deviceInfo.kind === 'videoinput'){
            videoSource.appendChild(option);
        }
    });
}

function handleError(err){
    console.log(err.name + ":" + err.message);
}

 

相关标签: WebRTC