基于HTML5的實時交互式虛擬教室關(guān)鍵技術(shù)研究及實現(xiàn)

徐愛春

摘 要： 虛擬教室在遠程開放式教學中已成為有效的教學媒體和日常教育管理的有力工具。然而，目前虛擬教室存在著交互差、實時性不強、點對點溝通困難、功能單一等缺點。為滿足當前虛擬教室需要實時協(xié)同交互式等新需求，在研究原有虛擬教室功能和最新計算機技術(shù)基礎上，提出采用HTML5、Node.js、WebRTC等技術(shù)，實現(xiàn)了一個集視頻對話、即時通訊、白板演示等功能的虛擬教室應用平臺。使用結(jié)果表明，該平臺功能完整，使用方便，可以滿足當前虛擬教室實際需要。

關(guān)鍵詞： 開放式教學； 虛擬教室； 實時交互； 應用平臺

中圖分類號：TP399 文獻標志碼：A 文章編號：1006-8228（2017）09-16-03

Abstract： Virtual classroom has become an effective teaching media and a powerful tool for daily education management in the open e-learning education. However， there are some shortcomings in the virtual classroom， such as poor interaction， low real-time performance， difficulty in point to point communication and less function. In order to meet the needs of the virtual classroom for real-time collaboration and interaction etc.， on the basis of the research of the existing virtual classroom functions and the latest computer technologies， this paper proposes to realize a virtual classroom application platform with functions of real-time video interaction， IM， white-board and so on， by using the technologies of HTML5， Node.js and WebRTC etc. The application result shows that the platform is fully functional and easy to use， and can meet the actual needs of the current virtual classroom.

Key words： open e-learning； virtual classroom； real-time collaboration； application system

0 引言

遠程開放教育課堂，教學方法主要是通過教師遠程講解，與學生實時互動交流[1]，以及解答學生在學習和聽課過程中遇到各類問題，以幫助學生及時掌握和鞏固所學知識，從而提高學生學習的積極性和獲得良好的教學效果。日常使用中發(fā)現(xiàn)，目前大多數(shù)的虛擬教室軟件系統(tǒng)只包含課程文本資料、教學視頻、教師解答等基本功能，功能單一，無法實現(xiàn)教師遠程教學過程師生之間實時互動，達不到預期教學效果。

本文在研究現(xiàn)有虛擬教室技術(shù)的基礎上[2]，采用HTML5、Node.js、WebRTC等技術(shù)[3]，設計并實現(xiàn)了一套集實時視頻通訊、在線答疑系統(tǒng)、白板系統(tǒng)，屏幕共享系統(tǒng)[4]等功能的實時交互式虛擬教室平臺，有效地解決了目前虛擬教室相關(guān)；該平臺已經(jīng)在我校遠程教學中得到使用，教學效果良好，具有一定的推廣和使用價值。

1 系統(tǒng)總體結(jié)構(gòu)

本系統(tǒng)基于HTML5技術(shù)的實時交互虛擬教室（WebIVC），系統(tǒng)總體結(jié)構(gòu)如圖1所示。圖1中，教師和學生可以通過筆記本、臺式機、手機、平板登陸，進行實時交互。

本系統(tǒng)主要包括如下幾個核心模塊。

安全認證模塊 用戶通過系統(tǒng)設置的賬號和密碼登陸，通過系統(tǒng)驗證后，根據(jù)用戶分配的系統(tǒng)權(quán)限，為用戶提供與其權(quán)限相適應的功能，如實時交互課堂、通知通告、視頻培訓等。

教室管理模塊 教室管理是本平臺的一個核心組件，包括教室創(chuàng)建、學生管理、消息管理、白板、音視頻交互、視頻資料管理等[5]。通過本模塊為學生分配相關(guān)權(quán)限，比如哪些學生可以發(fā)消息，哪些學生可以使用白板。同時，通過SOA技術(shù)，將視頻培訓資料共享到教室中，供學生參考學習。

網(wǎng)絡視頻會議模塊 網(wǎng)絡視頻會議模塊實現(xiàn)“面對面”實時交互、在線PPT展示、屏幕共享等功能，采用的通訊協(xié)議包括JSEP（JavaScript Session Establishment Protocol）、SDP（Session Description Protocol）、network address translation （NAT）、STUN/TURN Server等。

展示工具模塊 展示工具組件為學生及教師提供實時通信、白板、表情、在線答疑等功能。

2 系統(tǒng)技術(shù)架構(gòu)

系統(tǒng)總體技術(shù)體架構(gòu)如圖2所示，在圖2中，整個系統(tǒng)分為三層，持久層主要用于保存用戶信息以及相關(guān)接口數(shù)據(jù)，業(yè)務邏輯層使用WebSocket和Ajax技術(shù)響應前端通訊請求和獲取后端數(shù)據(jù)，前端展示層主要系統(tǒng)功能實現(xiàn)，包括白板、實時音視頻交流、視頻接口等。

3 關(guān)鍵功能實現(xiàn)

3.1 學生登錄監(jiān)聽

當后端監(jiān)聽器監(jiān)聽到有學生登錄系統(tǒng)，立即調(diào)用呼叫系統(tǒng)邀請學生加入所指定的虛擬教室。

3.2 本地資源獲取

通過NodeJS，初始化本地多媒體資源，包括攝像頭、音頻設備等。

3.3 遠程屏幕共享實現(xiàn)

虛擬教室的師生可以將各自的屏幕分享給其他人，主要代碼如下。

4 結(jié)束語

本文分析了當前開放教育課堂教學中所使用的虛擬教室系統(tǒng)相關(guān)需求，在研究現(xiàn)有虛擬教室技術(shù)的基礎上，設計并實現(xiàn)了基于HTML5等技術(shù)的實時交互式虛擬教室系統(tǒng)。本系統(tǒng)主要包括實時視頻對話、屏幕共享、白板等功能模塊，基本滿足當前遠程開放式課堂教學所需。系統(tǒng)采用B/S模式，所有功能均可在移動設備和PC端使用，并且屏蔽了各類操作系統(tǒng)之間的差異，實現(xiàn)了跨平臺教學，在實際課堂教學中取得了良好的效果。

本系統(tǒng)還存在諸多不足，如超過10人在線教學，會發(fā)生服務器響應慢的情況，有時卡頓現(xiàn)象嚴重，所需網(wǎng)絡帶寬高；文字通訊頁面功能簡單，頁面不夠美觀；權(quán)限管理設置單一，無法實現(xiàn)細粒度權(quán)限設置。

下一步，筆者將優(yōu)化視頻通訊響應速度，自適應網(wǎng)絡帶寬，并且將用戶界面設計的更加簡潔美觀，在系統(tǒng)操作方面做到更加簡單明了。

參考文獻（References）：

[1] 林鴻，王松，楊鑫，等.基于WebRTC技術(shù)的應用及平臺技術(shù)開

發(fā)與設計[J].電信科學，2013.29（9）：20-25

[2] 屈振華，李慧云，張海濤等.WebRTC 技術(shù)初探[J].電信科學，

2012.28（10）：106-110

[3] 李冬.一種基于WebRTC的視頻會議系統(tǒng)的架構(gòu)[J].智能計

算機與應用，2015.4：39-41

[4] 黃瑞，周曉寧，鄒霞.基于虛擬教室的協(xié)作學習設計研究[J].中

國教育信息化，2014.4：68-71

[5] 李亮.基于Web實時交互的虛擬教室的設計與實現(xiàn)[J].中國

教育信息化，2012.7：42-44endprint