WebRTC-JavaScript半知半解

WebRTC

WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API。

1、getUserMedia

要播放摄像头的影像，首先需要一个video标签：

<video id="video"></video>

获取摄像头影像主要是通过navigator.getUserMedia这个接口，这个接口的支持情况已经逐渐变好了（点击这里），不过，使用的时候还是要加上前缀的。

兼容代码：

navigator.getUserMedia =  navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

语法：

navigator.getUserMedia(constraints, successCallback, errorCallback);

参数说明：

constraints：Object类型，指定了请求使用媒体的类型
succeCallback：启用成功时的函数，它传入一个参数，为视频流对象，可以进一步通过window.URL.createObjectURL()接口把视频流转换为对象URL。

errorCallback：启动失败时的函数。它传入一个参数，为错误对象（chrome）或错误信息字符串（Firefox），可能值：

PERMISSION_DENIED：用户拒绝提供信息。
NOT_SUPPORTED_ERROR：浏览器不支持硬件设备。
MANDATORY_UNSATISFIED_ERROR：无法发现指定的硬件设备。

例如要启用视频设备（摄像头），可这样：

navigator.getUserMedia({
  video: true
});

如果要同时启用视频设备和音频设备，可这样：

navigator.getUserMedia({
  video: true,
  audio: true
});

1.1 获取摄像头完整实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<video id="video" width="400" height="300"></video>
		<button id="live">直播</button>
    <script>
    	var video = document.getElementById("video");

		function liveVideo(){
		  // 获取到window.URL对象
		  var URL = window.URL || window.webkitURL;
		  navigator.getUserMedia({
		    video: true
		  }, function(stream){
		    video.src = URL.createObjectURL(stream);
		    video.play();
		  }, function(error){
		    console.log(error.name || error);
		  });
		}
		document.getElementById("live").addEventListener("click",function(){
			liveVideo();
		})
    </script>
	</body>
</html>

当点击直播按钮时，电脑会提升用户是否允许使用摄像头，允许之后，网页上就可以实时显示摄像头影像了。如果不允许，就会触发错误事件。

1.1.1 截图

除了实时直播外，我们还可以做实时截图效果，这时我们需要利用<canvas>元素来画图，代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#canvas,#video{
				float:left;
				margin-right:10px;
				background:#fff;
			}
			.box{
				overflow:hidden;
				margin-bottom:10px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<video id="video" width="400" height="300"></video>
			<canvas id="canvas"></canvas>
		</div>
		<button id="live">直播</button>
		<button id="snap">截图</button>
    <script>
		var video = document.getElementById("video");
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var width = video.width;
		var height = video.height;
		canvas.width = width;
		canvas.height = height;
		function liveVideo(){
		  // 获取到window.URL对象
		  var URL = window.URL || window.webkitURL;
		  navigator.getUserMedia({
		    video: true
		  }, function(stream){
		    video.src = URL.createObjectURL(stream);
		    video.play();
		    //点击截图
		    document.getElementById("snap").addEventListener("click",function(){
		    	ctx.drawImage(video, 0, 0, width, height);
		    });
		  }, function(error){
		    console.log(error.name || error);
		  });
		}
		//开始直播
		document.getElementById("live").addEventListener("click",function(){
			liveVideo();
		})
    </script>
	</body>
</html>

1.1.2 保存图片

当然，截图后，你也可以保存下来：

<a download="snap.png" id="download">下载图片</a>

var url = canvas.toDataURL("image/png");
document.getElementById("download").src = url;

1.2 捕获麦克风声音

要通过浏览器捕获声音，需要借助Web Audio API。

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var context = new AudioContext();

function onSuccess(stream){
  var audioInput = context.createMediaStreamSource(stream);
	audioInput.connect(context.destination);
}

navigator.getUserMedia({audio: true} ,onSuccess);