基于WebRTC的實時視頻教學系統(tǒng)的設計與實現

李香菊 謝修娟 鄭英

摘 要： 基于目前網絡教學缺乏良好互動模式的情況，提出建立實時視頻教學系統(tǒng)，為師生搭建面對面的溝通平臺。對目前實現實時視頻的WebRTC，HTML5，WebSocket和Node.js等關鍵技術進行了深入研究，構建基于WebRTC技術的B/S模式的實時視頻教學系統(tǒng)，實時視頻交互模塊的通信選擇全雙工通信的WebSocket協(xié)議。系統(tǒng)可運行在任何支持HTML5的瀏覽器上，實現跨平臺視頻交互教學，充分提高學生的學習積極性。

關鍵詞： WebRTC； 實時視頻教學； WebSocket； HTML5； Node.js

中圖分類號： TN915?34； TP319 文獻標識碼： A 文章編號： 1004?373X（2016）06?0114?03

Design and implementation of real?time video teaching system based on WebRTC

LI Xiangju， XIE Xiujuan， ZHENG Ying

（Department of Computer Engineering， Southeast University Chengxian College， Nanjing 210088， China）

Abstract： Since the network teaching lacks of good interactive mode， the establishment of real?time video teaching system is proposed to build the face to face communication platform for teachers and students. The key technologies of WebRTC， HTML5， WebSocket and Node.js to realize the real?time video are deeply studied. The real?time video teaching system based on B/S mode of WebRTC technology was constructed. The WebSocket protocol of full?duplex communication is selected for communication of the real?time video interactive module. The system can run on any browsers supporting HTML5， realize the video interactive teaching with cross?platform capacity， and improve the students learning initiative greatly.

Keywords： WebRTC； real?time video teaching； WebSocket； HTML5； Node.js

近年來，隨著計算機和網絡技術的發(fā)展，網絡教育逐漸推廣，其目的是通過網絡，解決教學資源共享問題，實現跨空間和時間的教學，促進教育的發(fā)展。但是目前大多數的網絡教育平臺，只是將課程的課件、教學視頻、作業(yè)等資料發(fā)布到網站上，相比課堂上面對面教學，缺少師生之間的實時互動，不能充分調動學生的積極性和主動性，學習效率大打折扣。在教學過程中，展開高效的師生互動，通過語言和表情交流是最好的一種方式，使學生在討論交流中互相學習，有助于培養(yǎng)學生的創(chuàng)新精神和協(xié)作意識。目前，典型的教學系統(tǒng)Blackboard平臺，具有多種交互功能，如虛擬實驗室，實時聊天等，但是必須要通過安裝第三方的插件才能實現，用戶使用不方便。

本文提出了實時視頻教學系統(tǒng)的設計與實現，系統(tǒng)包括課程管理、作業(yè)上傳與批改、視頻交互討論、班級管理、用戶管理等基本功能，其中視頻交互討論模塊采用WebRTC技術，實現在網頁中通過視頻進行多人實時交互的功能，可以充分調動學生的學習積極性。

1 關鍵技術介紹

1.1 WebRTC技術

Google公司收購Global IP Solution公司后，于2011年6月對WebRTC[1]項目進行了開源。WebRTC具有開放的標準，開發(fā)簡單、易擴充，獲得了全球各大廠商的廣泛支持，通過與其他技術結合，廣泛應用于視頻會議、人臉識別等領域。WebRTC技術將音、視頻的采集處理功能和網絡傳輸功能集成在Web瀏覽器中，關鍵技術包括音頻編解碼框架，視頻編解碼框架和網絡傳輸框架三部分。

音頻編解碼功能是將從聲卡采集到的聲音數據進行處理，然后編碼，經過網絡傳輸到接收端，接收端將收到的數據進行解碼，就可以聽到要傳遞的音頻信息。該框架集成了iSAC，iLBC，Opus等編碼器[2]。

視頻編解碼功能將從攝像頭采集到的數據進行處理，然后編碼，再經網絡傳輸到接收端，接收端解碼后將信息顯示在屏幕上。該框架主要采用VP8編碼，用較少的數據通信實現較高質量的視頻[3]。

網絡傳輸負責發(fā)送已編碼的音視頻數據，還負責接收編碼打包的數據，并將數據傳遞到上層應用。網絡傳輸框架集成了RTP/SPRT協(xié)議棧、STUN/TURN/ICE等協(xié)議。RTP/SPRT是傳輸協(xié)議，STUN/TURN/ICE用來解決NAT穿透，WebRTC的私網穿透主要采用ICE技術來實現[4]。

WebRTC技術實現了MediaStream（getUserMedia），RTCPeerConnection和RTCDataChannel三個API。其中MsdiaStream可以通過瀏覽器從硬件設備獲取音頻和視頻數據；RTCPeerConnection實現了通信雙方信息流傳輸的組件；RTCDataChannel在通信雙方建立傳輸信道。網頁開發(fā)人員通過JavaScript API調用封裝在WebRTC API內的功能，通過瀏覽器實現實時媒體通信，不需要下載安裝額外的插件，也不用關心瀏覽器的內部結構和考慮底層系統(tǒng)的不同。

WebRTC技術中的RTCPeerConnection并不具備協(xié)調通信和發(fā)送控制消息的功能，需要選擇其他的雙向通信協(xié)議，如常用的SIP和XMPP。該系統(tǒng)的通信協(xié)議選擇的是WebSocket。

1.2 HTML5技術

HTML5是新一代的Web語言標準，增加了很多新特性，幫助開發(fā)人員設計功能強大的Web前端。WebRTC技術也是HTML5的標準之一，其實現主要用到了HTML5的WebSocket技術、

WebSocket技術是實現WebRTC時使用最為廣泛的信令機制，通過在通信兩端建立基于TCP連接的雙向通道，實現在支持HTML5的瀏覽器客戶端與服務端之間雙全工通信的網絡技術。在WebSocket通信實現過程中，當客戶端向服務器發(fā)出建立連接請求后，服務器端應答建立連接，這時通信協(xié)議由HTTP協(xié)議升級成為WebSocket協(xié)議，兩端就可以直接交換數據，該雙向通道會持續(xù)保持連接，服務器端的最新數據能夠實時推送給客戶端， 實現實時通信[6]。相比較輪詢（Polling）和Comet兩種實時網頁技術，WebSocket一方面可以降低延遲性，另一方面，WebSocket通信時，雙方交換的標頭信息小，可以節(jié)省帶寬[7]。

1.3 Node.js技術

Node.js封裝了Google V8引擎，是高效快速地運行JavaScript的服務器端平臺，并且可以實現WebSocket通信。在WebSocket通信中，客戶端的WebSocket是面向事件類型開發(fā)的，Node.js采用“事件循環(huán)”的架構，建立Socket的Server來實現WebSocket協(xié)議。Node.js有多種實現WebSocket的方法，本文介紹的實時視頻教學系統(tǒng)選擇Socket.IO，該模塊具有跨平臺特性，可以屏蔽系統(tǒng)底層的數據傳輸機制。

2 實時視頻教學系統(tǒng)功能設計

該實時視頻教學系統(tǒng)是高校課堂教學的輔助系統(tǒng)，主要目的是在課堂教學之后，更好地開展課下學習，主要用戶是學生和教師，系統(tǒng)維護工作由管理員完成。在高校教學中，學生以班級為單位，管理員維護班級信息、學生和教師等用戶信息，教師維護所教授課程的基本信息，包括教學大綱、教學日歷、教學課件、教學視頻等，為了方便課下教學，系統(tǒng)提供了作業(yè)上傳與批改、問題答疑、視頻交互討論等交互功能，并重點實現了視頻交互討論模塊。如圖1所示。

視頻交互討論模塊為教師和學生建立一個實時視頻交互平臺，幫助師生進行面對面交流，提高學習效率。教師在維護課程信息時，可以為所教授班級學生建立討論時間，如每周三第5，6節(jié)課，并同步到教學班級的學生和自己的課題討論模塊中，到了討論時間，學生和教師就可以進入視頻討論。

3 實時視頻交互的實現

實時視頻交互模塊為學生和教師搭建一個網絡教室，雙方如同在教室上課一樣，可以提問、討論和交流，輔助學生進行高效學習。以往一些具備交互功能的教學平臺，往往采用C/S模式或者B/S模式下安裝插件的方式實現，如最常用插件是Adobe的Flash插件，給開發(fā)者和使用者帶來不便。本文設計的實時視頻交互模塊采用WebRTC技術，不需要在網頁上安裝插件，通過HTML5提供的

實時視頻教學系統(tǒng)采用B/S結構，教師和學生都是客戶端用戶，使用支持WebRTC技術標準的瀏覽器，通過WebSocket實現實時全雙工通信技術，比之前采用的異步通信效率更高。本系統(tǒng)使用Node.js作為服務端與客戶端建立WebSocket連接，Node.js能實現WebSocket一般應用的開源系統(tǒng)，為開發(fā)人員提供技術接口，簡化編程工作量，該系統(tǒng)選擇其中的Socket.IO模塊[8]。進行WebSocket連接時，首先由服務器端建立服務Manger類，管理服務器與客戶端之間的通信連接，然后實現listening接口，監(jiān)聽客戶端發(fā)出的請求，服務端接收請求后，通過request接口，向客戶端返回消息，就可以在兩端建立WebSocket雙向通道了，雙方都可以主動向對方推送消息。

在視頻交互討論模塊，學生和教師客戶端之間通過WebSocket通道進行通信，傳遞音、視頻信息，實現實時交互功能，主要包括以下幾個步驟：

（1）通過MediaStream（getUserMedia）獲取本地的音、視頻資源，如麥克風、攝像頭等，并綁定到HTML5的標簽上[9]。

var videos = document.getElementById（"videos"）；

rtc.on（"connected"， function（socket） {

rtc.createStream（{

"video"： true，

"audio"： true }）；

}）；

（2） 選擇WebSocket通信協(xié)議，通過RTCPeerConnection建立連接。教師和學生使用WebRTC客戶端與WebSocket服務器建立連接，通過服務器將IP地址和端口等網絡信息、本地音、視頻編解碼協(xié)議和分辨率信息發(fā)送給其他客戶端，建立客戶端間的端對端連接。建立連接后，通信雙方可以通過WebSocket通道傳輸數據和關閉會話。WebRTC采用SIP作為信令協(xié)議，客戶端之間實現基于SRTP協(xié)議的媒體傳輸方式，網絡穿透采用ICE協(xié)議。

（3） 通過RTCDataChannel傳輸音頻數據和視頻數據。將本地獲取的音、視頻信息傳送給其他客戶端，接收到的音、視頻數據通過標簽顯示在屏幕上。當通信雙方有一方結束通信時，建立的WebSocket連接斷開，頁面標簽也同時去掉。

發(fā)送音、視頻信息到其他所有客戶端的代碼：

$（"#sendbtn"）.click（function（）{

var msg = $（"#msg"）.val（）；

if （msg！=""）{

rtc.broadcast（"${sessionScope.user.name}："+msg）；

$（"#msg"）.val（""）；

$（"#msglist ul"）.append（"

我："+msg+""）；

}

}）；

處理接收到的音、視頻信息的代碼：

rtc.on（′data_channel_message′， function（channel， socketId， message）{

$（"#msglist ul"）.append（"

"+message+""）；

}）；

到了課題討論時間，教師以及學生就可以進行視頻討論，相互可以看到對方傳送來的音、視頻信息，如圖2所示。學生或者教師可以共享自己的桌面，其他人點擊一下共享者的窗口進入全屏模式能夠更清楚看到他的桌面信息，這樣可以利用文字、圖形等將討論的內容生動形象的展示，如圖3所示。

4 結 語

實時視頻教學系統(tǒng)基于WebRTC技術，使用Java

Script API 和HTML5 腳本語言在Web 瀏覽器中實現高質量的實時通信。該系統(tǒng)不僅僅實現了普通的教輔功能，如課程信息維護，作業(yè)上傳與批改等，重點實現了實時視頻討論模塊，有助于調動學生的學習積極性，培養(yǎng)學生的溝通能力和團隊協(xié)作能力。系統(tǒng)采用B/S模式，所有功能均可在移動設備和PC端的瀏覽器使用，屏蔽了各類操作系統(tǒng)之間的差異，實現了跨平臺教學。但是，因為WebRTC技術在進行音、視頻通信時，對硬件要求較高，占用內存較大，依賴帶寬，限制了討論人數不能過多。

參考文獻

[1] JENNINGS C， HARDIE T， WESTERLUND M. Real?time communications for the web [J]. IEEE communications magazine， 2013， 51（4）： 20?26.

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

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

[4] 胡敏，劉六程，劉鵬.基于WebRTC的視頻會議系統(tǒng)的設計與實現[J].電視技術，2013，37（1）：141?143.

[5] GOLDSTEIN Alexis， LAZARIS Louis， WEYL Estelle. HTML5與CSS3實戰(zhàn)指南[M].宋松，譯.北京：人民郵電出版社，2011.

[6] 張志明，柯衛(wèi).基于HTML5的視頻通信云服務應用技術研究[J].電信科學，2012，28（10）：31?37.

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

[8] VOID B Y. Node.js開發(fā)指南[M].北京：人民郵電出版社，2012.

[9] HOLDENER III A T， PAGELLA M A.深入HTML5應用開發(fā)[M].秦緒文，李松峰，譯.北京：人民郵電出版社，2012.

[10] Anon. WebRTC [EB/OL]. [ 2014?04?27]. http：//www.webrtc.org.