WebRTC学习（三）WebRTC设备管理

（一）重要API，用于获取音视频设备

其中返回的ePromise结果，是一个Promise对象。

Promise对象的结构体：MediaDevicesInfo

WebRTC学习（三）WebRTC设备管理

deviceID：是设备唯一标识符ID
label：是设备的名字（可读的）
kind：设备的种类（音频输入/输出两种，视频输入/输出两类）
groupID：同一个设备可能包含两种类型，比如输入/输出;但是这两种都是包含同一个groupID

（二）JavaScript中的Promise （异步调用中的其中一种方式）

补充：javascript中是使用单线程去处理逻辑，所以为了防止阻塞，大量使用了异步调用

WebRTC学习（三）WebRTC设备管理

详解见：https://segmentfault.com/a/1190000017312249

（三）获取音视频设备

WebRTC学习（三）WebRTC设备管理

1.开启web服务器indexEnt.js

'use strict'

var http = require("http");
var https = require("https");
var fs = require("fs");

var express = require("express");
var serveIndex = require("serve-index");


var app = express();                    //实例化express
app.use(serveIndex("./"));        //设置首路径，url会直接去访问该目录下的文件
app.use(express.static("./"));    //可以访问目录下的所有文件

//http server
var http_server = http.createServer(app);    //这里不使用匿名函数，使用express对象
http_server.listen(80,"0.0.0.0");

//https server
var options = {
    key : fs.readFileSync("./ca/learn.webrtc.com-key.pem"),            //同步读取文件key
    cert: fs.readFileSync("./ca/learn.webrtc.com.pem"),                //同步读取文件证书
};

var https_server = https.createServer(options,app);
https_server.listen(443,"0.0.0.0");

2.设置index.html

<html>
    <head>
        <title>    WebRTC get audio and video devices </title>
        <script type="text/javascript" src="./js/client.js"></script>
    </head>
    <body>
        <h1>Index.html</h1>
    </body>
</html>

3.设置client.js

'use strict'

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

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

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

4.开启服务

WebRTC学习（三）WebRTC设备管理

5.查看结果

WebRTC学习（三）WebRTC设备管理

id=default;
label=Default;
kind=audioinput;
groupId=8d355f6b4ffa173a4a3abe47cc76b4dedbbda93d62b957ad304464800815a8c2

id=fa3e397324529d0c1be02a329546e19a7db69350fe732303452e6d244faea4c1;
label=USB2.0 PC CAMERA Analog Mono;
kind=audioinput;
groupId=c5b67b2337e654ff12177ec8ed48e5580bdc5b8a8ee7fdce3602b8a4a802a99f
id=bf54ed3e6df71ed91193adde9d206e51b1d4a5afdaeb231c75a35466842df89e;
label=USB2.0 PC CAMERA (1908:2310);
kind=videoinput;
groupId=c5b67b2337e654ff12177ec8ed48e5580bdc5b8a8ee7fdce3602b8a4a802a99f
id=default;
label=Default;
kind=audiooutput;
groupId=default

id=dcc0783c108eda571ae81899ece6885794e66f772a47bc77e8977b9c92ca0c77;
label=GK107 HDMI Audio Controller Digital Stereo (HDMI);
kind=audiooutput;
groupId=640919e62e4194110dbe498a3852671af27dd8b1e91315cb4f8a5b55aa5bea4c

id=4bdac7c5ce801e116da8fbb3ee278f7559af4ff55f58c48c78be855dc21932fc;
label=Built-in Audio Analog Stereo;
kind=audiooutput;
groupId=4aaccae20f6f54f68e7d1b6df6ba9f7118de2af094b2ed5cefd0ff5c64afeb43

注意：我们需要先设置站点，允许摄像头和麦克风才能获取信息

WebRTC学习（三）WebRTC设备管理

（四）显示设备到页面

1.修改index.html

<html>
    <head>
        <title>    WebRTC get audio and video devices </title>
    </head>
    <body>
        <h1>Index.html</h1>
        <div>
            <label>Audio Input Device:</label>
            <select id="audioInput"></select>
        </div>
        <div>
            <label>Audio Output Device:</label>
            <select id="audioOutput"></select>
        </div>
        <div>
            <label>Video Input Device:</label>
            <select id="videoInput"></select>
        </div>
    </body>
    <script type="text/javascript" src="./js/client.js"></script>
    
</html>

注意：script中要使用到id信息，所以script应该写在所有需要的id元素后面！！

2.修改client.js文件

'use strict'

var audioInput = document.getElementById("audioInput");
var audioOutput = document.getElementById("audioOutput");
var videoInput = document.getElementById("videoInput");

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

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

        var option = document.createElement("option");
        option.text = deviceInfo.label;
        option.value = deviceInfo.deviceId;

        if(deviceInfo.kind === "audioinput"){
            audioInput.appendChild(option);
        }else if(deviceInfo.kind === "audiooutput"){
            audioOutput.appendChild(option);
        }else if(deviceInfo.kind === "videoinput"){
            videoInput.appendChild(option);
        }
    });
}

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

WebRTC学习（三）WebRTC设备管理

二：WebRTC获取音视频数据

（一）采集音视频数据

WebRTC学习（三）WebRTC设备管理

其中constraints参数类型为MediaStreamConstraints

WebRTC学习（三）WebRTC设备管理

分别对video与audio进行限制，可以用布尔类型或者MediaTrackConstraints类型，其中MediaTrackConstraints可以进行详细的设置（比如帧率、分辨率、声道）

WebRTC学习（三）WebRTC设备管理

1.实现index2.html

<html>
    <head>
        <title>    WebRTC capture audio and video data </title>
    </head>
    <body>
        <h1>Index2.html</h1>
        <p>autoplay：获取视频源后自动播放</p>
        <p>playsinline：在页面中播放，而不是调用第三方工具</p>
        <video autoplay playsinline id="player"></video>
    </body>
    <script type="text/javascript" src="./js/client2.js"></script>
    
</html>

2.实现client2.js

'use strict'

var videoplay = document.querySelector("video#player");

if(!navigator.mediaDevices || 
    !navigator.mediaDevices.getUserMedia){
    console.log("getUserMedia is not supported!");
}else{
    var constraints = {
        video : true,
        audio : true
    }

    navigator.mediaDevices.getUserMedia(constraints)
                .then(getUserMedia)
                .catch(handleError);
}

function getUserMedia(stream){
    videoplay.srcObject = stream;    //设置采集到的流进行播放
}

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

WebRTC学习（三）WebRTC设备管理

（二）getUserMedia适配问题（在WebRTC规范1.0之前）

对于不同的浏览器，实现了不同版本的getUserMedia

WebRTC学习（三）WebRTC设备管理

解决方法一：自己实现

WebRTC学习（三）WebRTC设备管理

解决方法二：使用google开源库 adapter.js 适配各个浏览器接口

WebRTC学习（三）WebRTC设备管理

随着规范的使用，以后可以不用考虑适配问题！

<html>
    <head>
        <title>    WebRTC capture audio and video data </title>
    </head>
    <body>
        <h1>Index2.html</h1>
        <p>autoplay：获取视频源后自动播放</p>
        <p>playsinline：在页面中播放，而不是调用第三方工具</p>
        <video autoplay playsinline id="player"></video>
    </body>
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="text/javascript" src="./js/client2.js"></script>
</html>

WebRTC学习（三）WebRTC设备管理

（三）获取音视频设备的访问权限

在一中获取了音视频设备之后，虽然在chrome中可以显示结果，但是在其他浏览器中并没有显示，比如Firefox

WebRTC学习（三）WebRTC设备管理

左（chrome）右（Firefox），因为我们没有允许访问权限。其实前面的chrome权限也是我们提前去设置中开启的。

但是我们可以使用前面（一）中的getUserMedia方法，去使得浏览器弹出访问权限请求窗口，从而去获取权限！！！

1.index3.html实现

<html>
    <head>
        <title>    WebRTC get audio and video devices </title>
    </head>
    <body>
        <h1>Index.html</h1>
        <div>
            <label>Audio Input Device:</label>
            <select id="audioInput"></select>
        </div>
        <div>
            <label>Audio Output Device:</label>
            <select id="audioOutput"></select>
        </div>
        <div>
            <label>Video Input Device:</label>
            <select id="videoInput"></select>
        </div>
        <video autoplay playsinline id="player"></video>
    </body>
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="text/javascript" src="./js/client3.js"></script>
    
</html>

View Code