WebRTC系列文章

WebRTC源码研究（17）MediaStreamAPI 获取视频约束

1. MediaStreamAPI 简介

MediaStream 模块中提供了一些非常有用的视频，音频流操作的相关api, 如在媒体流中增加轨，删除轨，添加音频轨，视频轨，关闭流等等，还提供了一些事件回调。

这里只是粗略的讲解一下，后续章节中还好从源码分析的角度来详细讲解。

音频，视频轨操作api如下：

api	用途	说明
addTrack()	向流媒体中加入不同的轨
removeTrack()	将媒体流中不想要的媒体轨移出去
getVideoTracks()	将媒体流中所有的视频的轨，全部拿到，这样就可以根据自身的需要，去获取所需要的视频的媒体轨
getAudioTracks()	将媒体流中所有的音频的轨，全部拿到，这样就可以根据自身的需要，去获取所需要的音频的媒体轨
stop()	将媒体流直接关闭掉，这样它会调每一个媒体轨中的STOP；这样的话，这个流就结束掉了。

event事件如下：

api	用途	说明
onaddtrack	添加一个媒体轨到媒体流中的时候，会触发这个事件，
onremovetrack	删除这个媒体轨的回调
onended	流结束的事件

2. 获取视频约束实战

针对上面讲解的一些api这里举一些实际使用的例子，来加深一点印象

还是老套路，index.html的内容跟前面的章节一样：

<html>
  <head>
    <title>获取视频约束实战--孔雨露</title>
		<style>
			.none {
				-webkit-filter: none;	
			}
 
			.blur {
        /* 特效模糊 */
				-webkit-filter: blur(3px);	
			}
 
			.grayscale {
        /* 特效灰度 */
				-webkit-filter: grayscale(1); 	
			}
 
			.invert {
        /* 翻转 */
				-webkit-filter: invert(1);	
			}
 
			.sepia {
        /* 特效褐色 */
				-webkit-filter: sepia(1);
			}
 
		</style>
  </head>
  <body>
		<div>
			<label>audio Source:</label>
			<select id="audioSource"></select>
		</div>
 
		<div>
			<label>audio Output:</label>
			<select id="audioOutput"></select>
		</div>
 
		<div>
			<label>video Source:</label>
			<select id="videoSource"></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 表示当我们拿到视频源的时候直接播放
      playsinlin  表示在浏览器页面中播放而不是调用第三方工具
     -->
     <!-- 通过audio标签只获取音频 -->
     <!-- 
       controls  表示将暂停和播放按钮显示出来,否则它虽然播放声音，但是不会显示播放器窗口
       autoplay  默认自动播放
      -->
    <!-- <audio autoplay controls id='audioplayer'></audio> -->
		<table>
			<tr>
				<td><video autoplay playsinline id="player"></video></td>
				<td><video playsinline id="recplayer"></video></td>
				<td><div id='constraints' class='output'></div></td>
			</tr>
			<tr>
				<td><button id="record">Start Record</button></td>
				<td><button id="recplay" disabled>Play</button></td>
				<td><button id="download" disabled>Download</button></td>
			</tr>
		</table>
 
    <!-- 获取视频帧图片按钮 -->
		<div>
			<button id="snapshot">Take snapshot</button>
    </div>
    <!-- 获取视频帧图片显示在canvas里面 -->
		<div>
			<canvas id="picture"></canvas>
		</div>
    <!-- 引入 adapter.js库 来做 不同浏览器的兼容 -->
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="./js/client.js"></script>
  </body>
</html>

上面html中的client.js代码如下：

'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');
// 获取音频标签
var audioplay = document.querySelector('audio#audioplayer');
 
//div
var divConstraints = document.querySelector('div#constraints');
 
//filter 特效选择
var filtersSelect = document.querySelector('select#filter');
 
//picture 获取视频帧图片相关的元素
var snapshot = document.querySelector('button#snapshot');
var picture = document.querySelector('canvas#picture');
picture.width = 640;
picture.height = 480;
 
// 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){  
  	// audioplay.srcObject = stream;
  videoplay.srcObject = stream; // 指定数据源来自stream,这样视频标签采集到这个数据之后就可以将视频和音频播放出来
  // 通过stream来获取到视频的track 这样我们就将所有的视频流中的track都获取到了,这里我们只取列表中的第一个
  var videoTrack = stream.getVideoTracks()[0];
  // 拿到track之后我们就能调用Track的方法
  var videoConstraints = videoTrack.getSettings(); // 这样就可以拿到所有video的约束
  // 将这个对象转化成json格式
  // 第一个是videoConstraints, 第二个为空, 第三个表示缩进2格
	divConstraints.textContent = JSON.stringify(videoConstraints, null, 2);
 
  // 当我们采集到音视频的数据之后，我们返回一个Promise
  return navigator.mediaDevices.enumerateDevices();
}
 
function handleError(err){
	console.log('getUserMedia error:', err);
}
function start() {
// 判断浏览器是否支持
if(!navigator.mediaDevices ||
  !navigator.mediaDevices.getUserMedia){
  console.log('getUserMedia is not supported!');
}else{
  // 获取到deviceId
  var deviceId = videoSource.value; 
  // 这里是约束参数，正常情况下我们只需要是否使用视频是否使用音频
  // 对于视频就可以按我们刚才所说的做一些限制
  var constraints = { // 表示同时采集视频金和音频
    video : {
      width: 640,	// 宽带
      height: 480,  // 高度
      frameRate:15, // 帧率
      facingMode: 'enviroment', //  设置为后置摄像头
      deviceId : deviceId ? deviceId : undefined // 如果deviceId不为空直接设置值，如果为空就是undefined
    }, 
    audio : true // 将声音获取设为true
  }
  //  从指定的设备中去采集数据
  navigator.mediaDevices.getUserMedia(constraints)
    .then(gotMediaStream)  // 使用Promise串联的方式，获取流成功了
    .then(gotDevices)
    .catch(handleError);
}
}
 
start();
 
// 当我选择摄像头的时候，他可以触发一个事件，
// 当我调用start之后我要改变constraints
videoSource.onchange = start;
 
// 选择特效的方法
filtersSelect.onchange = function(){
	videoplay.className = filtersSelect.value;
}
 
// 点击按钮获取视频帧图片
snapshot.onclick = function() {
  picture.className = filtersSelect.value;
  // 调用canvas API获取上下文，图片是二维的，所以2d,这样我们就拿到它的上下文了
  // 调用drawImage绘制图片,第一个参数就是视频，我们这里是videoplay,
  // 第二和第三个参数是起始点 0,0
  // 第四个和第五个参数表示图片的高度和宽度
	picture.getContext('2d').drawImage(videoplay, 0, 0, picture.width, picture.height);
}