WebRTC音视频数据采集 六、第四节 视频参数调-视频约束

我们今天介绍一下WebRTC 音视频采约束,通过这些 约束我们可以精确的控制音频和视频的采集数据，首先我们看看视频相关的约束。

width

height

这个两个很好理解，首先视频有分辨率，视频的宽高是多少，宽高一般我们视频上有两种比例 ，一种是4:3，另一种是16:9,像320*240的，640*480，这都属于4:3的比例，就是它更方一些，还有一种是16:9，比如是720P的，就是1280*720，这就是16:9的比例，它显得更长一些，但是对于我们的手机来说，它就翻过来了，如果我们竖屏拍摄那它高度就是16，比如1280*720，那么宽度就变成了720，这是宽和高，那么通过这个约束我们就可以控制这个分辨率，你想设置多少，就可以根据自己的情况去调节。

aspectRatio

第三个是比例，我们刚才所说的，在这里就是一个小数点 ，一般情况下我们只需要设置宽和高就可以了，这个aspectRatio通过宽高进行一个除，宽除以高，1.333，这个4:3的比例，这里这里我们一般不会设置这个值。

frameRate

第四个是对视频比较关键的帧率，我们可以通过帧率的多少来控制我们的码流，当然帧率低的话，你会看这个画面不太平滑，帧率高的话画面就很平滑，我们看电影也能看出这个效果，如果每秒钟只有十几帧的话，眼睛比较敏感的人它会看到一卡一卡的现象，但是对于 比如30帧或60帧的，就特别平滑，现在的高清电影 一般都是60帧。从另外一方面讲如果你帧率过高了，那你码流就会过大，相当于你1秒钟采集的数据多了。

facingMode

第五个比较好理解，对于我们的手机来说特别有用，他是来控制我们的摄像头翻转的。正常情况下我们 用的是前置摄像头对着自己拍，那你也可以设置成后置摄像头，就是往外拍；还可以打开 前置 的左边的摄像头和前置的右边摄像头，如果你是双 摄像头的话，这都可以做到。这PC上一般是没有前后摄像头的，所以这个设置就会不起作用，它会忽略。而对于手机来说就可以看出它的区别来。

user: 前置摄像头

environment:后置摄像头 

left:前置左侧摄像头

right:前置右侧摄像头 

resizeMode

表示采集的画面要不要裁剪，它可以设置为null，就是原封不动的，就是采集什么样他就是什么样。还有一种就是利用裁剪，把他 裁掉 一块去，这个用的不是太多，具体根据业务需求来看了。

下面我们来实践一下，设置constraints参数，看看修改这些参数有什么变化

'use strict'

var audioSource = document.querySelector('select#audioSource');
var audioOutput = document.querySelector('select#audioOutput');
var videoSource = document.querySelector('select#videoSource');
// 获取video标签
var videoplay = document.querySelector('video#player');

// deviceInfos是设备信息的数组
function gotDevices(deviceInfos){
  // 遍历设备信息数组， 函数里面也有个参数是每一项的deviceinfo， 这样我们就拿到每个设备的信息了
	deviceInfos.forEach(function(deviceinfo){
    // 创建每一项
		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);
		}
	})
}

// 获取到流做什么， 在gotMediaStream方面里面我们要传人一个参数，也就是流，
// 这个流里面实际上包含了音频轨和视频轨，因为我们通过constraints设置了要采集视频和音频
// 我们直接吧这个流赋值给HTML中赋值的video标签
// 当时拿到这个流了，说明用户已经同意去访问音视频设备了
function gotMediaStream(stream){  
  videoplay.srcObject = stream; // 指定数据源来自stream,这样视频标签采集到这个数据之后就可以将视频和音频播放出来
  // 当我们采集到音视频的数据之后，我们返回一个Promise
  return navigator.mediaDevices.enumerateDevices();
}

function handleError(err){
	console.log('getUserMedia error:', err);
}

// 判断浏览器是否支持
if(!navigator.mediaDevices ||
  !navigator.mediaDevices.getUserMedia){
  console.log('getUserMedia is not supported!');
}else{
  // 这里是约束参数，正常情况下我们只需要是否使用视频是否使用音频
  // 对于视频就可以按我们刚才所说的做一些限制
  var constraints = { // 表示同时采集视频金和音频
    video : {
      width: 640,	// 宽带
      height: 480,  // 高度
      frameRate:15, // 帧率
      facingMode: 'enviroment', //  设置为后置摄像头
      deviceId : deviceId ? {exact:deviceId} : undefined // 
    }, 
    audio : false 
  }
  navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMediaStream)  // 使用Promise串联的方式，获取流成功了
    .then(gotDevices)
    .catch(handleError);
}