WebRTC · JavaScript半知半解

## WebRTC WebRTC（Web Real-Time Communication，网页实时通信），是一个支持网页浏览器进行实时语音对话或视频对话的API。 **1、getUserMedia** 要播放摄像头的影像，首先需要一个video标签： ``` <video id="video"></video> ``` 获取摄像头影像主要是通过`navigator.getUserMedia`这个接口，这个接口的支持情况已经逐渐变好了（[点击这里](http://caniuse.com/#search=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); ```