基于WebRTC的學習交流平臺的設計與實現

何雨軒 何洪磊

摘要：基于網絡實時通信（WebRTC）開源技術，設計了音視頻學習交流平臺的結構和工作界面，在傳遞語音和視頻的同時，可以根據需要自由切換窗口和調節音量。分析了學習交流平臺的工作流程，使用Chrome瀏覽器和高位攝像頭，借助Javascript調用WebRTC的Web API接口，建立一個音頻和視頻交流平臺，實現幾個同學之間的學習交流。通過多次使用證明，學習交流平臺達到了預期的良好效果。

關鍵詞：WebRTC；Chrome；視頻交流平臺

中圖分類號：TP393.08文獻標志碼：A文章編號：1008-1739（2018）06-65-3

Design and Implementation of a Learning Communication Platform Based on WebRTC

HE Yuxuan1， HE Honglei2（1. Jiangsu Xinhai Senior High School， Lianyungang Jiangsu 222006， China； 2. Lianyungang Technical College， Lianyungang Jiangsu 222006， China）

0引言

Google的網絡實時通信技術可以實現2臺計算機之間建立直接的音視頻通信，而Chrome瀏覽器支持WebRTC技術，所以可以使用Chrome瀏覽器建立直接的通信，包括音視頻和其他數據[1]。

基于這種技術，發送方使用攝像頭和麥克風捕獲本地的語音和影像視頻，然后對音視頻進行編碼并傳輸到對方，接收方收到音視頻后按照指定的方式播放，即可以建立2個用戶之間的音視頻交流。通過一臺服務器將一個小組內幾臺計算機的地址信息相互傳遞，小組內所有計算機按照這個地址信息兩兩之間建立連接，這樣就可以實現一個學習小組的幾個同學之間的視頻交流了。

1 WebRTC

WebRTC是Google提供的開源技術，目的是讓開發者能夠基于瀏覽器，輕易快捷地開發出豐富的實時多媒體應用。主要技術包括語音和視頻的搜集、編解、網絡傳送及接收等功能，并且還支持在多種平臺上運行[2]。WebRTC提供的Web API是面向瀏覽器的接口，Web開發者使用這些接口，無需關注多媒體的數字信號處理過程，只需編寫簡單的Javascript程序，就可實現瀏覽器之間的音視頻通信，WebRTC體系結構如圖1所示。

WebRTC提供的面向瀏覽器的接口（Web API）有3個。

（1）MediaStream

MediaStream能夠通過設備的攝像頭及話筒獲得音視頻的同步交流，并且可以通過參數設置獲得視頻流的高度、寬度和清晰度[3]。

MediaStream對象又叫做getUserMedia對象，它包含一個或多個單獨的軌道（MediaStream Track）。同屬于一個MediaStream的Track間彼此同步。輸入源可以是物理設備，如麥克風、網絡攝像機及來自用戶硬盤或遠程網絡對等點的文件。MediaStream的輸出可以被發送到一個或多個目的地，用JavaScript進行后期處理，或者發送到遠程節點。

（2）RTCPeerConnection

通過這個接口，可以在2個瀏覽器之間直接建立點對點之間穩定、高效的音視頻流信道[4]。功能包括：①負責整個ICE流程；②負責發送automatic（STUN）keepalives，保持Peers的連接[5]；③管理本地媒體流；④管理遠程流；⑤觸發各種跟媒體流有關的事件；⑥提供offer、answer及連接狀態查詢等。

（3）RTCDataChannel

在RTCPeerConnection的基礎上建立了一個數據通道，使得瀏覽器之間能夠傳輸任意數據[6]。

2學習交流平臺的設計

學習小組的視屏交流界面設計是在瀏覽器的頁面中設置一個長方形的區域，放置參加交流的用戶的視頻，每當有新用戶加入學習小組，會依次將其視屏窗口加入到交流區域，如圖2所示，上部是用戶的名字，名字右邊是最小化和最大化按鈕，中間是用戶的視屏，底部是視頻的聲音大小調節滑塊控件。

學習小組的用戶在視頻學習交流時，為了方便演示交流，配置了一個高位的攝像頭，從上向下拍攝，將桌面上的試題和演算過程拍攝下來，這樣其他用戶就可以很清楚地看到解題過程。

當某個同學發言講解的時候，可以點擊他的視頻窗口的最大化按鈕，將其窗口放大，視頻看得更清楚。例如B同學開始講解，將他的窗口最大化，其他同學的窗口縮小，如圖3所示，當其他同學發言講解的時候，可以點擊其他同學窗口的最大化按鈕來切換。

3交流平臺的實現

Google不但提供了WebRTC技術，還給出了不少實用的demo。這些demo展示了如何搭建語音視屏交流平臺，其中在GitHub.com網站上就有不少。通過分析demo的流程，并結合學習小組的實際需求，設計了學習小組交流平臺的工作流程，如圖4所示。

服務器端提供Web服務和信令服務，在Windows Server 2008上分別使用IIS和Node.Js的WebSocket模塊搭建，Web服務器端編程語言使用asp.net，數據庫使用SqlServer。而客戶端平臺使用Win7系統和Chrome瀏覽器，編程語言使用Javascript調用WebRTC的接口。部分關鍵代碼如下：

var getUserMedia =……//聲明音頻視頻捕獲對象

var PeerConnection=……//聲明音頻視頻傳輸連接對象

socket = new ReconnectingWebSocket （server）；//連接到websocket服務器

function createPeerConnection（）//創建音頻視頻連接對象

function addStreams（）//捕獲本地音頻視頻流，并添加到PeerConnection

PeerConnection.onaddstream = function（evt）{……}//

接收到對方發來的音視頻流，將視屏窗口添加到瀏覽器的交流區域，系統實際運行結果如圖5所示。3個同學進行學習交流，攝像頭高位向下拍攝，可以捕獲書桌上的試題圖像和同學的語音。當某位同學講解題目時，將其窗口最大化，可以看到清楚的畫面，同學之間可以交流學習內容。

4結束語

通過Google的開源技術WebRTC，使用攝像頭和Chrome瀏覽器，并參考GitHub.com網站上的示范，搭建了一個高中同學課后視頻交流學習的平臺，非常的簡單有效，利用有限的課后時間達到了同學們互相學習的目的。在平臺的多次使用過程中，發現存在一些缺陷，例如參加小組學習的同學不能太多，最好3～4個人，如果人數太多，會造成視頻傳輸不流暢的現象。另外，如果使用音箱播放聲音，就會有回音噪聲，所以最好使用耳機，總體來說平臺還是很實用的。

參考文獻

[1] Ristic D.Learning WebRTC[M].北京：電子工業出版社，2016.

[2] Johnston A B.WebRTC權威指南[M].北京：機械工業出版社，2016.

[3]張向輝，黃佳慶，吳康恒，等.基于WebRTC的實時視音頻通信研究綜述[J].計算機科學，2015，42（2）：1-6.

[4]林鴻，王松，楊鑫等.基于WebRTC技術的應用及平臺技術開發與設計[J].電信科學，2013（9）：20-25.

[5]屈振華，李慧云，張海濤，等.WebRTC技術初探[J].電信科學， 2012（10）：106-110.

[6]郭旭.基于MOOC的在線教學實驗平臺的設計與實現[J].計算機工程與設計，2016，37（2）：545-550.