基于HTML5的實時交互式虛擬教室關鍵技術研究及實現

徐愛春

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

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

中圖分類號：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]，以及解答學生在學習和聽課過程中遇到各類問題，以幫助學生及時掌握和鞏固所學知識，從而提高學生學習的積極性和獲得良好的教學效果。日常使用中發現，目前大多數的虛擬教室軟件系統只包含課程文本資料、教學視頻、教師解答等基本功能，功能單一，無法實現教師遠程教學過程師生之間實時互動，達不到預期教學效果。

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

1 系統總體結構

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

本系統主要包括如下幾個核心模塊。

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

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

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

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

2 系統技術架構

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

3 關鍵功能實現

3.1 學生登錄監聽

當后端監聽器監聽到有學生登錄系統，立即調用呼叫系統邀請學生加入所指定的虛擬教室。

3.2 本地資源獲取

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

3.3 遠程屏幕共享實現

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

4 結束語

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

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

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

參考文獻（References）：

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

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

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

2012.28（10）：106-110

[3] 李冬.一種基于WebRTC的視頻會議系統的架構[J].智能計

算機與應用，2015.4：39-41

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

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

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

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