基于WebRTC的學(xué)習(xí)交流平臺的設(shè)計與實(shí)現(xiàn)

何雨軒 何洪磊

摘要：基于網(wǎng)絡(luò)實(shí)時通信（WebRTC）開源技術(shù)，設(shè)計了音視頻學(xué)習(xí)交流平臺的結(jié)構(gòu)和工作界面，在傳遞語音和視頻的同時，可以根據(jù)需要自由切換窗口和調(diào)節(jié)音量。分析了學(xué)習(xí)交流平臺的工作流程，使用Chrome瀏覽器和高位攝像頭，借助Javascript調(diào)用WebRTC的Web API接口，建立一個音頻和視頻交流平臺，實(shí)現(xiàn)幾個同學(xué)之間的學(xué)習(xí)交流。通過多次使用證明，學(xué)習(xí)交流平臺達(dá)到了預(yù)期的良好效果。

關(guān)鍵詞：WebRTC；Chrome；視頻交流平臺

中圖分類號：TP393.08文獻(xiàn)標(biāo)志碼：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的網(wǎng)絡(luò)實(shí)時通信技術(shù)可以實(shí)現(xiàn)2臺計算機(jī)之間建立直接的音視頻通信，而Chrome瀏覽器支持WebRTC技術(shù)，所以可以使用Chrome瀏覽器建立直接的通信，包括音視頻和其他數(shù)據(jù)[1]。

基于這種技術(shù)，發(fā)送方使用攝像頭和麥克風(fēng)捕獲本地的語音和影像視頻，然后對音視頻進(jìn)行編碼并傳輸?shù)綄Ψ?，接收方收到音視頻后按照指定的方式播放，即可以建立2個用戶之間的音視頻交流。通過一臺服務(wù)器將一個小組內(nèi)幾臺計算機(jī)的地址信息相互傳遞，小組內(nèi)所有計算機(jī)按照這個地址信息兩兩之間建立連接，這樣就可以實(shí)現(xiàn)一個學(xué)習(xí)小組的幾個同學(xué)之間的視頻交流了。

1 WebRTC

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

WebRTC提供的面向?yàn)g覽器的接口（Web API）有3個。

（1）MediaStream

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

MediaStream對象又叫做getUserMedia對象，它包含一個或多個單獨(dú)的軌道（MediaStream Track）。同屬于一個MediaStream的Track間彼此同步。輸入源可以是物理設(shè)備，如麥克風(fēng)、網(wǎng)絡(luò)攝像機(jī)及來自用戶硬盤或遠(yuǎn)程網(wǎng)絡(luò)對等點(diǎn)的文件。MediaStream的輸出可以被發(fā)送到一個或多個目的地，用JavaScript進(jìn)行后期處理，或者發(fā)送到遠(yuǎn)程節(jié)點(diǎn)。

（2）RTCPeerConnection

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

（3）RTCDataChannel

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

2學(xué)習(xí)交流平臺的設(shè)計

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

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

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

3交流平臺的實(shí)現(xiàn)

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

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

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

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

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

function createPeerConnection（）//創(chuàng)建音頻視頻連接對象

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

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

接收到對方發(fā)來的音視頻流，將視屏窗口添加到瀏覽器的交流區(qū)域，系統(tǒng)實(shí)際運(yùn)行結(jié)果如圖5所示。3個同學(xué)進(jìn)行學(xué)習(xí)交流，攝像頭高位向下拍攝，可以捕獲書桌上的試題圖像和同學(xué)的語音。當(dāng)某位同學(xué)講解題目時，將其窗口最大化，可以看到清楚的畫面，同學(xué)之間可以交流學(xué)習(xí)內(nèi)容。

4結(jié)束語

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

參考文獻(xiàn)

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

[2] Johnston A B.WebRTC權(quán)威指南[M].北京：機(jī)械工業(yè)出版社，2016.

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

[4]林鴻，王松，楊鑫等.基于WebRTC技術(shù)的應(yīng)用及平臺技術(shù)開發(fā)與設(shè)計[J].電信科學(xué)，2013（9）：20-25.

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

[6]郭旭.基于MOOC的在線教學(xué)實(shí)驗(yàn)平臺的設(shè)計與實(shí)現(xiàn)[J].計算機(jī)工程與設(shè)計，2016，37（2）：545-550.