webrtc获取音视频约束信息
2019-08-17 本文已影响0人
一叶知秋0830
API介绍
MediaStream.addTrack()向流媒体中加入轨
MediaStream.removeTrack()从流媒体中将轨移除
MediaStream.getVideoTracks()获取流媒体中所有视频轨
MediaStream.getAudioTracks()获取流媒体中所有音频轨
MediaStream.onaddTrack向流媒体中加入轨时触发的事件
MediaStream.onremoveTrack从流媒体中将轨移除时触发的事件
MediaStream.onended流结束时触发的事件
代码实例
首先通过nodejs搭建web服务器，搭建好后将服务启动。然后在public目录下新建一个constrant目录，在constrant目录下创建一个index.html文件，代码内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webrtc获取音视频约束信息</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!-- playsinline表示直接在浏览器内播放 -->
<video autoplay playsinline id="player"></video>
<div>
<label>视频约束信息：</label>
<div id="videoConstrants"></div>
</div>
<script type="text/javascript" src="js/client.js"></script>
</body>
</html>
然后在constrant目录下新建一个js目录，在js目录下创建一个client.js文件，代码内容如下：
'use strict'
var player = $("#player")[0];
var videoConstrantsDiv = $("#videoConstrants")[0];
start();
function start(){
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
console.log('不支采集音视频数据！');
}else{
// 采集音视频数据
var constrants = {
video:{
width:320,
height:240,
aspectRatio:1.33, // 宽高比，这个由宽除以高计算，一般不用设置
frameRate:20,
facingMode:"environment", // 摄像头面对模式，user是面向使用者(前置摄像头),environment是后置摄像头，left前置左摄像头，right前置右摄像头
resizeMode:"none", // 裁剪模式，none为不裁剪(不常用)
},
audio:{
volume:1.0, // 音量，0静音，1最大声音
sampleRate:44100,// 采样率
sampleSize:8, // 采样大小(每一个样用多少位表示)
echoCancellation: true, // 是否开启回音消除
autoGainControl:true, // 是否开启自动增益，也就是在原有录制的声音的基础上是否增加音量
noiseSuppression:true, // 是否开启降噪
latency: 0.2, // 延迟大小，在直播过程中latency设置的越小实时性会越好，但是网络不好时容易出现卡顿；设置的越大流畅度越好，但是设置太大会有明显的延迟。一般设置500ms，设置为200ms实时效果就很好了，大于500ms就能明显感觉到延迟了。
channelCount:1, // 声道数，一般设置单声道就够了
}
};
navigator.mediaDevices.getUserMedia(constrants).then(gotMediaStream).catch(handleError);
}
}
// 采集音视频数据成功时调用的方法
function gotMediaStream(stream){
player.srcObject = stream;
// 获取视频轨
var videoTrack = stream.getVideoTracks()[0]; // 获取视频轨的第一个轨
var videoConstrants = videoTrack.getSettings(); // 获取约束信息
// 将视频轨约束信息转换为json格式(2表示缩进位数)并展示在页面上
videoConstrantsDiv.textContent = JSON.stringify(videoConstrants,null,2);
}
// 采集音视频数据失败时调用的方法
function handleError(err){
console.log(err.name+':'+err.message);
}
然后打开浏览器在地址栏输入https://192.168.20.242:8081/constrant/index.html，等出现视频后视频下面会展示视频的约束信息，如下图所示：
视频约束信息
