如何使用 WebRTC 與 Kurento 創建視頻會議 App

本文做者 WebRTC Ventures 工程師。在 RTC 2018 實時互聯網大會上，WebRTC Ventures 的資深軟件工程師，將圍繞 WebRTC 開發帶來經驗分享。歡迎訪問 RTC 開發者社區，與更多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，輸入不一樣的參與者姓名和相同的房間號並點擊進入。