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