WebRTC是“網(wǎng)絡(luò)實時通信”（Web Real Time Communication）的縮寫，它主要用來讓瀏覽器實時獲取和交換視頻、音頻和數(shù)據(jù)。
WebRTC共分三個API。
MediaStream（又稱getUserMedia）
RTCPeerConnection
RTCDataChannel
getUserMedia主要用于獲取視頻和音頻信息，后兩個API用于瀏覽器之間的數(shù)據(jù)交換。
首先，檢查瀏覽器是否支持getUserMedia方法。
navigator.getUserMedia ||(navigator.getUserMedia= navigator.mozGetUserMedia ||? navigator.webkitGetUserMedia ||navigator.msGetUserMedia);
if(navigator.getUserMedia) {
//do something
}else{
console.log('your browser not support getUserMedia');
}
Chrome21、Opera 18和Firefox 17支持該方法，目前IE還不支持，上面代碼中的msGetUserMedia只是為了確保將來的兼容。
getUserMedia方法接受三個參數(shù)。
getUserMedia(streams, success, error);
含義如下：
streams：表示包括哪些多媒體設(shè)備的對象
success：回調(diào)函數(shù)，獲取多媒體設(shè)備成功時調(diào)用
error：回調(diào)函數(shù)，獲取多媒體設(shè)備失敗時調(diào)用
用法如下：
navigator.getUserMedia({
video:true,
audio:true}, onSuccess, onError);
上面的代碼用來獲取攝像頭和麥克風(fēng)的實時信息。
如果網(wǎng)頁使用了getUserMedia，瀏覽器就會詢問用戶，是否許可提供信息。如果用戶拒絕，就調(diào)用回調(diào)函數(shù)onError。
發(fā)生錯誤時，回調(diào)函數(shù)的參數(shù)是一個Error對象，它有一個code參數(shù)，取值如下：
PERMISSION_DENIED：用戶拒絕提供信息。
NOT_SUPPORTED_ERROR：瀏覽器不支持指定的媒體類型。
MANDATORY_UNSATISHIED_ERROR：指定的媒體類型未收到媒體流。
2 展示攝像頭圖像
將用戶的攝像頭拍攝的圖像展示在網(wǎng)頁上，需要先在網(wǎng)頁上放置一個video元素。圖像就展示在這個元素中。
<video? ? id="webcam">? </video>
然后，用代碼獲取這個元素。
functiononSuccess(stream) {
var? video = document.getElementById('webcam');//more code
}
最后，將這個元素的src屬性綁定數(shù)據(jù)流，攝像頭拍攝的圖像就可以顯示了。
functiononSuccess(stream) {
var?? video = document.getElementById('webcam');
if(window.URL) {
video.src=window.URL.createObjectURL(stream);
}else{
video.src=stream;
}
video.autoplay=true;???? //or video.play();
}
它的主要用途是讓用戶使用攝像頭為自己拍照。
3、實時數(shù)據(jù)交換
WebRTC的另外兩個API，RTCPeerConnection用于瀏覽器之間點對點的連接，RTCDataChannel用于點對點的數(shù)據(jù)通信。
RTCPeerConnection帶有瀏覽器前綴，Chrome瀏覽器中為webkitRTCPeerConnection，F(xiàn)irefox瀏覽器中為mozRTCPeerConnection。Google維護一個函數(shù)庫adapter.js，用來抽像掉瀏覽器之間的差異。
var? dataChannelOptions ={
ordered:false,//do not guarantee order
maxRetransmitTime: 3000,//in milliseconds
};
var? peerConnection =newRTCPeerConnection();
//Establish your peer connection using your signaling channel here
var?? dataChannel =peerConnection.createDataChannel("myLabel", dataChannelOptions);
dataChannel.onerror=function(error) {
console.log("Data Channel Error:", error);
};
dataChannel.onmessage=function(event) {
console.log("Got Data Channel Message:", event.data);
};
dataChannel.onopen=function() {
dataChannel.send("Hello World!");
};
dataChannel.onclose=function() {
console.log("The Data Channel is Closed");
};
原網(wǎng)址：http://www.cnblogs.com/jscode/p/3601648.html
