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); ```