基于Flex的远程学习状态监控系统的设计与实现

胡珍莹，杨传斌

(浙江师范大学 教师教育学院，浙江 金华 321004)



基于Flex的远程学习状态监控系统的设计与实现

胡珍莹，杨传斌

(浙江师范大学 教师教育学院，浙江 金华 321004)

提出的基于Flex的远程学习状态监控系统解决了远程教育缺乏面对面体验的问题，让教师与学习者都能通过视频矩阵看到彼此，学生可以感受到传统面授课堂的教学氛围，教师也可以进行更合理的教学安排。系统采用了Java页面开发技术结合Flex加Red5的视频开发，在B/S架构上为网络教学提供较之独立监控软件更为便捷有效的服务，且实施效果良好。

Flex；学习监控；视频技术；远程学习

0 引言

目前在线学习社区应用广泛，在线课堂的线上学习率得到很大提升。2015年3月李克强总理提出了“互联网+”概念后，一直致力于提供优质学习资源的智慧教育开始更加关注线上学习者的学习状态。然而信息不对称往往是效率低下的重要影响因素，对于网络课程来说更是如此[1]。本文就此提出了一种B/S架构下基于Flex的远程学习状态监控系统的设计与实现，不仅符合智慧教育目标，也有一定方法上的创新以及市场运用前景，同时也为“互联网+教育”提供了一条技术上的参考道路。

1 系统需求

远程教育风靡全球，凭借其不受时间、空间拘束的特点备受推崇，将网络和教育相结合已成为现代教育的一个趋势。然而网络教学始终不能与传统课堂相提并论，在网络环境下的在线学习中，学生不可能感知到教师对自己的督促，网络失去了课堂教学那种严肃环境，学生失去了课堂纪律的约束感，从而导致思想散漫，学习动力不足，学习兴趣也大幅度下降[2]；教师难以监控学生的学习状态，对教学效果无法预测，不能有效进行课程的优化设计[1]。

如何运用现代教育技术解决以上问题，从而让教师与学生突破网络教学限制能够感受到传统面授课堂的“面对面”的感受呢？有学者提出可以在教学设计时就考虑利用BBS、E-mail、聊天室、视频会议等网络相关技术工具，以达到促进学习者交流的目的[2]。的确，这样实现了学习者在网络上互相督促，可是这些工具并不是专门针对网络学习，不仅容易分散学习者注意力，而且跨平台操作也十分不便，这都容易在与学习无关的环节花费过多时间。针对以上问题，本文提出了一套合理化的解决方案。

2 系统设计

2.1 B/S架构

B/S架构是将所有的程序工作都放在服务器上，客户端只需通过浏览器完成操作，它与C/S架构相对应，并不需要独立的开发软件，只需做好网页设计让用户打开浏览器便可体验系统功能。B/S架构是真正建立在广域网上的，用户通过网络随时随地调用视频，获取信息，最大化地实现视频数据共享；同时客户端要求低，维护方便[3]。加之数字视频只有与计算机数据库、网络结合在一起，才能实现更方便、快速的传播与利用，本系统服务于远程学习， B/S架构自然是不二选择。

其次，监控视频录制文件保存为FLV(F1ash Video)格式，由于Flash的广泛使用，浏览器只要能看Flash动画，就能看FLV格式视频，而无需再额外安装其他视频插件，这也使B/S架构的推广更为便利。

2.2 系统部署

如图1所示，学生在自己的计算机上进行正常的网络学习，随着学习开始，计算机摄像头自动开始捕获学习者学习状态。由于采用B/S架构，无需开启监控软件，可以依托网络学习平台同步运行。教师可以在监控端的页面上观看到矩阵式的视频窗口组合，右键可以查看单个学生的个人信息以及学习情况，也可以连接到教室的IP摄像头从而监控到整个网络教室的环境。

图1 系统总体部署图

为了加强学生的自觉性，也使课堂学习某些环节更为方便，本系统分设了两个视频观看权限，除了教师在讲台的全局监控之外，学生也有观看到彼此学习状态的权限。一来提高视频监控的利用弹性，再者也可让学生之间有更多交流互动的机会。

2.3 开发工具

系统开发工具全部采用开源解决方案，系统开发过程中使用的工具如下：视频流服务器采用开源的Red5，版本为Red5 1.0.0；数据库采用开源的MySQL，版本为MySQL5.6；Flex视频界面开发工具使用了Adobe公司的Flash Builder，版本为Adobe Flash Builder 4，Flex SDK名称为Flex 4.1；服务器端开发IDE采用开源的 Myeclipse，版本为Myeclipse 10.6；Web 应用服务器采用了轻量级的Tomcat服务器，版本为Tomcat 7。

3 Flex+Red5技术

Flex RIA技术的兴起，将桌面系统的响应速度和丰富功能与Web应用结合在一起，提供了效果极佳的用户体验[4]。Flex用规范的、标准化的MXML描述界面，用ActionScript实现程序逻辑，实现了内部逻辑与外部界面的相互分离[5]，且致力于实现浏览器、桌面和移动平台的支持，支持包括移动学习在内的多种学习模式，能实现网络学习评价、智能导航、反馈，在远程教学系统开发中具有广泛的应用前景。

Red5则是一个新兴的开源项目，用于实现Flash与服务器之间的流媒体服务，使用开源技术Spring Apache Mina、Jetty，实现了RTMP、RTMPT、AMF、HTTP通信协议。

4 功能实现

4.1 JAVA结合Flex

本系统直接用Flash Builedr开发视频播放界面，MyEclipse单独开发Web界面。集成的时候将Flex编译成功的结果在WEBROOT文件夹下直接引用。具体方法是将Flex页面嵌入JSP，过程中只需要嵌入Iirame标签，路径引用WEBROOT下编译成功的SWF文件即可。

本系统中的Iframe标签示例代码如下：

此处需要注意SWF文件与HTML文件的区别，笔者先尝试的是SWF文件，结果发现CSS样式和AS文件都无法获得，通过查阅资料后发现功能都在HTML文件中，所以如果包含外部功能最好是引入HTML文件以确保完整性。当然也可以将FLEX集成到MyEclipse中去，这样可以直接在MyEclipse中进行Flex开发，而不必考虑两个开发平台的对接问题。

4.2 视频压缩技术

对网络带宽进行需求分析后，除了通过改善硬件条件来直观地提高运行视频观看速率外，视频压缩技术也是一种有效的方式。视频压缩技术可以减少视频文件的大小，从而节省存储空间和网络带宽，本系统采用了最新的视频压缩标准H264。

此处有一点需要注意，视频压缩技术对网络摄像机和显示终端有一定要求，如果设备没有足够的技术承载能力，那就必须退一步降低需求而采取适宜的相应技术。理论上能够实现的技术若是没有同步先进的设备支撑也是徒劳无功的。

4.3 右键与全屏功能

视频播放组件都有默认的右键功能，一般用以查看组件版本与更新状况。然而完整地开发一个用于管理的系统软件明显需要自己独立的右键功能，此处可以通过修改index.template.html文件，同时创建一个用于存储右键菜单内容的类RightClickManager.as，然后在程序入口new一下RightClickManager就能轻松屏蔽掉原先自带的右键功能，改为显示RightClickManager这个类中写入的右键功能。

在主程序中调用的rightClickHandler、removeMenu、initMenu、createMenuItems、menuItemSelected等函数都是为了屏蔽初始的右键功能创立新的右键菜单。

FullScreenUtil的封装类也是相同道理，dbFullScreen、fullScreen函数用此封装类实现了双击全屏的功能。

4.4 多参数的传递

在Flex里通过addEventListener函数给控件动态加载click事件侦听函数时，除了事件本身传递的Event类型参数外，还需要传递更多的参数。此时就需要一个封装好的类EventArgExtend，如rightClickHandler(event:ContextMenuEvent,...arg)和menuItemSelected(event:MenuEvent,...arg)。因为右键菜单选项不只一个,所以需要传递的参数不只一个，这时EventArgExtend这个封装类就提供了...arg的多参数传递方式。

4.5 空函数

在本系统的开发过程中发现Flex视频开发中涉及个别函数：securityErrorHandler、asyncErrorHandler、onBWCheck、onBWDone、onMetaData、statusHandler等，这些函数虽然没有实际的应用效果，但对于标准的视频软件开发却是必不可少的，记录了安全问题、带宽问题、网络监测问题，如果缺少了这些空函数，Adobe将会报错。

4.6 带宽分析

由于本系统需要多端口获取视频并播放，因此对带宽的需求分析是必不可少的。根据后台服务器上的录制视频文件可以读取视频属性，进行属性分析后可以大致判断带宽需求。

图2是通过本设计的视频监控端口上传到服务器的座位号为3的学生视频流属性，在代码中的定义是cam.setMode(320,240,30)。由此可知生成的流文件以像素为单位长宽为320×240，帧速率为30 f/s，读图知视频时长为196 s。由此可以计算码流和视频支持情况。

图2 录制视频属性

该文件对应的码流是：

7.77×1 024×1 024×8/(3×60+16)=332 548.39

10 Mb/s独享带宽能支撑的同时在线人数为：

10×1 024×1 024/332 548.39=31

也就是说如果一个学习平台有31个人，为了能支持这31个人同时在线，则至少需要10 Mb/s的带宽。当然，以上数据都是理论值，实际数据在理论值之下。经过具体实践分析，设置的帧速率、流文件的像素大小还有文件格式都会影响带宽。如果是相同的分辨率，码流越大，压缩比就越小，画质就越清晰，同样需要的带宽也就越大，相同带宽下支持的在线人数也就越少。

对监控视频来说还有一个十分重要的函数，那就是关键帧的设置。关键帧的设置保证了视频的有效性，一定程度上反映了视频的刷新速率，所以在很大程度上依托于实际带宽情况。关键帧的设置也在一定程度上解决了因传输数据量过大而造成的排队现象，以及存储过程中复杂的处理过程等，这些问题时常会诱发网络监控中延时现象的发生。设置传输的视频关键帧可以根据实际的带宽情况来设置，关键帧数值越小带宽使用率越大，反之关键帧数值越大带宽使用率越小。对画面质量要求高的视频监控可以设置相对数值较小的关键帧。

5 应用效果分析

本系统运用了相对先进与成熟的技术，在一定程度上缩小了网络教学与传统面授课堂的差距。且采用B/S架构，对同样普遍采用B/S架构的网络学习平台来说具有很好的兼容性，可以达到系统间的无缝对接。

[6]中将“网络学习监控”一词的概念界定为“通过提高学习效果和质量而达到学习目的，充分利用计算机网络和远程通信功能，对学生的网络学习活动进行计划、检查、评价、反馈并根据反馈结果对网络学习做出相应的控制和调节的过程”。从概念上分析，本系统并未完全解决网络学习监控这一问题。然而监控方式分为外部监控与内部监控，本文所论述的技术主要解决了外部监控来达到使网络教学更为贴近传统面授课堂。同时本系统很好地解决了外部监控涉及的问题，将网络学习与传统课堂学习更相近，可方便教师考虑后继的教学设计问题，且应用效果良好，具有一定的市场推广价值。

6 结论

网络视频监控作为网络技术和视频监控技术融合的产物，随着技术的进步不断得到发展，作为数字校园的重要组成部分，在教学管理生活中发挥越来越大的作用，很多教学活动都离不开视频监控的支持，网络视频监控在数字校园的大环境中也必将继续发挥更大的作用[3]。

B/S架构下的Flex加Red5的视频播放技术使远程监控系统的推广使用更加便捷高效，加之智慧校园的建设需求，该系统的设计思路有很大的市场应用前景，其实现也很大程度上推进了教育信息化建设。随着设备更新换代，本文所提供的设计思路会得到更好的支撑。视频监控技术需要大量的资金投入来支撑设备供需，加上学习环境需要提供多路视频，如何降低成本同时更好地提供视频播放，是系统后期维护过程中需要不断更进的一项研究。

参考文献

[1] 洪宝林.基于Bb教学平台进行学生网络课程学习状态监控初探[J].人力资源管理,2010(9):41-42.

[2] 秦浩,杨玉军,胡青,等.建筑类专业技术人员继续教育网络课程学习监控策略[J].大学教育,2014(9):37-38.

[3]叶金岭,王青峰,余波.网络视频监控在数字校园中的应用研究[J].计算机光盘软件与应用,2014(11): 251,253.

[4] 吕海东,陆永林.基于Flex和BlazeDS推技术实现WEB方式实时监控系统[J].自动化技术与应用,2010,29(1):34-36.[5] 邓梦德.Flex在远程教学系统开发中的应用研究[J].现代教育技术,2009,19(9):92-94.

[6] 琚超.网络教育的学习监控探析[J].河北工业大学学报(社会科学版),2010,2(1):41-44.

杨传斌(1968- )，男，硕士，硕士生导师，主要研究方向：网络安全与网络工程。

Design and implementation of distance learning condition monitoring system based on Flex

Hu Zhenying，Yang Chuanbin

(College of Teacher Education, Zhejiang Normal University, Jinhua 321004, China)

The monitoring system based on Flex proposed in this article solve the "cannot face to face" problem of distance learning platform in an effective way, so teachers and students can see each other through the video in matrix, and students can feel the teaching atmosphere of traditional face-to-face classroom, teachers can also do the teaching arrangements better. The system uses the development technologies of Java page, Flex and Red5, and selectes B/S architecture for E-learning platform. It provides more convenient and effective services to the common separate monitoring software, and the effectiveness is good.

Flex; learning monitor; video technology;distance learning

TP37

A

10.19358/j.issn.1674- 7720.2016.20.025

胡珍莹，杨传斌. 基于FLEX的远程学习状态监控系统的设计与实现[J].微型机与应用，2016,35(20)：90-92，95.

2016-05-25)

胡珍莹(1992- )，通信作者，女，硕士研究生，主要研究方向：网络学习、教育信息化。E-mail：huzy@zjnu.cn。