胡珍瑩，楊傳斌

(浙江師范大學(xué) 教師教育學(xué)院，浙江 金華 321004)

?

基于Flex的遠(yuǎn)程學(xué)習(xí)狀態(tài)監(jiān)控系統(tǒng)的設(shè)計與實(shí)現(xiàn)

胡珍瑩，楊傳斌

(浙江師范大學(xué) 教師教育學(xué)院，浙江 金華 321004)

提出的基于Flex的遠(yuǎn)程學(xué)習(xí)狀態(tài)監(jiān)控系統(tǒng)解決了遠(yuǎn)程教育缺乏面對面體驗(yàn)的問題，讓教師與學(xué)習(xí)者都能通過視頻矩陣看到彼此，學(xué)生可以感受到傳統(tǒng)面授課堂的教學(xué)氛圍，教師也可以進(jìn)行更合理的教學(xué)安排。系統(tǒng)采用了Java頁面開發(fā)技術(shù)結(jié)合Flex加Red5的視頻開發(fā)，在B/S架構(gòu)上為網(wǎng)絡(luò)教學(xué)提供較之獨(dú)立監(jiān)控軟件更為便捷有效的服務(wù)，且實(shí)施效果良好。

Flex；學(xué)習(xí)監(jiān)控；視頻技術(shù)；遠(yuǎn)程學(xué)習(xí)

0 引言

目前在線學(xué)習(xí)社區(qū)應(yīng)用廣泛，在線課堂的線上學(xué)習(xí)率得到很大提升。2015年3月李克強(qiáng)總理提出了“互聯(lián)網(wǎng)+”概念后，一直致力于提供優(yōu)質(zhì)學(xué)習(xí)資源的智慧教育開始更加關(guān)注線上學(xué)習(xí)者的學(xué)習(xí)狀態(tài)。然而信息不對稱往往是效率低下的重要影響因素，對于網(wǎng)絡(luò)課程來說更是如此[1]。本文就此提出了一種B/S架構(gòu)下基于Flex的遠(yuǎn)程學(xué)習(xí)狀態(tài)監(jiān)控系統(tǒng)的設(shè)計與實(shí)現(xiàn)，不僅符合智慧教育目標(biāo)，也有一定方法上的創(chuàng)新以及市場運(yùn)用前景，同時也為“互聯(lián)網(wǎng)+教育”提供了一條技術(shù)上的參考道路。

1 系統(tǒng)需求

遠(yuǎn)程教育風(fēng)靡全球，憑借其不受時間、空間拘束的特點(diǎn)備受推崇，將網(wǎng)絡(luò)和教育相結(jié)合已成為現(xiàn)代教育的一個趨勢。然而網(wǎng)絡(luò)教學(xué)始終不能與傳統(tǒng)課堂相提并論，在網(wǎng)絡(luò)環(huán)境下的在線學(xué)習(xí)中，學(xué)生不可能感知到教師對自己的督促，網(wǎng)絡(luò)失去了課堂教學(xué)那種嚴(yán)肅環(huán)境，學(xué)生失去了課堂紀(jì)律的約束感，從而導(dǎo)致思想散漫，學(xué)習(xí)動力不足，學(xué)習(xí)興趣也大幅度下降[2]；教師難以監(jiān)控學(xué)生的學(xué)習(xí)狀態(tài)，對教學(xué)效果無法預(yù)測，不能有效進(jìn)行課程的優(yōu)化設(shè)計[1]。

如何運(yùn)用現(xiàn)代教育技術(shù)解決以上問題，從而讓教師與學(xué)生突破網(wǎng)絡(luò)教學(xué)限制能夠感受到傳統(tǒng)面授課堂的“面對面”的感受呢？有學(xué)者提出可以在教學(xué)設(shè)計時就考慮利用BBS、E-mail、聊天室、視頻會議等網(wǎng)絡(luò)相關(guān)技術(shù)工具，以達(dá)到促進(jìn)學(xué)習(xí)者交流的目的[2]。的確，這樣實(shí)現(xiàn)了學(xué)習(xí)者在網(wǎng)絡(luò)上互相督促，可是這些工具并不是專門針對網(wǎng)絡(luò)學(xué)習(xí)，不僅容易分散學(xué)習(xí)者注意力，而且跨平臺操作也十分不便，這都容易在與學(xué)習(xí)無關(guān)的環(huán)節(jié)花費(fèi)過多時間。針對以上問題，本文提出了一套合理化的解決方案。

2 系統(tǒng)設(shè)計

2.1 B/S架構(gòu)

B/S架構(gòu)是將所有的程序工作都放在服務(wù)器上，客戶端只需通過瀏覽器完成操作，它與C/S架構(gòu)相對應(yīng)，并不需要獨(dú)立的開發(fā)軟件，只需做好網(wǎng)頁設(shè)計讓用戶打開瀏覽器便可體驗(yàn)系統(tǒng)功能。B/S架構(gòu)是真正建立在廣域網(wǎng)上的，用戶通過網(wǎng)絡(luò)隨時隨地調(diào)用視頻，獲取信息，最大化地實(shí)現(xiàn)視頻數(shù)據(jù)共享；同時客戶端要求低，維護(hù)方便[3]。加之?dāng)?shù)字視頻只有與計算機(jī)數(shù)據(jù)庫、網(wǎng)絡(luò)結(jié)合在一起，才能實(shí)現(xiàn)更方便、快速的傳播與利用，本系統(tǒng)服務(wù)于遠(yuǎn)程學(xué)習(xí)， B/S架構(gòu)自然是不二選擇。

其次，監(jiān)控視頻錄制文件保存為FLV(F1ash Video)格式，由于Flash的廣泛使用，瀏覽器只要能看Flash動畫，就能看FLV格式視頻，而無需再額外安裝其他視頻插件，這也使B/S架構(gòu)的推廣更為便利。

2.2 系統(tǒng)部署

如圖1所示，學(xué)生在自己的計算機(jī)上進(jìn)行正常的網(wǎng)絡(luò)學(xué)習(xí)，隨著學(xué)習(xí)開始，計算機(jī)攝像頭自動開始捕獲學(xué)習(xí)者學(xué)習(xí)狀態(tài)。由于采用B/S架構(gòu)，無需開啟監(jiān)控軟件，可以依托網(wǎng)絡(luò)學(xué)習(xí)平臺同步運(yùn)行。教師可以在監(jiān)控端的頁面上觀看到矩陣式的視頻窗口組合，右鍵可以查看單個學(xué)生的個人信息以及學(xué)習(xí)情況，也可以連接到教室的IP攝像頭從而監(jiān)控到整個網(wǎng)絡(luò)教室的環(huán)境。

圖1 系統(tǒng)總體部署圖

為了加強(qiáng)學(xué)生的自覺性，也使課堂學(xué)習(xí)某些環(huán)節(jié)更為方便，本系統(tǒng)分設(shè)了兩個視頻觀看權(quán)限，除了教師在講臺的全局監(jiān)控之外，學(xué)生也有觀看到彼此學(xué)習(xí)狀態(tài)的權(quán)限。一來提高視頻監(jiān)控的利用彈性，再者也可讓學(xué)生之間有更多交流互動的機(jī)會。

2.3 開發(fā)工具

系統(tǒng)開發(fā)工具全部采用開源解決方案，系統(tǒng)開發(fā)過程中使用的工具如下：視頻流服務(wù)器采用開源的Red5，版本為Red5 1.0.0；數(shù)據(jù)庫采用開源的MySQL，版本為MySQL5.6；Flex視頻界面開發(fā)工具使用了Adobe公司的Flash Builder，版本為Adobe Flash Builder 4，F(xiàn)lex SDK名稱為Flex 4.1；服務(wù)器端開發(fā)IDE采用開源的 Myeclipse，版本為Myeclipse 10.6；Web 應(yīng)用服務(wù)器采用了輕量級的Tomcat服務(wù)器，版本為Tomcat 7。

3 Flex+Red5技術(shù)

Flex RIA技術(shù)的興起，將桌面系統(tǒng)的響應(yīng)速度和豐富功能與Web應(yīng)用結(jié)合在一起，提供了效果極佳的用戶體驗(yàn)[4]。Flex用規(guī)范的、標(biāo)準(zhǔn)化的MXML描述界面，用ActionScript實(shí)現(xiàn)程序邏輯，實(shí)現(xiàn)了內(nèi)部邏輯與外部界面的相互分離[5]，且致力于實(shí)現(xiàn)瀏覽器、桌面和移動平臺的支持，支持包括移動學(xué)習(xí)在內(nèi)的多種學(xué)習(xí)模式，能實(shí)現(xiàn)網(wǎng)絡(luò)學(xué)習(xí)評價、智能導(dǎo)航、反饋，在遠(yuǎn)程教學(xué)系統(tǒng)開發(fā)中具有廣泛的應(yīng)用前景。

Red5則是一個新興的開源項(xiàng)目，用于實(shí)現(xiàn)Flash與服務(wù)器之間的流媒體服務(wù)，使用開源技術(shù)Spring Apache Mina、Jetty，實(shí)現(xiàn)了RTMP、RTMPT、AMF、HTTP通信協(xié)議。

4 功能實(shí)現(xiàn)

4.1 JAVA結(jié)合Flex

本系統(tǒng)直接用Flash Builedr開發(fā)視頻播放界面，MyEclipse單獨(dú)開發(fā)Web界面。集成的時候?qū)lex編譯成功的結(jié)果在WEBROOT文件夾下直接引用。具體方法是將Flex頁面嵌入JSP，過程中只需要嵌入Iirame標(biāo)簽，路徑引用WEBROOT下編譯成功的SWF文件即可。

本系統(tǒng)中的Iframe標(biāo)簽示例代碼如下：

此處需要注意SWF文件與HTML文件的區(qū)別，筆者先嘗試的是SWF文件，結(jié)果發(fā)現(xiàn)CSS樣式和AS文件都無法獲得，通過查閱資料后發(fā)現(xiàn)功能都在HTML文件中，所以如果包含外部功能最好是引入HTML文件以確保完整性。當(dāng)然也可以將FLEX集成到MyEclipse中去，這樣可以直接在MyEclipse中進(jìn)行Flex開發(fā)，而不必考慮兩個開發(fā)平臺的對接問題。

4.2 視頻壓縮技術(shù)

對網(wǎng)絡(luò)帶寬進(jìn)行需求分析后，除了通過改善硬件條件來直觀地提高運(yùn)行視頻觀看速率外，視頻壓縮技術(shù)也是一種有效的方式。視頻壓縮技術(shù)可以減少視頻文件的大小，從而節(jié)省存儲空間和網(wǎng)絡(luò)帶寬，本系統(tǒng)采用了最新的視頻壓縮標(biāo)準(zhǔn)H264。

此處有一點(diǎn)需要注意，視頻壓縮技術(shù)對網(wǎng)絡(luò)攝像機(jī)和顯示終端有一定要求，如果設(shè)備沒有足夠的技術(shù)承載能力，那就必須退一步降低需求而采取適宜的相應(yīng)技術(shù)。理論上能夠?qū)崿F(xiàn)的技術(shù)若是沒有同步先進(jìn)的設(shè)備支撐也是徒勞無功的。

4.3 右鍵與全屏功能

視頻播放組件都有默認(rèn)的右鍵功能，一般用以查看組件版本與更新狀況。然而完整地開發(fā)一個用于管理的系統(tǒng)軟件明顯需要自己獨(dú)立的右鍵功能，此處可以通過修改index.template.html文件，同時創(chuàng)建一個用于存儲右鍵菜單內(nèi)容的類RightClickManager.as，然后在程序入口new一下RightClickManager就能輕松屏蔽掉原先自帶的右鍵功能，改為顯示RightClickManager這個類中寫入的右鍵功能。

在主程序中調(diào)用的rightClickHandler、removeMenu、initMenu、createMenuItems、menuItemSelected等函數(shù)都是為了屏蔽初始的右鍵功能創(chuàng)立新的右鍵菜單。

FullScreenUtil的封裝類也是相同道理，dbFullScreen、fullScreen函數(shù)用此封裝類實(shí)現(xiàn)了雙擊全屏的功能。

4.4 多參數(shù)的傳遞

在Flex里通過addEventListener函數(shù)給控件動態(tài)加載click事件偵聽函數(shù)時，除了事件本身傳遞的Event類型參數(shù)外，還需要傳遞更多的參數(shù)。此時就需要一個封裝好的類EventArgExtend，如rightClickHandler(event:ContextMenuEvent,...arg)和menuItemSelected(event:MenuEvent,...arg)。因?yàn)橛益I菜單選項(xiàng)不只一個,所以需要傳遞的參數(shù)不只一個，這時EventArgExtend這個封裝類就提供了...arg的多參數(shù)傳遞方式。

4.5 空函數(shù)

在本系統(tǒng)的開發(fā)過程中發(fā)現(xiàn)Flex視頻開發(fā)中涉及個別函數(shù)：securityErrorHandler、asyncErrorHandler、onBWCheck、onBWDone、onMetaData、statusHandler等，這些函數(shù)雖然沒有實(shí)際的應(yīng)用效果，但對于標(biāo)準(zhǔn)的視頻軟件開發(fā)卻是必不可少的，記錄了安全問題、帶寬問題、網(wǎng)絡(luò)監(jiān)測問題，如果缺少了這些空函數(shù)，Adobe將會報錯。

4.6 帶寬分析

由于本系統(tǒng)需要多端口獲取視頻并播放，因此對帶寬的需求分析是必不可少的。根據(jù)后臺服務(wù)器上的錄制視頻文件可以讀取視頻屬性，進(jìn)行屬性分析后可以大致判斷帶寬需求。

圖2是通過本設(shè)計的視頻監(jiān)控端口上傳到服務(wù)器的座位號為3的學(xué)生視頻流屬性，在代碼中的定義是cam.setMode(320,240,30)。由此可知生成的流文件以像素為單位長寬為320×240，幀速率為30 f/s，讀圖知視頻時長為196 s。由此可以計算碼流和視頻支持情況。

圖2 錄制視頻屬性

該文件對應(yīng)的碼流是：

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

10 Mb/s獨(dú)享帶寬能支撐的同時在線人數(shù)為：

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

也就是說如果一個學(xué)習(xí)平臺有31個人，為了能支持這31個人同時在線，則至少需要10 Mb/s的帶寬。當(dāng)然，以上數(shù)據(jù)都是理論值，實(shí)際數(shù)據(jù)在理論值之下。經(jīng)過具體實(shí)踐分析，設(shè)置的幀速率、流文件的像素大小還有文件格式都會影響帶寬。如果是相同的分辨率，碼流越大，壓縮比就越小，畫質(zhì)就越清晰，同樣需要的帶寬也就越大，相同帶寬下支持的在線人數(shù)也就越少。

對監(jiān)控視頻來說還有一個十分重要的函數(shù)，那就是關(guān)鍵幀的設(shè)置。關(guān)鍵幀的設(shè)置保證了視頻的有效性，一定程度上反映了視頻的刷新速率，所以在很大程度上依托于實(shí)際帶寬情況。關(guān)鍵幀的設(shè)置也在一定程度上解決了因傳輸數(shù)據(jù)量過大而造成的排隊現(xiàn)象，以及存儲過程中復(fù)雜的處理過程等，這些問題時常會誘發(fā)網(wǎng)絡(luò)監(jiān)控中延時現(xiàn)象的發(fā)生。設(shè)置傳輸?shù)囊曨l關(guān)鍵幀可以根據(jù)實(shí)際的帶寬情況來設(shè)置，關(guān)鍵幀數(shù)值越小帶寬使用率越大，反之關(guān)鍵幀數(shù)值越大帶寬使用率越小。對畫面質(zhì)量要求高的視頻監(jiān)控可以設(shè)置相對數(shù)值較小的關(guān)鍵幀。

5 應(yīng)用效果分析

本系統(tǒng)運(yùn)用了相對先進(jìn)與成熟的技術(shù)，在一定程度上縮小了網(wǎng)絡(luò)教學(xué)與傳統(tǒng)面授課堂的差距。且采用B/S架構(gòu)，對同樣普遍采用B/S架構(gòu)的網(wǎng)絡(luò)學(xué)習(xí)平臺來說具有很好的兼容性，可以達(dá)到系統(tǒng)間的無縫對接。

[6]中將“網(wǎng)絡(luò)學(xué)習(xí)監(jiān)控”一詞的概念界定為“通過提高學(xué)習(xí)效果和質(zhì)量而達(dá)到學(xué)習(xí)目的，充分利用計算機(jī)網(wǎng)絡(luò)和遠(yuǎn)程通信功能，對學(xué)生的網(wǎng)絡(luò)學(xué)習(xí)活動進(jìn)行計劃、檢查、評價、反饋并根據(jù)反饋結(jié)果對網(wǎng)絡(luò)學(xué)習(xí)做出相應(yīng)的控制和調(diào)節(jié)的過程”。從概念上分析，本系統(tǒng)并未完全解決網(wǎng)絡(luò)學(xué)習(xí)監(jiān)控這一問題。然而監(jiān)控方式分為外部監(jiān)控與內(nèi)部監(jiān)控，本文所論述的技術(shù)主要解決了外部監(jiān)控來達(dá)到使網(wǎng)絡(luò)教學(xué)更為貼近傳統(tǒng)面授課堂。同時本系統(tǒng)很好地解決了外部監(jiān)控涉及的問題，將網(wǎng)絡(luò)學(xué)習(xí)與傳統(tǒng)課堂學(xué)習(xí)更相近，可方便教師考慮后繼的教學(xué)設(shè)計問題，且應(yīng)用效果良好，具有一定的市場推廣價值。

6 結(jié)論

網(wǎng)絡(luò)視頻監(jiān)控作為網(wǎng)絡(luò)技術(shù)和視頻監(jiān)控技術(shù)融合的產(chǎn)物，隨著技術(shù)的進(jìn)步不斷得到發(fā)展，作為數(shù)字校園的重要組成部分，在教學(xué)管理生活中發(fā)揮越來越大的作用，很多教學(xué)活動都離不開視頻監(jiān)控的支持，網(wǎng)絡(luò)視頻監(jiān)控在數(shù)字校園的大環(huán)境中也必將繼續(xù)發(fā)揮更大的作用[3]。

B/S架構(gòu)下的Flex加Red5的視頻播放技術(shù)使遠(yuǎn)程監(jiān)控系統(tǒng)的推廣使用更加便捷高效，加之智慧校園的建設(shè)需求，該系統(tǒng)的設(shè)計思路有很大的市場應(yīng)用前景，其實(shí)現(xiàn)也很大程度上推進(jìn)了教育信息化建設(shè)。隨著設(shè)備更新?lián)Q代，本文所提供的設(shè)計思路會得到更好的支撐。視頻監(jiān)控技術(shù)需要大量的資金投入來支撐設(shè)備供需，加上學(xué)習(xí)環(huán)境需要提供多路視頻，如何降低成本同時更好地提供視頻播放，是系統(tǒng)后期維護(hù)過程中需要不斷更進(jìn)的一項(xiàng)研究。

參考文獻(xiàn)

[1] 洪寶林.基于Bb教學(xué)平臺進(jìn)行學(xué)生網(wǎng)絡(luò)課程學(xué)習(xí)狀態(tài)監(jiān)控初探[J].人力資源管理,2010(9):41-42.

[2] 秦浩,楊玉軍,胡青,等.建筑類專業(yè)技術(shù)人員繼續(xù)教育網(wǎng)絡(luò)課程學(xué)習(xí)監(jiān)控策略[J].大學(xué)教育,2014(9):37-38.

[3]葉金嶺,王青峰,余波.網(wǎng)絡(luò)視頻監(jiān)控在數(shù)字校園中的應(yīng)用研究[J].計算機(jī)光盤軟件與應(yīng)用,2014(11): 251,253.

[4] 呂海東,陸永林.基于Flex和BlazeDS推技術(shù)實(shí)現(xiàn)WEB方式實(shí)時監(jiān)控系統(tǒng)[J].自動化技術(shù)與應(yīng)用,2010,29(1):34-36.[5] 鄧夢德.Flex在遠(yuǎn)程教學(xué)系統(tǒng)開發(fā)中的應(yīng)用研究[J].現(xiàn)代教育技術(shù),2009,19(9):92-94.

[6] 琚超.網(wǎng)絡(luò)教育的學(xué)習(xí)監(jiān)控探析[J].河北工業(yè)大學(xué)學(xué)報(社會科學(xué)版),2010,2(1):41-44.

楊傳斌(1968- )，男，碩士，碩士生導(dǎo)師，主要研究方向：網(wǎng)絡(luò)安全與網(wǎng)絡(luò)工程。

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的遠(yuǎn)程學(xué)習(xí)狀態(tài)監(jiān)控系統(tǒng)的設(shè)計與實(shí)現(xiàn)[J].微型機(jī)與應(yīng)用，2016,35(20)：90-92，95.

2016-05-25)

胡珍瑩(1992- )，通信作者，女，碩士研究生，主要研究方向：網(wǎng)絡(luò)學(xué)習(xí)、教育信息化。E-mail：huzy@zjnu.cn。