摘要：在處于使用了設(shè)備的私有網(wǎng)絡(luò)中的主機(jī)之間需要建立連接時(shí)需要使用穿越技術(shù)。目前已經(jīng)有很多穿越技術(shù)，但沒有一項(xiàng)是完美的，因?yàn)榈男袨槭欠菢?biāo)準(zhǔn)化的。

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

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

這么好的功能，各大瀏覽器廠商自然不會(huì)置之不理?，F(xiàn)在WebRTC已經(jīng)可以在較新版的Chrome、Opera和Firefox中使用了，著名的瀏覽器兼容性查詢網(wǎng)站caniuse上給出了一份詳盡的瀏覽器兼容情況

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

WebRTC實(shí)現(xiàn)了三個(gè)API，分別是:
* MediaStream：通過MediaStream的API能夠通過設(shè)備的攝像頭及話筒獲得視頻、音頻的同步流
* RTCPeerConnection：RTCPeerConnection是WebRTC用于構(gòu)建點(diǎn)對(duì)點(diǎn)之間穩(wěn)定、高效的流傳輸?shù)慕M件
* RTCDataChannel：RTCDataChannel使得瀏覽器之間（點(diǎn)對(duì)點(diǎn)）建立一個(gè)高吞吐量、低延時(shí)的信道，用于傳輸任意數(shù)據(jù)

這里大致上介紹一下這三個(gè)API

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

W3C標(biāo)準(zhǔn)傳送門

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

由于瀏覽器實(shí)現(xiàn)不同，他們經(jīng)常會(huì)在實(shí)現(xiàn)標(biāo)準(zhǔn)版本之前，在方法前面加上前綴，所以一個(gè)兼容版本就像這樣

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

html


    
    


    

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

javascript//使用Google的stun服務(wù)器
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);
//與后臺(tái)服務(wù)器的WebSocket連接
var socket = __createWebSocketChannel();
//創(chuàng)建PeerConnection實(shí)例
var pc = new PeerConnection(iceServer);
//發(fā)送ICE候選到其他客戶端
pc.onicecandidate = function(event){
    socket.send(JSON.stringify({
        "event": "__ice_candidate",
        "data": {
            "candidate": event.candidate
        }
    }));
};
//如果檢測(cè)到媒體流連接到本地，將其綁定到一個(gè)video標(biāo)簽上輸出
pc.onaddstream = function(event){
    someVideoElement.src = URL.createObjectURL(event.stream);
};
//獲取本地的媒體流，并綁定到一個(gè)video標(biāo)簽上輸出，并且發(fā)送這個(gè)媒體流給其他客戶端
getUserMedia.call(navigator, {
    "audio": true,
    "video": true
}, function(stream){
    //發(fā)送offer和answer的函數(shù)，發(fā)送本地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標(biāo)簽用于輸出
    myselfVideoElement.src = URL.createObjectURL(stream);
    //向PeerConnection中加入需要發(fā)送的流
    pc.addStream(stream);
    //如果是發(fā)送方則發(fā)送一個(gè)offer信令，否則發(fā)送一個(gè)answer信令
    if(isCaller){
        pc.createOffer(sendOfferFn);
    } else {
        pc.createAnswer(sendAnswerFn);
    }
}, function(error){
    //處理媒體流創(chuàng)建失敗錯(cuò)誤
});
//處理到來的信令
socket.onmessage = function(event){
    var json = JSON.parse(event.data);
    //如果是一個(gè)ICE的候選，則將其加入到PeerConnection中，否則設(shè)定對(duì)方的session描述為傳遞過來的描述
    if( json.event === "__ice_candidate" ){
        pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
    } else {
         pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
    }
};