WebRTC学习（三）WebRTC设备管理

最新推荐文章于 2024-09-14 07:22:50 发布
最新推荐文章于 2024-09-14 07:22:50 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 音视频 文章标签： webrtc 学习 javascript
原文链接：https://www.cnblogs.com/ssyfj/p/14783168.html
版权

一：WebRTC设备管理

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

在这里插入图片描述

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

Promise对象的结构体：MediaDevicesInfo 

在这里插入图片描述

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

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

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

在这里插入图片描述

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

（三）获取音视频设备

在这里插入图片描述

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.开启服务

在这里插入图片描述

5.查看结果 

在这里插入图片描述

在这里插入图片描述

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

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

在这里插入图片描述

（四）显示设备到页面

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获取音视频数据

（一）采集音视频数据

在这里插入图片描述

其中constraints参数类型为MediaStreamConstraints 

在这里插入图片描述

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

在这里插入图片描述

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);
}

在这里插入图片描述

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

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

在这里插入图片描述

解决方法一：自己实现

在这里插入图片描述

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

在这里插入图片描述

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

<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>

在这里插入图片描述

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

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

在这里插入图片描述

左（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>

2.client3.js实现

'use strict'

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


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)　　//getUserMedia获取权限，返回enumerateDevices进行串联
                .then(gotDevices)    //可以进行串联处理
                .catch(handleError);
}

function getUserMedia(stream){
    videoplay.srcObject = stream;    //设置采集到的流进行播放
    return navigator.mediaDevices.enumerateDevices();    //为了进行串联处理！！！
}

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音视频采集约束

通过约束，可以精确的控制音视频的采集数据！！

（一）视频参数调整

在这里插入图片描述

width与height用来控制分辨率，宽高比
aspectRatio = 宽/高
frameRate帧率
facingMode设置摄像头模式
resizeMode是否进行裁剪

在这里插入图片描述

'use strict'

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

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

if(!navigator.mediaDevices || 
    !navigator.mediaDevices.getUserMedia){
    console.log("getUserMedia is not supported!");
}else{
    var constraints = {
        video : {
            width:320,
            height:240,
            frameRate:30,
            facingMode:"user"
        },
        audio : false
    }

    navigator.mediaDevices.getUserMedia(constraints)
                .then(getUserMedia)
                .then(gotDevices)    //可以进行串联处理
                .catch(handleError);
}

function getUserMedia(stream){
    videoplay.srcObject = stream;    //设置采集到的流进行播放
    return navigator.mediaDevices.enumerateDevices();    //为了进行串联处理！！！
}

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);
}

（二）音频参数调整

在这里插入图片描述

sampleSize:采样大小（位深）
echoCancellation:回音消除
autoGainControl:自动增益，是否在原有声音基础上，增强音量
noiseSuppression:降噪
latency:延迟大小（延迟小，则实时性强）
channelCount:声道数量
deviceID:选取设备的切换
groupID:组ID 
'use strict'

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


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

function start(){
    console.log("start......");
    if(!navigator.mediaDevices || 
        !navigator.mediaDevices.getUserMedia){
        console.log("getUserMedia is not supported!");
    }else{
        var devId = videoInput.value;
        var constraints = {
            video : {
                width:320,
                height:240,
                frameRate:30,
                facingMode:"user"
            },
            audio : {
                noiseSuppression:true,
                echoCancellation:true
            },
            deviceId : devId ? devId : undefined    //undefined是使用默认设备
        }

        navigator.mediaDevices.getUserMedia(constraints)
                    .then(getUserMedia)
                    .then(gotDevices)    //可以进行串联处理
                    .catch(handleError);
    }
}

function getUserMedia(stream){
    videoplay.srcObject = stream;    //设置采集到的流进行播放
    return navigator.mediaDevices.enumerateDevices();    //为了进行串联处理！！！
}

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);
}

start();    //开始执行逻辑

//---------设置事件-----select选择摄像头之后
videoInput.onchange = start;

四：WebRTC视频特效处理

（一）浏览器视频特效

在这里插入图片描述

在浏览器中使用CSS filter进行特效处理，在不同的浏览器中，filter不同。
在浏览器中使用filter进行渲染的时候，底层最终就是调用OpenGL或者Metal等等

（二）支持的特效种类（常见的）

在这里插入图片描述

（三）代码实现

<html>
    <head>
        <title>    WebRTC get audio and video devices </title>
        <style>
            .none {
                -webkit-filter: none;
            }

            .blue {
                -webkit-filter: blur(3px); 
            }

            .grayscale {
                -webkit-filter: grayscale(1);
            }

            .invert {
                -webkit-filter: invert(1);
            }

            .sepia {
                -webkit-filter: sepia(1);
            }
        </style>
    </head>
    <body>
        <h1>Index3.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>
        <div>
            <label>Filter:</label>
            <select id="filter">
                <option value="none">None</option>
                <option value="blur">blur</option>
                <option value="grayscale">grayscale</option>
                <option value="invert">invert</option>
                <option value="sepia">sepia</option>
            </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>
index3.html

实现client3.js

'use strict'

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

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

function start(){
    console.log("start......");
    if(!navigator.mediaDevices || 
        !navigator.mediaDevices.getUserMedia){
        console.log("getUserMedia is not supported!");
    }else{
        var devId = videoInput.value;
        var constraints = {
            video : {
                width:320,
                height:240,
                frameRate:30,
                facingMode:"user"
            },
            audio : {
                noiseSuppression:true,
                echoCancellation:true
            },
            deviceId : devId ? devId : undefined    //undefined是使用默认设备
        }

        navigator.mediaDevices.getUserMedia(constraints)
                    .then(getUserMedia)
                    .then(gotDevices)    //可以进行串联处理
                    .catch(handleError);
    }
}

function getUserMedia(stream){
    videoplay.srcObject = stream;    //设置采集到的流进行播放
    return navigator.mediaDevices.enumerateDevices();    //为了进行串联处理！！！
}

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);
}

start();    //开始执行逻辑

//---------设置事件-----select选择摄像头之后
videoInput.onchange = start;
filtersSelect.onchange = function(){
    videoplay.className = filtersSelect.value;　　//修改使用的类名
}

在这里插入图片描述

五：从视频中获取图片

通过html中canvas标签去视频流中获取对应的帧，输出为图片即可。

1.添加button控件，触发事件去获取图片（从视频流中）

2.添加canvas，去将帧转换为图片

<html>
    <head>
        <title>    WebRTC get audio and video devices </title>
        <style>
            .none {
                -webkit-filter: none;
            }

            .blue {
                -webkit-filter: blur(3px); 
            }

            .grayscale {
                -webkit-filter: grayscale(1);
            }

            .invert {
                -webkit-filter: invert(1);
            }

            .sepia {
                -webkit-filter: sepia(1);
            }
        </style>
    </head>
    <body>
        <h1>Index3.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>
        <div>
            <label>Filter:</label>
            <select id="filter">
                <option value="none">None</option>
                <option value="blur">blur</option>
                <option value="grayscale">grayscale</option>
                <option value="invert">invert</option>
                <option value="sepia">sepia</option>
            </select>
        </div>
        <div>
            <button id="snapshot">Take snapshot</button>
        </div>
        <div>
            <canvas id="picture"></canvas>
        </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>

index3.html

client.js文件实现

'use strict'

//设备
var audioInput = document.getElementById("audioInput");
var audioOutput = document.getElementById("audioOutput");
var videoInput = document.getElementById("videoInput");
//过滤器
var filtersSelect = document.getElementById("filter");
//图片
var snapshot = document.getElementById("snapshot");
var picture = document.getElementById("picture");

picture.width = 320;
picture.height = 240;
//视频
var videoplay = document.querySelector("video#player");

function start(){
    console.log("start......");
    if(!navigator.mediaDevices || 
        !navigator.mediaDevices.getUserMedia){
        console.log("getUserMedia is not supported!");
    }else{
        var devId = videoInput.value;
        var constraints = {
            video : {
                width:320,
                height:240,
                frameRate:30,
                facingMode:"user"
            },
            audio : {
                noiseSuppression:true,
                echoCancellation:true
            },
            deviceId : devId ? devId : undefined    //undefined是使用默认设备
        }

        navigator.mediaDevices.getUserMedia(constraints)
                    .then(getUserMedia)
                    .then(gotDevices)    //可以进行串联处理
                    .catch(handleError);
    }
}

function getUserMedia(stream){
    videoplay.srcObject = stream;    //设置采集到的流进行播放
    return navigator.mediaDevices.enumerateDevices();    //为了进行串联处理！！！
}

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);
}

start();    //开始执行逻辑

//---------设置事件-----select选择摄像头之后
videoInput.onchange = start;

filtersSelect.onchange = function(){
    videoplay.className = filtersSelect.value;
}

snapshot.onclick = function(){　　 picture.className = filtersSelect.value; //设置图片的特效    picture.getContext("2d")        //获取图像上下文，为2d图像
            .drawImage(videoplay,    //从视频流源中，获取数据
                0,0,
                picture.width,picture.height);    
}

在这里插入图片描述
图片的保存并不会保存特效信息！！！

六：WebRTC只采集音频数据

1.index4.html

<html>
    <head>
        <title>    WebRTC get audio devices </title>
    </head>
    <body>
        <h1>Index4.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>

        <div>
            <!--controls会将控制按钮显示出来-->
            <audio autoplay controls id="audioplayer"></audio>    
        </div>
    </body>
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="text/javascript" src="./js/client4.js"></script>
    
</html>

2.client4.js实现

'use strict'

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

//音频
var audioplay = document.querySelector("audio#audioplayer");

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

        navigator.mediaDevices.getUserMedia(constraints)
                    .then(getUserMedia)
                    .then(gotDevices)    //可以进行串联处理
                    .catch(handleError);
    }
}

function getUserMedia(stream){
    audioplay.srcObject = stream;    //设置采集到的流进行播放
    return navigator.mediaDevices.enumerateDevices();    //为了进行串联处理！！！
}

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);
}

start();    //开始执行逻辑

在这里插入图片描述

七：MediaStream API及获取视频约束

（一）MediaStream中的方法和事件

1.方法

在这里插入图片描述

addTrack：　　　向媒体流中添加轨
removeTrack：  从媒体流中移除轨
getVideoTracks：将所有的视频轨获取
getAudioTracks：将所有的音频轨获取

2.事件

在这里插入图片描述

（二）获取视频约束

index3.html

<html>
    <head>
        <title>    WebRTC get audio and video devices </title>
        <style>
            .none {
                -webkit-filter: none;
            }

            .blue {
                -webkit-filter: blur(3px); 
            }

            .grayscale {
                -webkit-filter: grayscale(1);
            }

            .invert {
                -webkit-filter: invert(1);
            }

            .sepia {
                -webkit-filter: sepia(1);
            }
        </style>
    </head>
    <body>
        <h1>Index3.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>
        <div>
            <label>Filter:</label>
            <select id="filter">
                <option value="none">None</option>
                <option value="blur">blur</option>
                <option value="grayscale">grayscale</option>
                <option value="invert">invert</option>
                <option value="sepia">sepia</option>
            </select>
        </div>
        <div>
            <button id="snapshot">Take snapshot</button>
        </div>
        <div>
            <canvas id="picture"></canvas>
        </div>

        <div>
            <table>
                <tr>
                    <td>
                        <video autoplay playsinline id="player"></video>
                    </td>
                    <td>
                        <div id="constraints"></div>
                    </td>
                </tr>
            </table>
        </div>
    </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>

client3.js

'use strict'

//设备
var audioInput = document.getElementById("audioInput");
var audioOutput = document.getElementById("audioOutput");
var videoInput = document.getElementById("videoInput");
//过滤器
var filtersSelect = document.getElementById("filter");
//图片
var snapshot = document.getElementById("snapshot");
var picture = document.getElementById("picture");
//约束显示
var divConstraints = document.querySelector("div#constraints");

picture.width = 320;
picture.height = 240;
//视频
var videoplay = document.querySelector("video#player");

function start(){
    console.log("start......");
    if(!navigator.mediaDevices || 
        !navigator.mediaDevices.getUserMedia){
        console.log("getUserMedia is not supported!");
    }else{
        var devId = videoInput.value;
        var constraints = {
            video : {
                width:320,
                height:240,
                frameRate:30,
                facingMode:"user"
            },
            audio : {
                noiseSuppression:true,
                echoCancellation:true
            },
            deviceId : devId ? devId : undefined    //undefined是使用默认设备
        }

        navigator.mediaDevices.getUserMedia(constraints)
                    .then(getUserMedia)
                    .then(gotDevices)    //可以进行串联处理
                    .catch(handleError);
    }
}

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

    //获取视频的track
    var videoTrack = stream.getVideoTracks()[0];    //只有一个，所以只取一个
    var videoConstraints = videoTrack.getSettings();    //获取约束对象

    divConstraints.textContent = JSON.stringify(videoConstraints,null,2);        //转为json

    return navigator.mediaDevices.enumerateDevices();    //为了进行串联处理！！！
}

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);
}

start();    //开始执行逻辑

//---------设置事件-----select选择摄像头之后
videoInput.onchange = start;

filtersSelect.onchange = function(){
    videoplay.className = filtersSelect.value;
}

snapshot.onclick = function(){
    picture.className = filtersSelect.value;    //设置图片的特效
    picture.getContext("2d")        //获取图像上下文
            .drawImage(videoplay,    //从视频流源中，获取数据
                0,0,
                picture.width,picture.height);    
}

在这里插入图片描述

{ 
"aspectRatio": 1.3333333333333333, 
"brightness": 128, 
"contrast": 130, 
"deviceId": "bf54ed3e6df71ed91193adde9d206e51b1d4a5afdaeb231c75a35466842df89e", 
"frameRate": 30, 
"groupId": "d0a8260d845d1e294dbf6819b7c36eedf635dd555e2529b7609c1fe25c9a1f82", 
"height": 240, 
"resizeMode": "none", 
"saturation": 64, 
"sharpness": 13, 
"whiteBalanceMode": "none", 
"width": 320 
}

FROM https://www.cnblogs.com/ssyfj/p/14783168.html

GrantHe2761
关注
专栏目录
【WebRTC---入门篇】（四）WebRTC设备管理
用可见的方式来记录和分享每一次收获
09-22 297
enumerateDevices API用来获取音视频设备
【webrtc】webrtc中音视频设备管理（9）
沛沛呀、
09-19 267
//index.html中 <!DOCTYPE html> <html> <head> <title>webrtc test</title> </head> <body> <script src="./js/client.js"></script> </body>...
WebRTC Adapter：跨浏览器兼容的WebRTC解决方案
最新发布
gitblog_00695的博客
09-14 789
WebRTC Adapter：跨浏览器兼容的WebRTC解决方案 adapter Shim to insulate apps from spec changes and prefix differences. Latest adapter.js release: ...
WebRTC: (1)设备管理
手写我对你的温柔
03-02 456
重要的API： enumerateDevices 基本格式： 其中ePromise中有个重要的结构体：MediaDevicesInfo 实操： 先准备express 部署一个Web服务器： 然后启动web服务器： 就可以访问public下发布路径下的文件了： 这样就进入了设备管理准备的代码： 案例1： 打印设备信息 其中的label没...
3-webrtc设备管理
LIJIWEI0611的博客
01-02 348
webrtc 获取音视频设备 通过enumerateDevices()获取到所有的音频和视频设备，返回的值是一个promise，这是javaScript中一个特有的对象，在promsie中有一个特有的结构体:MediaDevicesInfo，在这个结构体中存放了非常重要的几个信息，deviceid为这个设备的唯一标志符，第二个label就是设备的名字，比如内置音频设备，内置音频输入设备等 首先解释一个背景，JavaScript中是使用单线程去处理整个逻辑的，为了防止被阻塞，大量...
前端修仙路 - WebRTC之设备管理
weixin_47521346的博客
12-15 665
WebRTC-设备管理，本文主要介绍关于摄像头、麦克风，扬声器、屏幕共享相关控制和调用。
WebRTC学习之三：录音和播放
11-28
1. **getUserMedia**：这是WebRTC API的一部分，允许网页或应用访问用户的媒体设备，如麦克风和摄像头。在C++中，这通常通过JavaScript接口实现，但在本案例中，我们需要使用Qt来调用这些功能。 2. **...
webrtcdemo:WebRTC学习演示
04-30
7. **安全性与隐私**：WebRTC应用必须遵守同源策略和用户权限管理，只有在用户明确许可的情况下，才能访问其音频和视频设备。因此，开发者需要正确处理用户授权，并确保通信的安全性。 8. **跨平台兼容**：虽然...
webrtc基于webrtc-streamer推流实现直播
02-02
WebRTC-Streamer是WebRTC的一个扩展，它提供了一个服务器端的解决方案，使得非WebRTC兼容的设备或者服务也能参与到WebRTC的流媒体传输中。 在"webrtc-streamer"中，主要作用是将来自WebRTC的流转换为其他格式，如...
webrtc-streamer
03-23
WebRTC（Web Real-Time Communication）是一项开放的技术标准，旨在实现浏览器之间的实时通信，无需插件或第三方软件。它包括音频、视频通信以及数据共享的能力，广泛应用于在线视频会议、远程教育、协同办公等多个...
learning-webrtc:学习WebRTC时我作品的源代码-Source code learning
03-25
这个“learning-webrtc”项目是一个学习资源，包含了作者在研究WebRTC技术过程中编写的源代码。通过分析这些源代码，我们可以深入理解WebRTC的工作原理、组件和使用场景。 1. **WebRTC的基本概念** - **实时通信**...
webrtc-adapter:用于WebRTC的Commonjs adapter.js浏览器兼容性填充程序
05-03
webrtc适配器 用于WebRTC的Commonjs adapter.js浏览器兼容性填充程序 关于 WebRTC适配器提供了更符合标准的浏览器RTC对象版本，供在使用WebRTC的浏览器项目中使用。 它是为或 “编辑项目，使用节点样式require的语法，同时仍然在Chrome或Firefox（目前）浏览器中运行。 特别是，此模块导出的接口试图紧密镜像记录的标准。 实际上，Chrome和Firefox的实现均与此标准不同。 以前，示例通常是围绕构建的， 试图破坏浏览器之间的许多差异。 但是，此适配器规范地存在于示例目录中，并且不太适合作为依赖项包含在较大的项目中。 此实现在3个方面有所不同。 底层实现是通过存在前缀属性来发现的，而不是通过对navigator对象的显式探测来发现的。 这样可以使代码以firefox扩展名运行，而原始适配器则不能。 此实现使用节点样式导出，而不是
AdapterJS：用于WebRTC的AdapterJS Javascript Polyfill和工具-Skylink WebRTC
03-03
在浏览器中为WebRTC创建通用API 查找CDN上托管的最新版本。 缩小版本： //cdn.temasys.io/adapterjs/0.15.x/adapter.min.js 调试版本//cdn.temasys.io/adapterjs/0.15.x/adapter.debug.js 简化版本（具有屏幕//cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.min.js更改）： //cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.min.js 调试版本（具有屏幕//cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.js更改） //cdn.temasys.io/adapterjs/0.15.x/adapter.scre
前端项目-webrtc-adapter.zip
09-03
前端项目-webrtc-adapter,A shim to insulate apps from WebRTC spec changes and browser prefix differences
WebRTC系列-网络传输1之网络设备管理
HOSTEN的博客
04-03 1587
WebRTC中 针对各个平台设备的所有网卡及网络地址处理 源码分析
WebRTC设备管理 五、第一节 WebRTC获取音视频设备
xyphf的博客
06-30 1805
今天我们开始学习WebRTC内容了，首先我们看一下WebRTC如何进行设备管理。 在 WebRTC 的规范中，给我们提供一个重要的API，叫 enumerateDevices 通过这个API 我们就可以获取到电脑中的音频和视频设备，首先我们来看一下它的基本格式 /** * 基本格式 通过navigator.mediaDevices下的enumerateDevices方法获取所有的音频和视频设备 * 最后它返回的值是一个Promise,这是JavaScript中特有的一个对象 */ var ePro
WebRTC传输适配层：RtcAdapter
KnBackend的博客
09-25 323
总结来说，RtcAdapter是WebRTC中的传输适配层，它简化了WebRTC的使用，并提供了一组易用的API。RtcAdapter是WebRTC的传输适配层，它提供了一种简化和抽象化的接口，使开发者能够更轻松地在应用程序中实现基于WebRTC的实时通信功能。在上面的示例中，我们首先导入了RtcAdapter库，然后创建了一个RtcAdapter实例。它充当应用程序和底层WebRTC库之间的桥梁，隐藏了底层实现的复杂性，提供了一组简单易用的API供开发者使用。然后，我们设置本地描述并将其发送给远程端。
推荐开源项目：WebRTC Adapter —— 您的WebRTC跨浏览器兼容解决方案
gitblog_00039的博客
05-11 735
推荐开源项目：WebRTC Adapter —— 您的WebRTC跨浏览器兼容解决方案 adapter Shim to insulate apps from spec changes and prefix differences. Latest adapter.js release: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值