WEBRTC 筆記

WEBRTC 是什麼

它的全稱是WEB Real-time communication。一開始我還覺得是一種通訊技術。這裏的communication主要是人與人之間的，因此它解決了在網頁視頻、音頻的播放和獲取的問題。它的目標是但願用戶之間直接通訊，而不是經過服務器來進行交互。簡單地說就是在瀏覽器上實現視頻通話，並且最好不須要中央服務器。

你們應該仔細看看這個教程 ，我但願這篇筆記能夠更快地幫助你們理解，說明一下比較容易困惑的點，少走一些彎路，而不是取代這篇教程。

核心技術

1. getUserMedia() : 獲取視頻和音頻。

2. MediaRecorder : 記錄視頻和音頻。

3. RTCPeerConnection : 創建視頻流。

4. RTCDataChannel : 創建數據流。

實際問題

然而在現實中網絡是不通暢的，2個瀏覽器之間沒法直接創建鏈接，甚至都沒法發現對方。爲此須要額外的技術來完成鏈接。

1. ICE 這個框架應該是嵌入瀏覽器內部的，咱們並不須要瞭解太多的細節。

2. signaling 就個人理解，這個至關於媒人，來幫助2個瀏覽器來創建鏈接。

創建鏈接

JSEP：

1. 首先建立 RTCPeerConnection 對象，僅僅是初始化。

2. 使用 createOffer/createAnswer 來交換SDP，sdp中包含網絡信息，RTCPeerConnection 對象得以創建鏈接。

3. 激活onicecandidate完成鏈接。

WEBRTC沒有規定createOffer/createAnswer時使用的協議，所以signaling server 只要能夠與瀏覽器交換SDP便可。能夠用socket.io/wensocket等通訊技術把createOffer/createAnswer中的SDP給送到對方手裏就行了。

---

下面我將用一個簡單的例子來講明鏈接是如何創建的。
爲了更好地說明信號服務器的做用，我把它直接給拿掉了。取而代之的是一塊公告牌。
在sendMessage和receiveMsg中，將要發送的信息寫在頁面的msg下方。沒錯，人工複製便可。

1. 首先打開2個頁面，一個主動方點擊call，另外一個被動方點擊recv

2. 將caller的消息複製到receiver的answer按鈕邊上的文本框內，再點擊answer。

3. 將receiver的消息複製到caller的answer按鈕邊上的文本框內，再點擊answer。

4. 點擊send將send左邊的文本發送到對方send右側的文本框內。

demo code，人工信號服務器

概述：

1. 建立對象 。

2. 綁定回調函數。

   peerConn = new RTCPeerConnection(pcConfig);
   peerConn.onicecandidate = handleIceCandidate;
   
   dataChannel = peerConn.createDataChannel('1');
   channel.onopen = function() {
   console.log('CHANNEL opened!!!');
     };
   
     channel.onmessage = function(event){
     remoteText.innerText = event.data;
   };

3. 提供服務：createOffer。

   這期間要發送offer,candidate消息。
   `peerConn.createOffer(onLocalSessionCreated, logError);`
   在`onLocalSessionCreated`中調用`sendMessage`。
   隨後會觸發`handleIceCandidate`調用`sendMessage`。

4. 建立應答： createAnswer。

   peerConn.setRemoteDescription(new RTCSessionDescription(message), function() {},
                                 logError);
   peerConn.createAnswer(onLocalSessionCreated, logError);

   注意，這一步是在receiver端進行的。
   跟createOffer相似，createAnswer會發送一個answer消息，隨後發送candidate消息。

5. 添加candidate

   peerConn.addIceCandidate(new RTCIceCandidate({
     candidate: message.candidate
   }));

6. 鏈接創建