李香菊 謝修娟 鄭英

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

關(guān)鍵詞： WebRTC； 實(shí)時(shí)視頻教學(xué)； WebSocket； HTML5； Node.js

中圖分類號(hào)： TN915?34； TP319 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 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

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

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

1 關(guān)鍵技術(shù)介紹

1.1 WebRTC技術(shù)

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

音頻編解碼功能是將從聲卡采集到的聲音數(shù)據(jù)進(jìn)行處理，然后編碼，經(jīng)過網(wǎng)絡(luò)傳輸?shù)浇邮斩?，接收端將收到的?shù)據(jù)進(jìn)行解碼，就可以聽到要傳遞的音頻信息。該框架集成了iSAC，iLBC，Opus等編碼器[2]。

視頻編解碼功能將從攝像頭采集到的數(shù)據(jù)進(jìn)行處理，然后編碼，再經(jīng)網(wǎng)絡(luò)傳輸?shù)浇邮斩?，接收端解碼后將信息顯示在屏幕上。該框架主要采用VP8編碼，用較少的數(shù)據(jù)通信實(shí)現(xiàn)較高質(zhì)量的視頻[3]。

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

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

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

1.2 HTML5技術(shù)

HTML5是新一代的Web語言標(biāo)準(zhǔn)，增加了很多新特性，幫助開發(fā)人員設(shè)計(jì)功能強(qiáng)大的Web前端。WebRTC技術(shù)也是HTML5的標(biāo)準(zhǔn)之一，其實(shí)現(xiàn)主要用到了HTML5的WebSocket技術(shù)、

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

1.3 Node.js技術(shù)

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

2 實(shí)時(shí)視頻教學(xué)系統(tǒng)功能設(shè)計(jì)

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

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

3 實(shí)時(shí)視頻交互的實(shí)現(xiàn)

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

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

在視頻交互討論模塊，學(xué)生和教師客戶端之間通過WebSocket通道進(jìn)行通信，傳遞音、視頻信息，實(shí)現(xiàn)實(shí)時(shí)交互功能，主要包括以下幾個(gè)步驟：

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

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

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

rtc.createStream（{

"video"： true，

"audio"： true }）；

}）；

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

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

發(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+""）；

}）；

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

4 結(jié) 語

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

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

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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

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