3webrtc设备管理

        通过enumerateDevices()获取到所有的音频和视频设备&＃xff0c;返回的值是一个promise&＃xff0c;这是Javascript中一个特有的对象&＃xff0c;在promsie中有一个特有的结构体:MediaDevicesInfo&＃xff0c;在这个结构体中存放了非常重要的几个信息&＃xff0c;deviceid为这个设备的唯一标志符&＃xff0c;第二个label就是设备的名字&＃xff0c;比如内置音频设备&＃xff0c;内置音频输入设备等

        首先解释一个背景&＃xff0c;Javascript中是使用单线程去处理整个逻辑的&＃xff0c;为了防止被阻塞&＃xff0c;大量使用了异步调用&＃xff0c;而promise就是异步调用的一种方式&＃xff0c;也是目前大家比较认可的一种方式&＃xff0c;下面了解一下它的基本思想&＃xff0c;首先创建一个promise时要传给它一个handle的处理函数&＃xff0c;handle的处理函数处理它的主要逻辑&＃xff0c;处理完成后&＃xff0c;如果成功了&＃xff0c;就会调用resolve这个函数&＃xff0c;如果失败了就会调用reject这个函数&＃xff0c;这样就创建了一个promise&＃xff0c;promise可以注册两个方法&＃xff0c;then和catch&＃xff0c;then就是当整个逻辑处理成功后&＃xff0c;会收到on_resolve 这个处理事件&＃xff0c;当收到这个事件时&＃xff0c;就可以处理一些逻辑&＃xff0c;catch就是当失败了&＃xff0c;收到失败事件的时候&＃xff0c;处理一些失败的逻辑&＃xff0c;当然then是依赖式的&＃xff0c;如果失败了还可以返回一个promise&＃xff0c;可以继续then&＃xff0c;一直做好几个处理&＃xff0c;它的核心是在prmise里存放了几个状态&＃xff0c;第一个是没有执行的handing的状态&＃xff0c;第二个当开始执行handle这个逻辑时的运行状态&＃xff0c;当处理成功后进入resolve里&＃xff0c;会改为成功状态&＃xff0c;如果失败了&＃xff0c;进入到reject里&＃xff0c;把它设置为出错状态。当你注册这个函数之后&＃xff0c;就可以根据promise里面的状态机&＃xff0c;它如果成功了&＃xff0c;就可以调用then里面注册的方法&＃xff0c;如果失败了&＃xff0c;就可以调用catch注册的方法&＃xff0c;这就是它的基本逻辑。

   我们接着看enumerateDevices这个函数&＃xff0c;在这个函数里就运用了promise&＃xff0c;注册了一个handle&＃xff0c;所以当这个函数执行的时候就返回一个promise&＃xff0c;在我们用的时候&＃xff0c;拿到这个promise&＃xff0c;我们就给他注册两个函数&＃xff0c;一个是then方法&＃xff0c;一个是catch方法&＃xff0c;如果成功了&＃xff0c;它就会调用我们注册的then调用我们成功的逻辑&＃xff0c;如果失败了&＃xff0c;就会调用失败的逻辑。

目录结构

client.js

&＃39;use strict&＃39;
var audioSource &＃61; document.querySelector("select#audioSource");
var audioOutput &＃61; document.querySelector("select#audioOutput");
var videoSource &＃61; document.querySelector("select#videoSource");//首次运行引导用户&＃xff0c;信任域名
var first &＃61; window.localStorage.getItem(&＃39;first&＃39;);
if(first &＃61;&＃61; null ){if (navigator.mediaDevices.getUserMedia) {//调用用户媒体设备, 访问摄像头var p &＃61; navigator.mediaDevices.getUserMedia({ audio: true, video: true });} else {alert(&＃39;不支持访问用户媒体&＃39;);}
}
//判断方法是否存在
if(!navigator.mediaDevices ||!navigator.mediaDevices.enumerateDevices){console.log(&＃39;enumerateDevices is not supported!&＃39;);
}else {//返回是一个promise 有then 成功 获取设备 catch 失败navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
}function gotDevices(deviceInfos){//function(deviceInfo) 匿名函数deviceInfos.forEach( function(deviceInfo){console.log(deviceInfo.kind &＃43; ": label &＃61; " &＃43; deviceInfo.label &＃43; ": id &＃61; "&＃43; deviceInfo.deviceId &＃43; ": groupId &＃61; "&＃43; deviceInfo.groupId); var option &＃61; document.createElement(&＃39;option&＃39;);option.text &＃61; deviceInfo.label;option.value &＃61; deviceInfo.deviceId;if(deviceInfo.kind &＃61;&＃61;&＃61; &＃39;audioinput&＃39;){audioSource.appendChild(option);}else if(deviceInfo.kind &＃61;&＃61;&＃61; &＃39;audiooutput&＃39;){audioOutput.appendChild(option);}else if(deviceInfo.kind &＃61;&＃61;&＃61; &＃39;videoinput&＃39;){videoSource.appendChild(option);}});}function handleError(err){console.log(err.name &＃43; " : " &＃43; err.message);
}


index.js

页面显示效果:

其中&＃xff1a;第1列显示的是kind&＃xff1a;设备种类&＃xff0c;分别由audioinput,audiooutput,videoinput,

第2列显示的是label&＃xff1a;设备名字&＃xff1b;

第3列显示的是deviceID&＃xff1a;设备id
第4列显示的是goupID&＃xff1a;两个设备groupID相同说明是同一个设备

如果使用HTTP协议&＃xff1a;

则获取不到label id&＃xff0c;