WebRTC是“網(wǎng)絡(luò)實(shí)時(shí)通信”（Web Real Time Communication）的縮寫察净，它主要用來(lái)讓瀏覽器實(shí)時(shí)獲取和交換視頻揖曾、音頻和數(shù)據(jù)军俊。
WebRTC共分三個(gè)API多矮。
MediaStream（又稱getUserMedia）
RTCPeerConnection
RTCDataChannel
getUserMedia主要用于獲取視頻和音頻信息氯析，后兩個(gè)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只是為了確保將來(lái)的兼容。
getUserMedia方法接受三個(gè)參數(shù)拦盹。
getUserMedia(streams, success, error);
含義如下：
streams：表示包括哪些多媒體設(shè)備的對(duì)象
success：回調(diào)函數(shù)鹃祖，獲取多媒體設(shè)備成功時(shí)調(diào)用
error：回調(diào)函數(shù)，獲取多媒體設(shè)備失敗時(shí)調(diào)用
用法如下：
navigator.getUserMedia({
video:true,
audio:true}, onSuccess, onError);
上面的代碼用來(lái)獲取攝像頭和麥克風(fēng)的實(shí)時(shí)信息普舆。
如果網(wǎng)頁(yè)使用了getUserMedia恬口，瀏覽器就會(huì)詢問(wèn)用戶，是否許可提供信息沼侣。如果用戶拒絕祖能，就調(diào)用回調(diào)函數(shù)onError。
發(fā)生錯(cuò)誤時(shí)蛾洛，回調(diào)函數(shù)的參數(shù)是一個(gè)Error對(duì)象养铸，它有一個(gè)code參數(shù)，取值如下：
PERMISSION_DENIED：用戶拒絕提供信息轧膘。
NOT_SUPPORTED_ERROR：瀏覽器不支持指定的媒體類型钞螟。
MANDATORY_UNSATISHIED_ERROR：指定的媒體類型未收到媒體流。
2 展示攝像頭圖像
將用戶的攝像頭拍攝的圖像展示在網(wǎng)頁(yè)上扶供，需要先在網(wǎng)頁(yè)上放置一個(gè)video元素筛圆。圖像就展示在這個(gè)元素中。
<video? ? id="webcam">? </video>
然后椿浓，用代碼獲取這個(gè)元素太援。
functiononSuccess(stream) {
var? video = document.getElementById('webcam');//more code
}
最后，將這個(gè)元素的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í)時(shí)數(shù)據(jù)交換
WebRTC的另外兩個(gè)API碱蒙，RTCPeerConnection用于瀏覽器之間點(diǎn)對(duì)點(diǎn)的連接，RTCDataChannel用于點(diǎn)對(duì)點(diǎn)的數(shù)據(jù)通信夯巷。
RTCPeerConnection帶有瀏覽器前綴赛惩，Chrome瀏覽器中為webkitRTCPeerConnection，F(xiàn)irefox瀏覽器中為mozRTCPeerConnection趁餐。Google維護(hù)一個(gè)函數(shù)庫(kù)adapter.js喷兼，用來(lái)抽像掉瀏覽器之間的差異。
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
