基于WebRTC技術(shù)的實(shí)時(shí)在線教學(xué)系統(tǒng)

張智，熊禹

（武漢科技大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院，武漢 430068）

0 引言

傳統(tǒng)的音視頻即時(shí)通訊類軟件如QQ、微信以及Skype等，雖憑借助大廠的技術(shù)實(shí)力可以為我們保證視頻通訊的質(zhì)量和效率，但這些大多不是基于網(wǎng)頁的，而且需要有特定的客戶端軟件支持。在WebRTC技術(shù)出現(xiàn)以前，要在瀏覽器上實(shí)現(xiàn)點(diǎn)對點(diǎn)視頻通訊是很耗時(shí)耗力的復(fù)雜的工程，其中不僅涉及到復(fù)雜的視頻編解碼問題，同時(shí)還有通信協(xié)議、回聲消除、去噪等復(fù)雜性很高的專業(yè)性難題，更重要的是不同瀏覽器對協(xié)議支持的不統(tǒng)一，要實(shí)現(xiàn)跨瀏覽器之間的視頻通訊難上加難。

WebRTC作為Google的一個(gè)開源實(shí)時(shí)通信項(xiàng)目，已經(jīng)成為下一代視頻通話的標(biāo)準(zhǔn)，在行業(yè)內(nèi)得到了廣泛的支持和應(yīng)用。WebRTC使用統(tǒng)一簡單的接口處理那些復(fù)雜的通信過程，底層的細(xì)節(jié)如編解碼、視頻質(zhì)量、去噪、回聲消除等就可以直接交由瀏覽器廠商和Google統(tǒng)一解決，而開發(fā)者在瀏覽器上實(shí)現(xiàn)點(diǎn)對點(diǎn)視頻通訊的功能將和調(diào)用庫函數(shù)一樣簡單，這樣開發(fā)者將更專注于系統(tǒng)的業(yè)務(wù)邏輯。

1 WebRTC主要運(yùn)行機(jī)制

1.1 從攝像頭獲取視頻流

WebRTC調(diào)用攝像頭過程如圖1所示。

圖1 WebRTC調(diào)用攝像頭過程

調(diào) 用 的核心 方 法：navigator.getUserMedia（con?straints,successCallback,errorCallback）;其中 constraints參數(shù)允許用戶規(guī)定獲取哪種媒體資源，其參數(shù)配置如var constraints={audio:true,video:true};

如果getUserMedia（）方法調(diào)用成功，那么從攝像頭獲取的視頻流將作為video元素的源，調(diào)用成功會(huì)觸發(fā)相應(yīng)的回調(diào)函數(shù)：function successCallback（stream）{…}

1.2 從RTCPeerConnection下獲取視頻流

RTCPeerConnection接口代表一個(gè)由本地計(jì)算機(jī)到遠(yuǎn)端的WebRTC連接。該接口提供了創(chuàng)建，保持，監(jiān)控，關(guān)閉連接的方法，是一個(gè)用于請求WebRTC的多媒體視頻、音頻通訊以及數(shù)據(jù)交換的API，它在不同的瀏覽器中有不同的實(shí)現(xiàn)方式。

一個(gè)基本的RTCPeerConnection使用需要協(xié)調(diào)本地機(jī)器以及遠(yuǎn)端機(jī)器的連接，它可以通過在兩臺機(jī)器間生成Session Description的數(shù)據(jù)交換協(xié)議來實(shí)現(xiàn)。呼叫方發(fā)送一個(gè)offer（請求），被呼叫方發(fā)出一個(gè)answer（應(yīng)答）來回答請求。雙方-呼叫方以及被呼叫方，最開始的時(shí)候都要建立它們各自的RTCPeerConnection對象。

1.3 使用RTCDataChannel來交換數(shù)據(jù)

RTCDataChannel接口代表在兩者之間建立了一個(gè)雙向數(shù)據(jù)通道的連接。RTCDataChannel API支持靈活的數(shù)據(jù)類型，并且支持JavaScript中的二進(jìn)制類型如Blob、ArrayBuffer和ArrayBufferView，另外還支持字符串。這些類型對于文件傳輸和多玩家的游戲來說意義重大。

RTCDataChannel在不可靠模式（類似于UDP）或可靠模式（類似于TCP）下都能夠正常工作，在不會(huì)丟包的情況下，這兩種模式的效率差不多。然而，在可靠模式下，丟包將造成后續(xù)的所有包阻塞，丟失的數(shù)據(jù)包也將重傳直至其成功到達(dá)。當(dāng)然，可以在同一個(gè)應(yīng)用中使用多個(gè)數(shù)據(jù)通道，每一個(gè)有自己的可靠性。

1.4 其他機(jī)制

盡管WebRTC允許點(diǎn)對點(diǎn)的通信，但它依然需要服務(wù)器：

●信令傳輸：建立點(diǎn)對點(diǎn)的連接需要傳輸一些媒體和網(wǎng)絡(luò)相關(guān)的元數(shù)據(jù)信息，需要通過服務(wù)器。

●NAT和防火墻穿透：可以使用STUN服務(wù)以及TURN服務(wù)器。

2 實(shí)時(shí)在線教學(xué)系統(tǒng)的設(shè)計(jì)

2.1 系統(tǒng)功能模塊設(shè)計(jì)

本系統(tǒng)主要分為實(shí)時(shí)視頻教學(xué)，教學(xué)桌面共享，教學(xué)資源管理，教學(xué)統(tǒng)計(jì)與分析以及系統(tǒng)后臺管理等5大功能模塊。具體的功能如下：

（1）實(shí)時(shí)視頻教學(xué)

能創(chuàng)建視頻教學(xué)房間、加入/退出視頻教學(xué)房間、視頻教學(xué)評價(jià)與留言等。

（2）桌面教學(xué)共享

能創(chuàng)建共享桌面教學(xué)房間、加入/退出共享桌面教學(xué)房間、共享桌面教學(xué)房間評價(jià)與留言等。

（3）教學(xué)資源管理

主要是教學(xué)資源資料在線分享，如文檔上傳、文檔分類、文檔點(diǎn)贊、評價(jià)等功能。

（4）統(tǒng)計(jì)與分析

主要有教學(xué)資源統(tǒng)計(jì)分析，教師評價(jià)統(tǒng)計(jì)分析，在線教學(xué)課堂統(tǒng)計(jì)分析等，包括如文檔查看量、文檔下載量、文檔點(diǎn)贊量、文檔收藏量、教師受訪量、教師評星打分、在線視頻課堂評分、最佳排名等功能。

（5）后臺管理

主要有學(xué)生管理、教師管理，班級管理，文檔資源類別管理，文檔操作記錄管理等，包括如文檔收藏記錄、文檔查看記錄、文檔評星記錄、文檔下載記錄、文檔點(diǎn)贊記錄、課堂留言管理等功能。

2.2 數(shù)據(jù)表設(shè)計(jì)

系統(tǒng)數(shù)據(jù)表清單如表1所示，以WebRTCAudio VideoClassRoomItem表作為示例，其結(jié)構(gòu)如表2.2所示。

表1 數(shù)據(jù)表清單

表2 WebRTCAudioVideoClassRoomItem表

3 實(shí)時(shí)在線教學(xué)系統(tǒng)的實(shí)現(xiàn)

本系統(tǒng)是一個(gè)Java Web項(xiàng)目，嵌入了單獨(dú)的We?bRTC服務(wù)程序。因此需要部署兩套應(yīng)用，首先打包Web項(xiàng)目發(fā)布到Web服務(wù)器的Tomcat中，同時(shí)還需要將WebRTC服務(wù)搭建起來。WebRTC服務(wù)器端使用Node.js搭建，并直接以鏈接的形式連接到Web項(xiàng)目中，由于WebRTC視頻通訊系統(tǒng)還需要處理復(fù)雜的外網(wǎng)環(huán)境，此時(shí)需要自行搭建WebRTC的信令服務(wù)器，信令服務(wù)器也是使用Node.js搭建。

系統(tǒng)實(shí)現(xiàn)的如實(shí)時(shí)視頻教學(xué)，教學(xué)桌面共享，教學(xué)統(tǒng)計(jì)與分析等模塊分別如圖1-4所示。

圖1 實(shí)時(shí)視頻教學(xué)

圖2 視頻教學(xué)PC端

圖3 教學(xué)桌面共享

圖4 教學(xué)統(tǒng)計(jì)與分析

4 結(jié)語

本文利用WebRTC技術(shù)，設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)實(shí)時(shí)在線教學(xué)系統(tǒng)，主要實(shí)現(xiàn)了實(shí)時(shí)視頻教學(xué)，教學(xué)桌面共享，教學(xué)資源管理，教學(xué)統(tǒng)計(jì)與分析以及系統(tǒng)后臺管理等功能。實(shí)踐證明WebRTC技術(shù)可以成為在線教學(xué)的一種有效的即時(shí)通訊手段，可以讓在線教學(xué)系統(tǒng)的服務(wù)更上一個(gè)臺階，更好地服務(wù)于我們的學(xué)生，讓廣大學(xué)生通過瀏覽器能便捷地接觸到更優(yōu)質(zhì)的在線教學(xué)資源。

[1]Salvatore Loreto,Simon Pietro Romano.Real-Time Communication with WebRTC[M].O'Reilly Media.May 2014.

[2]Dan Ristic.Learning WebRTC[M].Packt Publishing Limited.June 2015.

[3]姚力，劉強(qiáng).VoIP中一種基于WebRTC的回聲消除改進(jìn)算法[J].計(jì)算機(jī)科學(xué)，2017（S1）：309-311,318.

[4]岑霄，葛志輝等.基于QoE的移動(dòng)WebRTC傳輸優(yōu)化策略[J].小型微型計(jì)算機(jī)系統(tǒng)，2017（7）：1464-1469.

[5]李香菊，謝修娟等.基于WebRTC的實(shí)時(shí)視頻教學(xué)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代電子技術(shù)，2016（6）：114-116,119.