本篇博文將會提供一個關(guān)于如何使用WebRTC建立一個視頻會議App的教程。
我們不會將其設(shè)計的太復(fù)雜，它將會是一個簡單的一對一視頻會議App，并且僅僅使用了WebRTC APIs和一些其他的library來建立一個信令服務(wù)器。
在開始之前，讓我們首先進行一個快速摘要簡述。
為此我們應(yīng)該觀察如下WebRTC通信過程的圖。
WebRTC的通信過程可以看成如下三步：
1.瀏覽器獲取媒體設(shè)備（攝像頭和麥克風）。
2.通過信令過程，每一個peer和其它所有peer交換信息。
3.發(fā)信之后，peers可以直接連接，并開始通信交流。
為了實現(xiàn)這個過程，對于交換信息需要一個信令服務(wù)器。同樣需要一對STUN/TURN服務(wù)器來實現(xiàn)NAT穿透。并且在不能直接通信的情況下傳遞媒體。
讓我們轉(zhuǎn)到App設(shè)計的部分。
App
就如之前所說，我們將會建立一個簡單的一對一視頻會議App.它將會有一個房間功能，在每個房間將會主持不同的會議。
用戶首先看到一個需要輸入房間號的屏幕界面，可以是用戶想去的任意一個房間，接著當另一個用戶想要加入的時候，他可以輸入同樣的房間號來開始交流通話。
此教程的代碼在Github的一個公共目錄下可以查到，你可以克隆到你的電腦上或跟著文章在紙上描繪出來。
我們使用了JAVAScript作為編程語言，Node.JS作為運行引擎，所以如果你沒有的話可以安裝它。
讓我們從創(chuàng)建一個文件夾開始，這將會是我們的項目文件夾。接著在里面創(chuàng)建另一個名字叫做public的文件夾。現(xiàn)在使用命令行，轉(zhuǎn)到項目文件夾并將如下命令粘貼到命令行里來安裝所需。為了下載library需要確保網(wǎng)絡(luò)連接正常。
npm init -y
npm install -S [email protected] [email protected]
現(xiàn)在讓我們創(chuàng)建一個簡單的html文件。它將會包含兩個div元素，一個為了輸入房間號，另一個為了顯示視頻流。這個文件也會包含socket.io客戶端library腳本標簽，另一個文件我們之后會創(chuàng)建。
使用你最喜愛的文本編輯器，創(chuàng)建一個新文件，粘貼如下代碼并且保存在項目文件夾中，在public文件夾里保存為index.html文件。
很棒。下一步是創(chuàng)建一個客戶端的JavaScript文件。在這個文件中將會得到網(wǎng)頁元素就像div元素的引用，用戶用來輸入房間號的輸入文本，用戶點擊的按鈕，等等。接著我們聲明一些全局變量來存儲像房間號，本地和遠程視頻音頻流，和點點連接對象和使用的TURN/STUN服務(wù)器。
我們還會連接到socket.io服務(wù)器并添加一個點擊按鈕的事件，在這個事件中，我們向服務(wù)器發(fā)送一條創(chuàng)建或加入的信息。粘貼如下代碼到新文件中并且在public文件夾下保存為client.js文件。
在向服務(wù)器發(fā)送了初始信息之后，我們需要等待響應(yīng)，我們可以在同一個client.js文件中建立一些event handlers.
當?shù)谝粋€參與者加入了會話，服務(wù)器創(chuàng)建一個新房間接著發(fā)送給用戶‘’加入‘’事件。接著對第二個參與者同樣如此：瀏覽器獲取媒體設(shè)備，存儲視頻音頻流，在屏幕上展示視頻，但是發(fā)生了另一個動作，一條‘’準備好了‘’的信息發(fā)送到了服務(wù)器端。添加如下代碼到client.js文件底部。
到目前為止第一步完成。
當?shù)谝粋€參與者接收到準備好了的信息時，它的反饋創(chuàng)建了一個RTCPeerConnection對象，設(shè)置對象的onicecandidate和onaddstream listeners為相應(yīng)的onIceCandidate和onAddStream函數(shù)，我們之后將會重溫這些函數(shù)。最終它將本地流添加到了peer connection對象中。之后它準備一個請求，請求存儲在本地并通過setLocalAndOffer函數(shù)發(fā)送到服務(wù)器端。
服務(wù)器傳遞請求到第二個參與者，第二個參與者反過來在請求反饋方面做了同樣的事：創(chuàng)建了它自己的peer connection對象并且設(shè)置事件聽眾，接著存儲請求準備一個將會存儲在本地的應(yīng)答，接著通過setLocalAndAnswer函數(shù)發(fā)送到服務(wù)器端。
和請求相似，服務(wù)器會將回答傳遞給第一個參與者。當發(fā)生這些時，兩個peers就在通過向服務(wù)器發(fā)送candidate信息交換icecandidates，服務(wù)器反過來傳遞它們給其它客戶端。Ice candidates被添加到每一個客戶端的peer connection 對象中。將如下代碼添加到client.js文件中。
第二步就此完成。
當一切準備就緒后，每一個peer接收遠程流，接著onAddStream函數(shù)將會將它顯示在屏幕上。以下是client.js文件中的函數(shù)。
現(xiàn)在我們完成了第三步。
然而我們的服務(wù)器還沒有完成。我們從詢問所需的library開始，并且在public文件夾中設(shè)置static host來服務(wù)客戶端文件。
接著我們使用socket.io定義信號處理 程序。首先我們會得到創(chuàng)建或加入事件，它們會統(tǒng)計房間中客戶端的數(shù)量。如果沒有用戶說明客戶端是第一個peer，因此向它發(fā)送一個創(chuàng)建事件。如果房間中已經(jīng)存在了一個參與者，那么客戶端會被添加到房間中，并且向它發(fā)送加入事件。如果房間中已經(jīng)有兩個用戶，那么這被認為是房間滿了的情況，因此不需要再添加客戶端。
這一連串的事件都是按照傳遞順序工作的，向房間中其它客戶端發(fā)送接收到的同樣的信息。創(chuàng)建一個新文件，粘貼如下代碼并保存它到項目文件夾下，名為server.js.
既然我們已經(jīng)具備了所有所需的文件，我們已經(jīng)準備好測試我們的應(yīng)用了。在命令行，進入項目文件夾中并且輸入如下命令：
node server.js
接著使用 google Chrome or Mozilla Firefox,將此鏈接在兩個標簽下打開，確保你都輸入了同樣的房間號。
是不是很酷？
我們已經(jīng)創(chuàng)建了我們的第一個視頻會議App.
