基于Flex的網(wǎng)絡視頻監(jiān)控客戶端設計與實現(xiàn)

寧佳熠，孟利民，趙俊波

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

0 引言

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

1 系統(tǒng)總體設計

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

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

2 Flex客戶端設計與實現(xiàn)

2.1 Flex 技術(shù)介紹

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

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

2.2 Flex客戶端設計

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

圖2 Flex客戶端軟件模塊

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

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

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

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

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

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

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

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

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

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

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

3 客戶端測試

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

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

表1 測試結(jié)果

圖5 Flex客戶端界面

圖6 MFC客戶端界面

4 結(jié)束語

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

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

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

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

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

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