基于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