《一种基于HTML5技术的在线教育系统.doc》由会员分享，可在线阅读，更多相关《一种基于HTML5技术的在线教育系统.doc（9页珍藏版）》请在三一办公上搜索。
1、一种基于 HTML5 技术的在线教育系统张一凡，刘绍华（北京邮电大学电子工程学院，北京 100876）510152025303540摘要：随着科学技术生产力的发展和人们对工作生活需求的提高，互联网和多媒体技术得到了极大的关注和应用。传统行业不断地被新技术新模式更新升级：淘宝和京东的出现极大满足消费者长尾的购物需求，QQ 和微信的出现改变了效率较慢的书信沟通方式。但是在传统教育行业依然存在很多问题，比如教育资源分布不均，教学实施受时间地点的影响较大等，这些问题目前还没有得到有效地解决。从解决这些问题的角度出发，本文提出了一种使用 HTML5 新技术实现的在线教育系统，具体技术上通过 WebSoc
2、ket 建立效率更好的WEB 双向通信，通过 WebRTC 实现跨平台的视频语音沟通，通过 Node.js 完成稳定的后台服务，最终实现不受时间地点限制的多功能在线教育系统。关键词：在线教育；HTML5；WebRTC；WebSocket；Canvas中图分类号：TP37An online education system based on HTML5 technologyZHANG Yifan, LIU Shaohua(School of Electronic Engineering, Beijing University of Posts and Telecommunications, Be
3、ijing100876)Abstract: With the development of the modern technology and the demand of peoples workingand lives, the Internet and multimedia technology has got great development and application.Traditional industries have been updated with new technology upgrade, the emergence of taobaoand jingdong g
4、reatly meet the demand of consumers shopping, and the emergence of QQ andWechat changed peoples inefficient communication habit. However, in the traditional educationindustry, there are still many problems such as the distribution of education resources, the limit oftime and site. This paper present
5、s a new online education system based on HTML5 technology,build one more efficient two-way communication channel through Web-Socket, and realize thecross-platform video and voice communication channels, build a more stable backend throughnode.js.Key words: online education; HTML5; WebRTC; WebSocket;
6、 Canvas0 引言随着互联网技术、网络传输技术的发展，多媒体通信正越来越多地应用到生活的方方面面，朝着智能化、个性化的方向全面发展。目前在监控、医疗、娱乐等领域都已得到了广泛应用。但在教育行业，多媒体的应用还只是简单的网页播放，网络教育并没有深度整合用户的需求。本文提出的基于 HTM5 新技术的在线教育系统旨在建立一个更方便、更快捷、更公平的教育平台，弥补传统教育领域的缺陷和优化现有远程教育的不足。传统的教育行业里，存在着全国教育资源分布不平均不公平的问题，优秀的教育资源主要集中分布在经济富饶的一线城市地区，而三四线等偏远地区的学生却享受不了这些资源。现在互联网技术的发展正好可应用到教育行
7、业中。为弥补传统教育存在的不足，本文通过模式创新，在教学途径和产品方面，提出基于 HTML5 新技术的在线教育系统，一个跨地缘的平台，可使偏远地区的学生也能享受到优秀的教育资源，如果可以解决这一教育问题，对促进社会公平公正也会有很作者简介：张一凡（1990），男，硕士研究生，主要研究方向：多媒体通信，计算机网络通信联系人：刘绍华（1976-），男，副教授，主要研究方向：云计算，物联网，移动互联网. liushaohua-1-大帮助。虽然在线远程教育已存在多年，但这些模式只注重知识方面的传授，例如大学远程4550556065707580在线课程是在网页上播放已经录好的视频，而完全忽略掉了教育中最
8、重要的互动环节。本课题研究的一个重点就是如何把在教学中面对面的互动环节很好地融合进在线教育系统中。另外，现在移动端的发展远远超过了 PC 端设备，人们也习惯在移动端工作和学习。移动端和 PC 端的需求同时存在，但是移动系统和 PC 端系统的底层结构是不同的，传统的项目开发是需要在两种系统都有投入，这样对一个系统的开发成本、人工成本、后期维护成本消耗都是很大的。而基于 HTML5 新技术的在线教育系统可以通过浏览器实现跨平台的产品，即忽略底层的操作系统，只需一次开发，就能在多平台使用，后期维护相对容易1。基于对传统教育现状和远程在线教育问题做出的详细调研，论文提出和实现了一种较为完整的在线教育系
9、统。在线教育系统主要工作包括通过使用 HTML5 新标准中的 WebSocket搭建双向可靠的数据通信信道，WebRTC 完成关键的音视频交流，基于 Canvas 建立同步画板等。论文在产品功能和交互上设计了多功能教室和自定义控制教室，以满足不同需求的教学实践。论文章节安排如下：第一章：基于 HTML5 的多媒体通信技术原理。介绍和讲解本论文完成在线教育系统所用到的几项 HTML5 新技术：WebSocket、WebRTC、Canvas 等以及在服务器端使用的 Node.js技术。第二章：需求分析和系统构架。详细陈述和分析了在线教育系统的功能需求，以及在线教育系统的整体构架设计。第三章：主要模
10、块设计。阐述了在线教育系统的各个功能模块之间的关系和每个模块的设计实现。第四章：系统实现和数据验证。详细说明了本课题在技术上是如何实现整个系统，并在数据传输时延和系统负载性能等方面做出了数据验证。第五章：总结和展望。对论文主要工作做了总结，指出了本论文的创新点和存在的问题，并提出了设想和展望。1 基于 HTML5 的多媒体通信技术原理1.1 HTML5 技术特点HTML5 是用于取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML（标准通用标记语言下的一个应用）标准版本；现在仍处于发展阶段，但大部分浏览器已经支持HTML5 技术，基于 HTML5 技术的应用
11、也越来越多2。HTML 5 有两大特点：首先，强化了 Web 网页的表现性能。这是由于 HTM5 增加了一些内容表现标签，例如可以直接播放视频的标签，导航标签。以及 HTML5 新标准中的 Canvas，也是本论文用到一个重要标准，其可以使图像脚本更加灵活。其次，开放更多 API，追加了本地数据库等 Web 应用的功能。HTML5 的这一特性，使得通过 JavaScript等脚本语言也能实现本地存储，调用硬解设备的功能。这就是说，HTML5 技术可以把客户端应用实现在浏览器上，同时浏览器是跨平台性质的，忽略了各个系统底层的不同，大大降低了开发维护成本。广义论及 HTML5 时，实际指的是包括
12、HTML、CSS 和 JavaScript 在内的一套技术组合。它希望能够减少浏览器对于插件的依赖如 Adobe Flash、Microsoft Silverlight，与 OracleJavaFX 的需求，并且直接提供更多能有效增强网络应用的标准集。-2-1.2 WebSocketWebSocket protocol 是 HTML5 一种新的协议。它是实现了浏览器与服务器全双工通信。859095100105110115120在实时 Web 应用出现之初，最简单的实时通信的实现方案是轮询。所谓轮询就是客户端以一定的时间间隔向服务器端发出请求，以频繁请求的方式来不断刷新客户端呈现的信息。这种方案
13、缺乏灵活性，无论服务器端是否有信息更新，请求都会不断被发送，频繁的连接请求会给服务器端带来巨大的处理压力。所以这种方案逐渐被舍弃，进而发展出了基于 Ajax 的长轮询方式和基于 Iframe 的流方式3。这两种方式都在原有轮询的基础做了改进，一定程度上克服了简单轮询的不足。但是这两种方案都还存在很多问题。基于 Iframe 的流方式中，由于 Iframe 中始终维持一个连接，用户的浏览器会始终显示当前页面处于加载过程中，始终不能显示加载完成，这将影响用户体验。而基于 Ajax 的长轮询方案中，当服务器端数据更新速度较快时，长轮询将退化为普通的轮询，这样将大大降低其性能，并会对服务器端带来较大的
14、处理压力。以上传统 Web 实时通信解决方案都存在着不足的问题，所以本论文在实时推送功能模块上采用一种新型的 Web 通信解决方法Websocket 的网络技术。Websocket 规范的目标是在浏览器中实现和服务器端双向通信。其原理是使用 JavaScript 调用浏览器的 API 发出一个 WebSocket 请求至服务器，经过一次握手，和服务器建立了 TCP 通讯，因为它本质上是一个 TCP 连接，所以数据传输的稳定性强和数据传输量比较小。而且 WebSocket 在应用层实现了与 TCP Socket 相同的功能。具有以下几项特点：1)无缝穿越防火墙和路由器 2)支持跨域交流 3)完美
15、整合基于 cookie 的认证 4)完美整合 HTTP 负载平衡 5)兼容二进制数据。1.3 WebRTC为实现实时端对端文本信息传输、图片传输，以及视频语音通信传输，本系统使用了WebRTC 技术，WebRTC 是一项可在浏览器基础上进行实时视频和音频通信的技术，WebRTC 技术包括了视频会议的核心技术，如音视频的采集、编码、网络传输、显示等功能，并且还支持多平台：windows、linux、mac、android。在 chrome 浏览器平台上，有相应API 授权用户调用摄像头进行视频采集，WebRTC 采用 I420/VP8 编解码技术4。VP8 是开源实现，VP8 能以更少的数据提供
16、更高质量的视频，特别适合视频会议这样的需求。视频加密相当于视频应用层面的功能，给点对点的视频双方提供了数据上的安全保证，可以防止在Web 上视频数据的泄漏。对于网络视频来讲，数据的传输与控制是核心价值，WebRTC 采用的是成熟的 RTP/RTCP 技术。而且在现有版本的 chrome 浏览器中支持 peerconnection API，允许开发者创建 web 应用程序，实现实时音频和视频通话，而不再需要一个额外的插件。getUserMedia API 允许开发者使用摄像头和麦克风，把 peerconnection API 和 getUserMediaAPI 结合在一起，就能实现高质量的音视频
17、通信。WebRTCCanvas 元素是 HTML5 的一部分，允许脚本语言动态渲染位图像。它最初由苹果内部使用自己 Mac OS X WebKit 推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过 Gecko 内核的浏览器（尤其是 Mozilla 和 Firefox），Opera 和 Chrome，和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。Canvas 由一个可绘制地区 HTML代码中的属性定义决定高度和宽度。JavaScript 代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的 API，从而使动态生成的图形。可以用 Canvas
18、构造图形，动画，游戏和图片等。-3-2 需求分析与系统构架HTML5 新技术实现的在线教育系统旨在完成一个可以随时随地、不受空间时间限制的、125130135140145跨平台的教育系统，并且增加视频语音教学、画板教学、文本通信的相互融合。基于 HTML5新技术的在线教育系统拟要完成三部分的内容：一，多人视频语音教室，是在线教育系统的主要功能。视频教学模块又分为初级在线教室和高级在线教室。初级在线教室里教师和多名学生可互相通过音频视频没有限制地交流，适合大教室讨论授课。高级在线教室里教师功能比较丰富，在此教室中可允许老师根据课程教学情况控制学生机器的视频音频，例如控制学生机器只允许学生听教师授
19、课，学生在不经过老师授权的情况下，音视频数据是无法传送到在线课堂中来的，即真实实现了线下常规教学中提问回答互动的教学场景。此模块技术上是通过调用 web 浏览器中的实时音视频通信模块，实现端到端之间的通信，可在不失真的情况下对音视频做到最大限度压缩，同时这种端对端技术实现方法大大缓解了对服务器传输数据的压力，具有其他教育系统没有的成本优势。二，不同教学需求的教室管理模块，本文的在线教育系统除了具有音视频教学外，还有模仿线下教室黑板书写开发的在线共享课件教室，在教室中老师可与学生随时分享备课资料、批改作业等，同时配合音频聊天，使在线授课达到较高质量。三，用户登录系统，注册用户分为教师、学生、管理
20、员等，每个角色具有不同的权限，教师可发起一门课程、控制教室多媒体信息、上传课件文档、参与文本讨论；学生可参加选定的课程教学、下载课件文档、参与文本讨论；管理员除了具有教师和学生所有权限外，也有管理教师和学生功能的权限，也可隐身登陆教室等。根据以上的功能分析，使用上一章节介绍的 HTML5 几个技术标准应用到在线教育系统中，后端通过 Node.js 技术搭建稳定的服务，保障客户端之间数据有效安全交互。Node.js 是一个可以快速构建网络服务及应用的平台。该平台的构建是基于 Chromes JavaScript runtime，执行 Javascript 的速度快，性能好5。在线教育系统的总体构
21、架图如图 1 所示：Node.jsWindows/LinuxWebSocket 数据传输客户端服务器peerconnection图 1 系统结构Fig. 1 System Architecture-4-WebSocket 数据传输客户端文本、画板、视频音频应用CanvasWebRTCChorme/Firefox 浏览器Windows/Linux/Android文本、画板、视频音频应用WebRTCCanvasChorme/Firefox 浏览器Windows/Linux/Android3 主要模块设计1501551601651701751801853.1 用户管理在线教育系统中角色分为教师、学生
22、和管理员三种用户。三种角色在教学系统里会根据他们的属性具有不同的权限和功能。在线教育系统里，教师相比于学生，拥有更多的主动功能和控制功能。教师可以选择要教授的课程、制定课程计划、修改学生作业、上传教学课件以及在实时教学中管理和控制学生机器。根据教学需要，教师可选择语音教室、视频教室、画板教室或者课件教室。也可相互结合，已达到更好的教学效果。同时在网络状态不好的时候也可根据现场情况选择带宽消耗较低的教室。学生在在线教育系统里，是一种去接受知识的角色。模拟传统教室课堂，学生可以制定自己的学习计划，按照学习计划选择课程加入各种类型的教室学习，可下载课堂里老师上传的课件，可保存老师的板书，也可参加讨论
23、区与其他同学交流学习经验。管理员，是一种监督教师教学质量，保证学生利益的角色。具有修改和管理教师学生的信息、隐身登陆在线教室等、处理突发情况的权限。3.2 不同需求的教室模块在线教育系统中，音视频只是作为在线教育工具的一种，而要让网络教育真正对中国的教育事业有所影响，应该最大限度地释放学生学习的积极性和主动性，不受限制共同学习。基于此方面考虑，本系统中除了有音视频教室之外，另外加入课件互动共享功能和实时同步画板和文本讨论区。通过音视频教室，老师能较高效率地传播知识，因为是实时音频连接，能及时得到学生学习状态的实时反馈。在每个人的屏幕上显示出课堂中所有参与学习的学生和老师，在网络上营造了线下大家
24、一起学习的氛围。文本讨论区是大家汇集一堂，在课后和课前通过实时文本消息在线讨论知识。课件互动课堂和画板课堂，主要是模拟线下教室的黑板教学，老师把课件上传到服务器，服务器即时分享给教室的学生，同时老师在画板上的操作也会被服务器捕捉到，然后同样同步到学生教室。因为有很多教学知识，仅仅通过语言上和表情上的传达是不能描述清楚的，例如逻辑思维数学和美术辅导，这种情节就可以通过画板教学，学生能实时观看教师推演过程。未达到较好教学效果，再配合视音频的讲解，现场教学成果也可很方便保存记录，供线下再复习。3.3 其他功能模块除了主教学功能区之外，本文在线教育系统中再加以辅助教学管理模块。包括控制课程时间，学生计
25、费统计，以及教师评价反馈等功能。4 系统实现与数据验证4.1 系统实现通过前几张章节的功能分析和技术介绍，在线教育系统的整体构架已经比较清楚，本章详细阐述了在线教育系统各个功能模块的实现和数据验证。在线教育系统主要是学生和教师之间以及客户端与服务器之间进行实时数据交互，每一位老师和学生都算是一个客户端。系统的基础数据交互都是通过 WebScoket 建立的 Web 双向实时连接进行传播，其中包括在线教育系统中的文本信息，在线画板数据，共享课件的数据。通过 WebScoket 通道，数据从客户端传送到服务器，服务器收到数据后作出判断，根据客户端的要求传给符合条件的接收-5-端。在线教育系统服务器
26、后台是使用 Node.js 与客户端建立 WebSocket 连接。Node.js 是一种单线程非阻塞新兴的后端实现语言6。在 Node.js 里有很多可以实现 WebSocket 的方法，本文选择的是 Socket.IO 模块。Socket.IO 旨在让各种浏览器与移动设备实现实时 app 功能，模190糊化底层的传输机制，具有跨平台性质。在线教育系统中客户端与服务端建立 WebSocket过程如下，首先服务器建立 WebSocket 监听，等待客户端发送请求，服务器收到请求之后，成功建立 WebSocket 双向通道，这时服务器和客户端都可主动向对方推送消息。代码如下var socket
27、= io.connect(http:/192.168.1.112:8080); /客户端向服务器发送请求socket.on(message,function(data)/客户端收到服务器指令，执行命令195200205210215220225);io.sockets.on(connection, function (socket) /当客户端建立 Socket 时触发socket.on(fan1, function (fan) /接收客户端传过来的数据);socket.on(move, function (fan) /接收客户端传过来的move数据););应用到在线教育系统的各个模块中，课件通
28、过 WebSocket 连接从老师端传给服务器，服务器这时再转发给已建立中的 WebSocket 客户端。在线画板也是通过此种方法，把教师画板上的鼠标坐标信息搜集到服务器，服务器实时广播给在线学生。在线学生收到WebSocket 传输来的鼠标数据，就可在自己的页面上模拟教师的实际操作。还有在线教育系统中的一些文本传输也是使用相同的通道和方法。本文对 WebSocket 的传输效率进行验证，通过 Wireshark 软件截取其网络数据包。对网络层、协议、主机、网络或端口进行过滤，经过分析得到 WebSocket 的文本数据传输在局域网内的时延平均在 15ms 左右，在广域网下的时延在 200ms
29、 左右。音视频教学是应用了 WebRTC 技术，WebRTC 采用的是成熟的 RTP/RTCP 技术，前几章也介绍了 WebRTC 技术的基本原理。在线教育系统通过 WebRTC 集成了 MediaStream、PeerConnection、DataChannel 等功能7。具体技术上实现是通过 MediaStream 调用客户端本地的麦克风和摄像头，获取本地的媒体源。一个媒体数据源构成一个 MediaStreamTrack，比如音频数据源和视频数据源，多个相互之间有关联的媒体数据源构成一个媒体流MediaStream。代码实现如下所示：if (getUserMedia) rtc.numStr
30、eams+;getUserMedia.call(navigator, options, function(stream) rtc.streams.push(stream);onSuccess(stream);if (rtc.initializedStreams = rtc.numStreams) -6-230235240245, function() alert(Could not connect stream.);onFail();); else alert(webRTC is not yet supported in this browser.);客户端在获取到本地的媒体流之后，WebRT
31、C 网络通过 Signalling 来发现各个 Peer 即学生，PeerConnection 处理通讯双方信令事件，完成通讯数据的传输，建立通讯连接。通过浏览器，WebRTC 把通讯双方的信令状态直接映射到 PeerConnection 里面来抽象信令处理。在建立 PeerConnection 之后即可通过 DataChannel 传输任意类型的数据8。因为 WebRTC 建立的视频语音教室是端对端之间的数据传输，服务器只负责处理信号通讯，所以即使有很多学生同时加入教室也不会对服务器造成压力。5 人测试的在线教育系统实验结果，如图 2 所示：图 2 系统实现例图Fig. 2System ch
32、art4.2 系统测试本系统在测试是分别对服务器和客户端在带宽、时延、丢包率三个方面进行测试。客户端是通过 WIFI 接入网络，WIFI 下的带宽情况是一种不确定的变量，闲忙时段音视频传播250所占用的带宽是不一样的。在实验里本章选择了一个中等使用度的 WIFI 环境下进行测试。关于带宽、时延、丢包率分别测出 5 个时刻下的数据，其中带宽的单位为 KB/s，时延单位为 ms，如下表所示：表 1Tab. 1带宽测试数据Bandwidth test参数音频视频时刻 1/KB/s6.7234.2时刻 2/KB/s6.9435.3时刻 3/ KB/s6.8336.1时刻 4/ KB/s6.4334.3
33、时刻 5/ KB/s5.9332.4255-7-表 2Tab. 2丢包率测试数据Packet loss rate test参数音频视频时刻 1/ms3.9%6.1%时刻 2/ms3.8%5.7%时刻 3/ms4.1%6.2%时刻 4/ms3.5%6.3%时刻 5/ms4.2%6.7%表 3时延测试数据260Tab. 3Delay test参数WebSocket时刻 1/ms193.3时刻 2/ms201.5时刻 3/ms187.4时刻 4/ms193.0时刻 5/ms203.6经过算数平均计算，得出音频带宽平均在 6.57kb/s，视频带宽平均在 34.5 kb/s，音频丢包率在 3.9%，视
34、频丢包率在 6.2%。从这几组数据中可以得出，音视频所占用的带宽变是不大的，这就能够说明，通过 WebRTC 实现的在线教育系统的正常运作受带宽限制，受网265270275280285290295络环境的影响比较小。视频丢包率在 10%以下是可以正常播放的，所以在也不会影响在线教育系统的正常上课。时延是 WebSocket 的传输时延，可以看到会稍微造成在线教育系统中通过 WebSocket 传输的文本消息，坐标信息等有稍微的延迟。5 结论基于 HTML5 的在线教育系统的主要表现在以下几个方面的优势：1）跨平台性质的在线教育系统，系统核心的 WebRTC 的本质是将实时通信应用所需要的音视频
35、捕获及处理模块、网络传输及会话控制等协议集成到 Web 浏览器中9，从而屏蔽底层硬件实现或操作系统之间的差异。第三方 Web App 开发者可以通过浏览器提供 Web API调用音视频实时通信能力10。2）学习内容丰富，由于不受实物空间时间的限制，在线教育系统向学生提供的学习方法包括在线语音，在线视频，在线共享课件等，学生可以选择适合自己学习方式，使学习过程变得活泼有趣，从而可使学生更加投入地学习。在授课的过程中老师和学生之间不仅有视频语音的交流，还可辅助在线画板提高教学效率，方便地与其他学友进行互动交流，而且这种交流有着不受地域限制、友善人性的特点。3）在线教育系统性能优越，因为采用 HTM
36、L5 中的 WebSocket 技术，达到一种实时性能比较高的通信方案，WebRTC 技术实现的视频教室即时在使用量较大时也不会对服务器造带来压力，而且占用网络带宽不高，利于推广到实际应用中。参考文献 (References)1 刘华星，杨庚. HTML5-下一代 Web 开发标准研究J. 计算机技术与发展，2011，21（8）：54-55.2 李伙沁. HTML5 网页电子画板的设计与实现J. 科技世界，2012，2：105-106.3 刘斌. HTML5-未来网络应用的核心技术研究J. 自动化与仪表仪器，2010，430-31.4 H. Alvestrand, draft-ietf-rtc
37、web-overview-08-2013. Overvie: Real Time Protocools for Brower-basedApplicationsS. USA: IETF, 2013.5 Adam Bergkvist, Daniel C. Burrnett, Cullen Jennings, Anant Narayanan, W3C Editors Draft-2013.WebRTC1.0: Real-time Communication Between BrowsersS. USA: W3C, 2013.6 林鸿，王松，杨鑫，付斌. 基于 WebRTC 技术的应用及平台技术开发
38、与设计J. 电信科学，2013，29（9）：20-25.7 J. Rosenberg, RFC5245-2010. Interactive Connectivity Establishment(ICE): A Transport Protocol forReal-Time ApplicationsS. USA: IETF, 2013.8 Google. The WebRTC websiteOL. 2013-10-12. http:/www.webrtc.org/-8-9 Bergkvist A, Burnett D C, Jennings C, et al. WebRTC 1.0: Real-time communication between browsersJ.Working draft, W3C, 2012.10 屈振华，李慧云，张海涛，龙显军. WebRTC 技术初探J. 电信科学，2012，28（10）：107-108.-9-
