摘要：在處于使用了設備的私有網絡中的主機之間需要建立連接時需要使用穿越技術。目前已經有很多穿越技術，但沒有一項是完美的，因為的行為是非標準化的。

眾所周知，瀏覽器本身不支持相互之間直接建立信道進行通信，都是通過服務器進行中轉。比如現在有兩個客戶端，甲和乙，他們倆想要通信，首先需要甲和服務器、乙和服務器之間建立信道。甲給乙發送消息時，甲先將消息發送到服務器上，服務器對甲的消息進行中轉，發送到乙處，反過來也是一樣。這樣甲與乙之間的一次消息要通過兩段信道，通信的效率同時受制于這兩段信道的帶寬。同時這樣的信道并不適合數據流的傳輸，如何建立瀏覽器之間的點對點傳輸，一直困擾著開發者。WebRTC應運而生

WebRTC是一個開源項目，旨在使得瀏覽器能為實時通信（RTC）提供簡單的JavaScript接口。說的簡單明了一點就是讓瀏覽器提供JS的即時通信接口。這個接口所創立的信道并不是像WebSocket一樣，打通一個瀏覽器與WebSocket服務器之間的通信，而是通過一系列的信令，建立一個瀏覽器與瀏覽器之間（peer-to-peer）的信道，這個信道可以發送任何數據，而不需要經過服務器。并且WebRTC通過實現MediaStream，通過瀏覽器調用設備的攝像頭、話筒，使得瀏覽器之間可以傳遞音頻和視頻

這么好的功能，各大瀏覽器廠商自然不會置之不理。現在WebRTC已經可以在較新版的Chrome、Opera和Firefox中使用了，著名的瀏覽器兼容性查詢網站caniuse上給出了一份詳盡的瀏覽器兼容情況

另外根據36Kr前段時間的新聞Google推出支持WebRTC及Web Audio的Android 版Chrome 29@36kr和Android版Opera開始支持WebRTC，允許用戶在沒有任何插件的情況下實現語音和視頻聊天，Android也開始支持WebRTC

WebRTC實現了三個API，分別是:
* MediaStream：通過MediaStream的API能夠通過設備的攝像頭及話筒獲得視頻、音頻的同步流
* RTCPeerConnection：RTCPeerConnection是WebRTC用于構建點對點之間穩定、高效的流傳輸的組件
* RTCDataChannel：RTCDataChannel使得瀏覽器之間（點對點）建立一個高吞吐量、低延時的信道，用于傳輸任意數據

這里大致上介紹一下這三個API

MediaStream API為WebRTC提供了從設備的攝像頭、話筒獲取視頻、音頻流數據的功能

W3C標準傳送門

同門可以通過調用navigator.getUserMedia()，這個方法接受三個參數：
1. 一個約束對象（constraints object），這個后面會多帶帶講
2. 一個調用成功的回調函數，如果調用成功，傳遞給它一個流對象
3. 一個調用失敗的回調函數，如果調用失敗，傳遞給它一個錯誤對象

由于瀏覽器實現不同，他們經常會在實現標準版本之前，在方法前面加上前綴，所以一個兼容版本就像這樣

javacriptvar getUserMedia = (navigator.getUserMedia || 
                    navigator.webkitGetUserMedia || 
                    navigator.mozGetUserMedia || 
                    navigator.msGetUserMedia);

html


    
    


    

javascriptvar PeerConnection = (window.PeerConnection ||
                    window.webkitPeerConnection00 || 
                    window.webkitRTCPeerConnection || 
                    window.mozRTCPeerConnection);

javascript//使用Google的stun服務器
var iceServer = {
    "iceServers": [{
        "url": "stun:stun.l.google.com:19302"
    }]
};
//兼容瀏覽器的getUserMedia寫法
var getUserMedia = (navigator.getUserMedia ||
                    navigator.webkitGetUserMedia || 
                    navigator.mozGetUserMedia || 
                    navigator.msGetUserMedia);
//兼容瀏覽器的PeerConnection寫法
var PeerConnection = (window.PeerConnection ||
                    window.webkitPeerConnection00 || 
                    window.webkitRTCPeerConnection || 
                    window.mozRTCPeerConnection);
//與后臺服務器的WebSocket連接
var socket = __createWebSocketChannel();
//創建PeerConnection實例
var pc = new PeerConnection(iceServer);
//發送ICE候選到其他客戶端
pc.onicecandidate = function(event){
    socket.send(JSON.stringify({
        "event": "__ice_candidate",
        "data": {
            "candidate": event.candidate
        }
    }));
};
//如果檢測到媒體流連接到本地，將其綁定到一個video標簽上輸出
pc.onaddstream = function(event){
    someVideoElement.src = URL.createObjectURL(event.stream);
};
//獲取本地的媒體流，并綁定到一個video標簽上輸出，并且發送這個媒體流給其他客戶端
getUserMedia.call(navigator, {
    "audio": true,
    "video": true
}, function(stream){
    //發送offer和answer的函數，發送本地session描述
    var sendOfferFn = function(desc){
            pc.setLocalDescription(desc);
            socket.send(JSON.stringify({ 
                "event": "__offer",
                "data": {
                    "sdp": desc
                }
            }));
        },
        sendAnswerFn = function(desc){
            pc.setLocalDescription(desc);
            socket.send(JSON.stringify({ 
                "event": "__answer",
                "data": {
                    "sdp": desc
                }
            }));
        };
    //綁定本地媒體流到video標簽用于輸出
    myselfVideoElement.src = URL.createObjectURL(stream);
    //向PeerConnection中加入需要發送的流
    pc.addStream(stream);
    //如果是發送方則發送一個offer信令，否則發送一個answer信令
    if(isCaller){
        pc.createOffer(sendOfferFn);
    } else {
        pc.createAnswer(sendAnswerFn);
    }
}, function(error){
    //處理媒體流創建失敗錯誤
});
//處理到來的信令
socket.onmessage = function(event){
    var json = JSON.parse(event.data);
    //如果是一個ICE的候選，則將其加入到PeerConnection中，否則設定對方的session描述為傳遞過來的描述
    if( json.event === "__ice_candidate" ){
        pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
    } else {
         pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
    }
};