摘要：雖然是點對點通信，但還是需要服務器來初始化連接，并傳遞一些信息。服務器實現點對點通信的關鍵在于兩個瀏覽器之間能直接發送和接收數據包，但一般情況下，瀏覽器或手機都是通過路由器訪問，所以存在網絡地址轉換。

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

WebRTC 是一個開源項目，旨在使得瀏覽器能為實時通信（RTC）提供簡單的 JavaScript 接口。WebRTC 不僅可傳輸視頻，也可以傳輸其他數據例如文本、圖片等。需要注意的是，WebRTC 并不是瀏覽器的一個子集，瀏覽器只是根據 WebRTC 的標準協議實現了 WebRTC 的原生接口。Android 和 IOS 系統也支持 WebRTC 。

WebRTC 應用包括下面四個主要的概念：

信令服務器（Signalling servers）

ICE 服務器（ICE servers）

媒體服務器 （Media servers）

JavaScript 接口 （JavaScript API）

信令服務器主要用于在兩個用戶之間交換信息。雖然 WebRTC 是點對點通信，但還是需要服務器來初始化連接，并傳遞一些信息。
WebRTC 沒有定義用于建立信道的信令的協議，因此可以使用任意的傳輸方式，例如 WebSocket, XMPP, SIP, AJAX。

你可以使用實時的傳輸協議比如 WebSocket 來交換數據，也可以使用簡單的 GET/POST 方式輪詢服務器來獲取數據。

信令服務器傳送的數據有：

協商媒體功能和設置

標識和驗證會話參與者的身份

控制媒體會話、指示進度、更改會話和終止會話

其中只有第一項的必備功能。其他都可以根據業務需求自由調整。

媒體協商最重要的功能在于，為參與點對點通信的兩個瀏覽器之間交換會話描述協議（SDP）。SDP 包含瀏覽器的 RTP 媒體棧配置所需的全部信息，包括媒體類型（音頻、視頻、數據）、所需的編解碼器，用于編解碼器的哥哥參數或設置，以及有關帶寬的信息。此外，信令通道還用于交換候選地址，以便進行 ICE 打洞。

實現點對點通信的關鍵在于兩個瀏覽器之間能直接發送和接收數據包，但一般情況下，瀏覽器或手機都是通過路由器訪問 Internet，所以存在網絡地址轉換（NAT）。位于 NAT 之內的 IP 地址是私有地址，外部無法訪問。分配給 NAT 的 IP 地址才是公共地址。NAT 每次從內部到外部轉發數據包時都使用公共地址。

交互式建立連接（ICE）是一種標準穿透協議，它利用 STUN 和 TURN 服務器來建立連接。

STUN 服務器可以遍歷 NAT，獲取瀏覽器的候選地址，包括私有地址、外層 NAT 的公共 IP 地址等。通信信令通道可以交換候選地址，瀏覽器一旦發送并收到了候選項，就會開始進行連接檢查，若檢查成功，便使用該候選項發送媒體。

在大多情況下，通過穿透可以建立直接對等連接。但是，若 NAT 或防火墻限制非常嚴格，無法建立連接，就只能通過 TURN 服務器中繼媒體。

媒體服務器不是必須的，但在多方會話或需要對媒體做額外處理的情況下可以考慮加入。對于有多個瀏覽器參與的會議，可以采用一個集中式媒體服務器。在這種情況下，美國瀏覽器都只需與媒體服務器建立單個連接即可，這種結構的優勢是額能夠擴展非常大的會話，同時可以在最大限度上減少當有新加入者加入會話事美國瀏覽器所需的處理工作量。同時，媒體服務器也可對媒體進行分析、處理、保存等工作。

通過調用 navigator.getUserMedia() 可以獲取視頻或音頻的數據，constraints 參數可以選擇是否獲取視頻音頻。下面是一個簡單的示例

var constraints = {
  audio: false,
  video: true
};
var video = document.querySelector("video");

function successCallback(stream) {

  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
}

function errorCallback(error) {
  console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

RTCPeerConnection 是 WebRTC 中最重要的一個接口，用于確定 ICE 服務器、交換 SDP。連接過程如下：

創建 RTCPeerConnection 對象

RTCPeerConnection 的參數用于確定 ICE 服務器，下面是使用了 google 開放的 STUN 服務器

let iceServer = {
    "iceServers": [{
        "url": "stun:stun.l.google.com:19302"
    }]
};
let pc = new RTCPeerConnection(servers);

將媒體流放入 RTCPeerConnection 對象中

pc.addStream(localStream);

通過 offer 和 answer 交換 SDP 描述符

甲和乙各自建立一個PC實例

甲通過 PC 所提供的 createOffer() 方法建立一個包含甲的 SDP 描述符的 offer 信令

甲通過 PC 所提供的 setLocalDescription() 方法，將甲的SDP描述符交給甲的 PC 實例

甲將 offer 信令通過服務器發送給乙

乙將甲的 offer 信令中所包含的的SDP描述符提取出來，通過PC所提供的 setRemoteDescription() 方法交給乙的PC實例

乙通過PC所提供的 createAnswer() 方法建立一個包含乙的 SDP 描述符 answer 信令

乙通過PC所提供的 setLocalDescription() 方法，將乙的 SDP 描述符交給乙的PC實例

乙將answer信令通過服務器發送給甲

甲接收到乙的answer信令后，將其中乙的SDP描述符提取出來，調用setRemoteDescripttion()方法交給甲自己的PC實例

ICE 打洞

當網絡候選可用時，通過信令服務器將其發送到對方瀏覽器

pc.onicecandidate = function(event) {
  if (event.candidate) {
    sendToServer(event.candidate)
  }
};

當接受到對方網絡候選時，將其加入

let candidate = new RTCIceCandidate(candidate);
pc.addIceCandidate(candidate);

監聽對方發送的媒體是否可用，并播放媒體

pc.onaddstream = event => {
  remoteVideo.src = window.URL.createObjectURL(event.stream);
}

RTCDataChannel 是 RTCPeerConnection API 的一部分，只有在創建了 RTCPeerConnection 實例后才能創建數據通道。數據通道可以用于發送文本或是文件。

pc = new RTCPeerConnection();
dc =  pc.createDataChannel("dc");

dc.onmessage = event => console.log(event.data);

dc.send("text");
dc.sed(new arraybuffer(32))

在另一端可以使用 ondatachannel 獲得 RTCDataChannel 對象

pc.ondatachannel = event => dc = event.channel;

https://codelabs.developers.g...

https://webrtc.org/

https://segmentfault.com/a/11...

http://www.muazkhan.com/2013/...