摘要：雖然是點(diǎn)對(duì)點(diǎn)通信，但還是需要服務(wù)器來(lái)初始化連接，并傳遞一些信息。服務(wù)器實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)通信的關(guān)鍵在于兩個(gè)瀏覽器之間能直接發(fā)送和接收數(shù)據(jù)包，但一般情況下，瀏覽器或手機(jī)都是通過(guò)路由器訪問(wèn)，所以存在網(wǎng)絡(luò)地址轉(zhuǎn)換。

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

WebRTC 是一個(gè)開(kāi)源項(xiàng)目，旨在使得瀏覽器能為實(shí)時(shí)通信（RTC）提供簡(jiǎn)單的 JavaScript 接口。WebRTC 不僅可傳輸視頻，也可以傳輸其他數(shù)據(jù)例如文本、圖片等。需要注意的是，WebRTC 并不是瀏覽器的一個(gè)子集，瀏覽器只是根據(jù) WebRTC 的標(biāo)準(zhǔn)協(xié)議實(shí)現(xiàn)了 WebRTC 的原生接口。Android 和 IOS 系統(tǒng)也支持 WebRTC 。

WebRTC 應(yīng)用包括下面四個(gè)主要的概念：

信令服務(wù)器（Signalling servers）

ICE 服務(wù)器（ICE servers）

媒體服務(wù)器 （Media servers）

JavaScript 接口 （JavaScript API）

信令服務(wù)器主要用于在兩個(gè)用戶(hù)之間交換信息。雖然 WebRTC 是點(diǎn)對(duì)點(diǎn)通信，但還是需要服務(wù)器來(lái)初始化連接，并傳遞一些信息。
WebRTC 沒(méi)有定義用于建立信道的信令的協(xié)議，因此可以使用任意的傳輸方式，例如 WebSocket, XMPP, SIP, AJAX。

你可以使用實(shí)時(shí)的傳輸協(xié)議比如 WebSocket 來(lái)交換數(shù)據(jù)，也可以使用簡(jiǎn)單的 GET/POST 方式輪詢(xún)服務(wù)器來(lái)獲取數(shù)據(jù)。

信令服務(wù)器傳送的數(shù)據(jù)有：

協(xié)商媒體功能和設(shè)置

標(biāo)識(shí)和驗(yàn)證會(huì)話參與者的身份

控制媒體會(huì)話、指示進(jìn)度、更改會(huì)話和終止會(huì)話

其中只有第一項(xiàng)的必備功能。其他都可以根據(jù)業(yè)務(wù)需求自由調(diào)整。

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

實(shí)現(xiàn)點(diǎn)對(duì)點(diǎn)通信的關(guān)鍵在于兩個(gè)瀏覽器之間能直接發(fā)送和接收數(shù)據(jù)包，但一般情況下，瀏覽器或手機(jī)都是通過(guò)路由器訪問(wèn) Internet，所以存在網(wǎng)絡(luò)地址轉(zhuǎn)換（NAT）。位于 NAT 之內(nèi)的 IP 地址是私有地址，外部無(wú)法訪問(wèn)。分配給 NAT 的 IP 地址才是公共地址。NAT 每次從內(nèi)部到外部轉(zhuǎn)發(fā)數(shù)據(jù)包時(shí)都使用公共地址。

交互式建立連接（ICE）是一種標(biāo)準(zhǔn)穿透協(xié)議，它利用 STUN 和 TURN 服務(wù)器來(lái)建立連接。

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

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

媒體服務(wù)器不是必須的，但在多方會(huì)話或需要對(duì)媒體做額外處理的情況下可以考慮加入。對(duì)于有多個(gè)瀏覽器參與的會(huì)議，可以采用一個(gè)集中式媒體服務(wù)器。在這種情況下，美國(guó)瀏覽器都只需與媒體服務(wù)器建立單個(gè)連接即可，這種結(jié)構(gòu)的優(yōu)勢(shì)是額能夠擴(kuò)展非常大的會(huì)話，同時(shí)可以在最大限度上減少當(dāng)有新加入者加入會(huì)話事美國(guó)瀏覽器所需的處理工作量。同時(shí)，媒體服務(wù)器也可對(duì)媒體進(jìn)行分析、處理、保存等工作。

通過(guò)調(diào)用 navigator.getUserMedia() 可以獲取視頻或音頻的數(shù)據(jù)，constraints 參數(shù)可以選擇是否獲取視頻音頻。下面是一個(gè)簡(jiǎn)單的示例

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 中最重要的一個(gè)接口，用于確定 ICE 服務(wù)器、交換 SDP。連接過(guò)程如下：

創(chuàng)建 RTCPeerConnection 對(duì)象

RTCPeerConnection 的參數(shù)用于確定 ICE 服務(wù)器，下面是使用了 google 開(kāi)放的 STUN 服務(wù)器

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

將媒體流放入 RTCPeerConnection 對(duì)象中

pc.addStream(localStream);

通過(guò) offer 和 answer 交換 SDP 描述符

甲和乙各自建立一個(gè)PC實(shí)例

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

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

甲將 offer 信令通過(guò)服務(wù)器發(fā)送給乙

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

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

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

乙將answer信令通過(guò)服務(wù)器發(fā)送給甲

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

ICE 打洞

當(dāng)網(wǎng)絡(luò)候選可用時(shí)，通過(guò)信令服務(wù)器將其發(fā)送到對(duì)方瀏覽器

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

當(dāng)接受到對(duì)方網(wǎng)絡(luò)候選時(shí)，將其加入

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

監(jiān)聽(tīng)對(duì)方發(fā)送的媒體是否可用，并播放媒體

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

RTCDataChannel 是 RTCPeerConnection API 的一部分，只有在創(chuàng)建了 RTCPeerConnection 實(shí)例后才能創(chuàng)建數(shù)據(jù)通道。數(shù)據(jù)通道可以用于發(fā)送文本或是文件。

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

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

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

在另一端可以使用 ondatachannel 獲得 RTCDataChannel 對(duì)象

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

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

https://webrtc.org/

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

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