本文作者 WebRTC Ventures 工程師。在今年 RTC 2018 實時網際網路大會上，WebRTC Ventures 的資深軟體工程師，將圍繞 WebRTC 開發帶來經驗分享。本週是大會最後一週門票限免，點選這裡抓住最後免費參會學習的機會。
瞭解 WebRTC 如何工作的一種簡單方式是通過學習如何使用 WebRTC 和 Kurento 媒體伺服器建立視訊會議 App。儘管 WebRTC 初衷是建立peer-to-peer的連線，而媒體伺服器對於新增諸如錄製、多方通話等功能是非常有用的。我們將會使用 Kurento，這個開源媒體伺服器，來為我們 App 在多於兩個使用者的情況下提供連線支援。接下來，讓我們來回顧整體的過程，我們將通過 WebRTC 建立連線的過程分為三步：
1. 瀏覽器獲取媒體裝置（攝像頭和麥克風）
2. 每一個 peer 通過發信過程與其它所有 peer 交換資訊。
3. 交換資訊過後，peers 可以通過媒體伺服器連線，並開始通訊。
注意，對於交換訊息我們依然需要一個信令伺服器，對於 NAT 穿透我們需要 STUN 或 TURN 伺服器。另外，我們新增了一個媒體伺服器用來將流引到各個 peers。
我們的 App 包括一個登陸介面，在此使用者輸入名字和他想加入和交談的房間號，在這個房間裡他可以看到視訊會議的其他參與者。
此教程的程式碼可以在 Github 上一個公共目錄下獲得，你可以將它 clone 到你的本地，直接使用，也可以跟著我們這篇文章來一步步做起來。如果你選擇後者，請下載 adapter.js 和 kurento-utils.min.js，之後我們將會用到。
我們使用 JavaScript 作為程式語言，使用 Node.js 作為執行引擎，因此如果你沒有 node 的話需要安裝它。我們還會使用 Docker 來在本地執行媒體伺服器。
讓我們從建立新資料夾開始，這將會是專案資料夾。
接著在裡面建立一個叫做public的資料夾，現在將下載的library複製到這裡。使用命令列，導航到專案資料夾，並輸入如下命令來安裝所需要的環境。在下載library的時候需要網路連線。
另外， 啟動媒體伺服器，在命令列輸入以下命令。
開始時，我們需要建立一個html檔案包含兩個divs，一個是用來登入，另一個用來實際交流。同樣，我們新增kurento-utils library,它需要adapter.js ， socket.io客戶端library和client.js檔案。
使用你最喜歡的文字編輯器，建立一個新資料夾，貼上如下程式碼並儲存到專案資料夾下，在public資料夾裡命名為index.html.
很好，現在我們來建立客戶端的JS檔案。我們從得到網頁元素的reference和宣告客戶使用者名稱和房間號的變數開始，我們同樣需要宣告一個變數用來儲存一系列的會議參與者。接著，就像一對一版本的app一樣，我們使用socket.io連線信令伺服器，並註冊一個點選事件，用來向伺服器傳送第一條資訊，這是一個‘’加入房間‘’的資訊。這次我們不直接使用socket.emit()函式，而是使用一個sendMessage()函式，它被定義在檔案底部。我們還需要宣告伺服器資訊的handlers。
使用文字編輯器建立client.js檔案，並儲存在專案裡的public資料夾下。
接著，我們建立伺服器。我們首先新增所需的node packages.接著宣告一對變數來儲存Kurento 客戶端reference，一個佇列來儲存在Kurento斷點建立之前接收的ice candidates。
接著將App和Kurento伺服器的URL設定成as_uri和ws_uri。注意，執行的時候，我們儘量少的使用package來為使用命令列設定這些值提供支援。
接著我們對public資料夾建立一個static的host，並定義通過socket.io接收的events的handlers.最終我們建立一個函式來從媒體伺服器得到Kurento客戶端的reference，並將App的聽眾設定在埠3000.
使用你最喜歡的文字編輯器來建立server.js檔案並將其儲存在專案資料夾下。
現在繼續交談過程，在伺服器端，當我們接收客戶端傳送的加入房間的資訊之後，我們呼叫joinRoom函式，它使用getRoom函式來管理房間。
在getRoom函式裡，當第一個客戶到達時，我們建立一個新的房間，和一個新的Kurento MediaPipeline, 這個pipeline與房間和一個空的參與者的列表被分到一起。當另一個客戶到達時，我們不需要建立新的pipeline，因此僅僅將客戶新增到房間中。
回到joinRoom函式，在我們得到房間之後，我們建立一個Kurento WebRTC斷點，它被分配到使用者。接著如果佇列中存在任何ice candidate，它將會被通過呼叫斷點的addIceCandidate函式新增進去，接著我們建立onIceCandidate 事件。
通過傳送兩條資訊，函式結束：一條資訊是對於其它在房間中的使用者通知他們有新的參與者，另一條資訊是對當前使用者通知當前存在的參與者。向server.js新增函式如下。
在客戶端，兩個函式管理伺服器傳送的newParticipantArrived’ 和 ‘existingParticipants事件，它們是receiveVideo和onExistingParticipants函式。
在onNewParticipants函式中我們首先要建立視訊元素來展示流，建立一個使用者為當前參與者。使用者物件將會儲存新建立的視訊元素和一個rtcPeer field.
在將使用者物件存入全域性參與者陣列之後，我們實現Kurento的API物件，並將其分配到rtcPeer filed，並準備一個請求來開始發信過程。通過呼叫receiveVideo函式結束函式。
每個函式都具有它們自己的對於onOffer和onIceCandidate事件的內部函式，事件由rtcPeer物件激發，當準備好的時候，它們負責向伺服器傳送實際請求和ice candidates，傳送receiveVideoFrom和candidate資訊。將如下程式碼新增到client.js.
到目前為止，我們完成了第一步，並且開始發信過程。
在伺服器端，receiveVideoFrom和candidate事件由receiveVideoFrom和addIceCandidate函式處理。第三個叫做getEndpointForUser的函式同樣被用來恢復與每一個使用者相關的Kurento WebRTC斷點。
ReceiveVideoFrom函式非常簡單，當它獲取到合適的斷點，它處理請求，產生一個應答，將其傳送到客戶端並開始收集ice candidates.同樣方式， addIceCandidate函式接收ICE Candidate並將其新增到相應的斷點中。GetEndpointForUser獲取正確的斷點來接收視訊。新增如下程式碼到server.js中。
接著在客戶端我們需要處理伺服器傳送的receiveVideoAnswer和candidates事件，這是通過使用onReceiveVideoAnswer和addIceCandidate函式來完成的。新增它們到client.js檔案中。
使用以上程式碼，我們完成了發信過程，步驟2完成了。
當我們在客戶端使用kurento-utils library時，客戶不需要再做額外的動作。因此步驟3自動完成。
現在是時候執行App了，在命令列，進入專案資料夾並輸入如下命令
node server.js
接著使用Google Chrome或Mozilla Firefox，在三個或更多標籤中開啟http://localhost:3000，輸入不同的參與者姓名和相同的房間號並點選進入。
