寧佳熠，孟利民，趙俊波

(浙江工業(yè)大學(xué)省通信網(wǎng)應(yīng)用技術(shù)研究重點(diǎn)實(shí)驗(yàn)室，浙江杭州310023)

0 引言

視頻監(jiān)控以其直觀、方便、信息內(nèi)容豐富而廣泛應(yīng)用于安保、監(jiān)控等場(chǎng)合，成為商業(yè)、交通、住宅等領(lǐng)域防范的重要手段。由于數(shù)字視頻壓縮編碼技術(shù)的成熟、多媒體計(jì)算機(jī)性能的提高和網(wǎng)絡(luò)帶寬的增大，網(wǎng)絡(luò)視頻監(jiān)控成為當(dāng)今監(jiān)控技術(shù)的主流［1］。近些年，隨著WEB技術(shù)的發(fā)展和更注重用戶交互作用的WEB2.0應(yīng)用技術(shù)的普及，以Flex為代表的富客戶端技術(shù)逐漸進(jìn)入了人們的視野。Flex能夠提供更加絢麗的互動(dòng)界面和更好的用戶體驗(yàn)，各種多媒體資源能夠以更加便捷、多彩的方式向用戶展示，并和系統(tǒng)的其他功能進(jìn)行無(wú)縫的集成［2］。Flex技術(shù)與網(wǎng)絡(luò)視頻監(jiān)控結(jié)合在一起，可以為網(wǎng)絡(luò)視頻監(jiān)控用戶提供更加優(yōu)質(zhì)的視頻監(jiān)控畫面和更豐富、更具有交互性與響應(yīng)性的用戶體驗(yàn)。為此，本文設(shè)計(jì)了一種基于Flex的網(wǎng)絡(luò)視頻監(jiān)控客戶端，重點(diǎn)介紹了Flex客戶端模塊設(shè)計(jì)、視頻播放模塊和設(shè)備列表模塊的實(shí)現(xiàn)方法。

1 系統(tǒng)總體設(shè)計(jì)

網(wǎng)絡(luò)視頻監(jiān)控系統(tǒng)由視頻采集端、服務(wù)器端和客戶端3部分組成。本項(xiàng)目設(shè)計(jì)中，視頻采集端利用GM8180將攝像頭采集的模擬信號(hào)數(shù)據(jù)壓縮編碼為H.264數(shù)據(jù)，以RTP協(xié)議打包發(fā)送到MDS服務(wù)器。在服務(wù)器端中，首先MFC利用Directshow接收MDS服務(wù)器轉(zhuǎn)發(fā)的H.264視頻流數(shù)據(jù)，然后MFC將H.264視頻流數(shù)據(jù)推送到流媒體服務(wù)器Red5中轉(zhuǎn)。在Flex客戶端中，首先接收服務(wù)器端轉(zhuǎn)發(fā)的視頻流數(shù)據(jù)，然后送至Flex顯示界面播放。整個(gè)系統(tǒng)設(shè)計(jì)方案如圖1所示。

圖1 基于Flex的網(wǎng)絡(luò)視頻監(jiān)控系統(tǒng)總體設(shè)計(jì)框架

2 Flex客戶端設(shè)計(jì)與實(shí)現(xiàn)

2.1 Flex 技術(shù)介紹

Flex是一種能提供快速、方便的創(chuàng)建富因特網(wǎng)應(yīng)用程序的技術(shù)，也是一種新的語(yǔ)言，是用于構(gòu)建和維護(hù)在所有主要瀏覽器、桌面和操作系統(tǒng)一致地部署的極具表現(xiàn)力的Web應(yīng)用程序的高效率的開放源碼框架［3］。

Flex應(yīng)用程序框架由MXML、AcitonScript3.0及Flex類庫(kù)3部分組成，一般來(lái)說(shuō)，開發(fā)人員利用MXML定義應(yīng)用程序用戶界面元素，利用ActoinScript定義客戶端邏輯及程序控制。Flex類庫(kù)中包含的大量的組件、管理器及行為等作為輔助，來(lái)加快整個(gè)開發(fā)的進(jìn)程，程序編寫完成后，通過(guò)Flex編譯器將其編譯為字節(jié)碼，最終形成以SWF為擴(kuò)展的可執(zhí)行的二進(jìn)制文件［4］。

2.2 Flex客戶端設(shè)計(jì)

Flex客戶端主要完成的功能有用戶注冊(cè)登錄、網(wǎng)絡(luò)視頻流接受播放、云臺(tái)控制、視頻錄像設(shè)置、設(shè)備列表搜索顯示、監(jiān)控畫面參數(shù)調(diào)節(jié)等。根據(jù)上述功能需求和用戶實(shí)際應(yīng)用的需要，將整個(gè)Flex客戶端分成6大模塊。Flex客戶端軟件模塊如圖2所示。

圖2 Flex客戶端軟件模塊

用戶登錄模塊用于用戶登錄、注冊(cè)以及密碼的修改;視頻播放模塊用于接受Red5視頻流、播放實(shí)時(shí)監(jiān)控畫面、關(guān)閉監(jiān)控畫面、播放模式切換等;設(shè)備列表模塊用于搜索在線監(jiān)控設(shè)備，顯示在線設(shè)備名稱、設(shè)備狀態(tài);云臺(tái)控制模塊用于控制云臺(tái)、云臺(tái)參數(shù)設(shè)置以及鏡頭調(diào)焦等;視頻錄像模塊用于本地實(shí)時(shí)錄像、錄像回放以及錄像參數(shù)的設(shè)置;監(jiān)控畫面設(shè)置模塊用于調(diào)節(jié)監(jiān)控畫面質(zhì)量，比如亮度、飽和度、色彩、音量等。

2.3 Flex客戶端實(shí)現(xiàn)

本系統(tǒng)客戶端軟件設(shè)計(jì)中，F(xiàn)lex客戶端界面是嵌在基于VC平臺(tái)的MFC框架中的，所以Flex客戶端功能的實(shí)現(xiàn)都是先由Flex和后臺(tái)MFC交互，再由MFC與MDS服務(wù)器交互完成的。下面重點(diǎn)介紹視頻播放模塊和設(shè)備列表模塊的實(shí)現(xiàn)方法。

2.3.1 視頻播放模塊實(shí)現(xiàn)

在本系統(tǒng)設(shè)計(jì)中，實(shí)時(shí)監(jiān)控視頻播放先由MFC利用Directshow接收MDS服務(wù)器轉(zhuǎn)發(fā)的H.264視頻流，然后MFC利用librtmp協(xié)議第三方庫(kù)將視頻流推送到流媒體服務(wù)器Red5，最后Flex接收Red5視頻流并且播放。視頻播放模塊實(shí)現(xiàn)流程如圖3所示。

首先，創(chuàng)建一個(gè)NetConnection對(duì)象，NetConnection類作用是連接到Red5服務(wù)器中。其次，創(chuàng)建一個(gè)NetSteam對(duì)象。NetStream類作用是通過(guò)NetConnection對(duì)象提供的連接，打開Flex和Red5的單向流連接。再次，創(chuàng)建Video對(duì)象，調(diào)用Video類的attachNetStream事件直接顯示視頻流［5］。最后，將Video添加至Flex的VideoDisplayer組件中播放視頻監(jiān)控畫面。經(jīng)過(guò)這4個(gè)步驟的操作，MFC推送到Red5服務(wù)器的視頻流就會(huì)在Flex上被加載播放。

圖3 視頻播放模塊實(shí)現(xiàn)流程圖

2.3.2 設(shè)備列表模塊實(shí)現(xiàn)

設(shè)備列表模塊主要實(shí)現(xiàn)點(diǎn)擊搜索設(shè)備按鈕，設(shè)備列表區(qū)顯示在線設(shè)備名和設(shè)備狀態(tài)。設(shè)備列表模塊實(shí)現(xiàn)流程圖如圖4所示。

圖4 設(shè)備列表模塊實(shí)現(xiàn)流程圖

首先，點(diǎn)擊搜索設(shè)備按鈕，F(xiàn)lex通過(guò)FSCommand命令發(fā)送搜索設(shè)備請(qǐng)求給MFC。MFC函數(shù)體收到Flex搜索設(shè)備請(qǐng)求后，給MDS服務(wù)器發(fā)送請(qǐng)求設(shè)備消息。其次，MDS服務(wù)器將在線設(shè)備列表信息(設(shè)備名和設(shè)備狀態(tài))發(fā)送給MFC。再次，MFC利用CallFunction()函數(shù)將MDS服務(wù)器返回的設(shè)備列表信息(XML格式)發(fā)送給Flex客戶端。最后，F(xiàn)lex將獲取的在線設(shè)備名、設(shè)備狀態(tài)存儲(chǔ)在ArrayConnection集合中，作為Flex組件DataGrid的數(shù)據(jù)源顯示。

3 客戶端測(cè)試

在網(wǎng)絡(luò)情況正常條件下，對(duì)本文設(shè)計(jì)的基于Flex的網(wǎng)絡(luò)視頻監(jiān)控客戶端進(jìn)行測(cè)試，分別對(duì)用戶登錄模塊、視頻播放模塊、設(shè)備列表模塊、云臺(tái)控制模塊、視頻錄像模塊、監(jiān)控畫面設(shè)置模塊進(jìn)行了操作，軟件運(yùn)行正常，圖像較清晰流暢，無(wú)明顯時(shí)延，用戶體驗(yàn)較好，達(dá)到了實(shí)時(shí)監(jiān)控的效果。

在相同條件下，對(duì)基于MFC客戶端(直接由MFC完成設(shè)計(jì)界面，視頻流沒有Red5中轉(zhuǎn))和基于Flex客戶端在視頻延時(shí)、視頻畫面流暢度、視頻畫面清晰度以及客戶端用戶體驗(yàn)等方面進(jìn)行比較測(cè)試，測(cè)試結(jié)果如表1所示，F(xiàn)lex客戶端如圖5所示，MFC客戶端如圖6所示。

表1 測(cè)試結(jié)果

圖5 Flex客戶端界面

圖6 MFC客戶端界面

4 結(jié)束語(yǔ)

本文設(shè)計(jì)的基于Flex網(wǎng)絡(luò)視頻監(jiān)控客戶端可以實(shí)際應(yīng)用在現(xiàn)實(shí)生活的視頻監(jiān)控、視頻會(huì)議以及視頻教學(xué)等眾多領(lǐng)域，而且監(jiān)控終端不局限于客戶端軟件，還可以是網(wǎng)頁(yè)及Flash Player。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，基于Flex的網(wǎng)絡(luò)視頻監(jiān)控客戶端必將有廣闊的市場(chǎng)空間和良好的發(fā)展前景。

［1］鄒純宏.基于Directshow和RTP的網(wǎng)絡(luò)視頻監(jiān)視系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［D］.哈爾濱:哈爾濱理工大學(xué)，2007.

［2］謝佶蕓.基于Flex的企業(yè)級(jí)富客戶端系統(tǒng)的研究與設(shè)計(jì)［D］.杭州:浙江大學(xué)，2010.

［3］張亞飛.至理:精通Flex網(wǎng)絡(luò)開發(fā)技術(shù)［M］.北京:電子工業(yè)出版社，2009:12－13.

［4］孫英姝.基于Flex的校園視頻教學(xué)資源共享網(wǎng)站的設(shè)計(jì)［J］.科技信息，2010，(24):213－214.

［5］呂輝.Flash/Flex ActionScript3.0交互式開發(fā)詳解［M］.北京:電子工業(yè)出版社，2008:312－313.