基于H.264的Web視頻監控客戶端設計與實現

摘 要：網絡視頻監控已經成為社會安全防范領域的重要手段。闡述了基于B/S架構和H.264編碼的網絡視頻監控客戶端的設計與實現。重點介紹了用RTP協議接收H.264視頻流數據的方法；H.264視頻的解碼以及播放的方法；ActiveX控件在視頻監控客戶端中的應用方法。實驗結果表明，該客戶端能夠通過瀏覽器對監控現場進行實時監控，且具有使用方便等特點，適合用于遠程監控。

關鍵詞：視頻監控； B/S； ActiveX； H.264； RTP； DirectDraw

中圖分類號：TN912-34; TP393文獻標識碼：A文章編號：1004-373X(2011)19-0027-04

Design and Implementation of Web Client for Video Monitoring Based on H.264

LIU Long-fei， ZHANG Jian-wu

(College of Communication Engineering， Hangzhou Dianzi University， Hangzhou 310018， China)

Abstract： Web video monitoring has become an important mean for the society security. The design and implementation of client for web video monitoring based on B/S and H.264 are elaborated. The method of receiving H.264 data with RTP protocol， the video decoding and display of H.264 and the application method of ActiveX component in video monitoring client are introduced. The experimental result shows that the client can achieve the real-time monitoring on remote place， and it′s easy to use， suits for remote monitoring.

Keywords： video monitoring； B/S； H.264； RTP； DirectDraw

0 引 言

視頻監控作為安防系統的重要組成部分，以其直觀、方便、時效性強等特點，在各種場合得到了廣泛的應用，越來越成為保衛公共安全和個人生命財產安全的重要工具。隨著Web技術，嵌入式技術以及視頻壓縮技術的不斷成熟，網絡視頻監控系統也得到了進一步的發展。然而由于目前的網絡狀況還不夠好，傳統的視頻壓縮技術如MPEG-4的壓縮率還不夠高，致使在擁塞比較嚴重的網絡環境中進行視頻監控的實時效果還不是很好。

H.264作為新一代的視頻編碼標準，采用以往成熟的編碼技術，在追求更高的編碼效率和簡潔的表達形式的同時，也提供了非常好的視頻質量，是當前最高效的視頻壓縮方法［1］，在安防行業有著非常大的前景。

本文將介紹基于H.264的B/S架構的網絡視頻監控客戶端的設計與實現，并就實際開發過程中所涉及的一些關鍵技術進行重點討論。

1 系統總體架構

監控系統由服務器端和客戶端組成，采用B/S架構，如圖1所示。

圖1 網絡視頻監控總體架構在B/S結構下，用戶工作界面通過WWW瀏覽器來實現，極少部分事務邏輯在前端(Browser)實現，主要事務邏輯在服務器端(Server)實現［2］。B/S架構的優點如下：

(1) 大大簡化了客戶端電腦載荷，減輕了系統維護與升級的成本和工作量，降低了用戶的總體成本。

(2) B/S結構是一次到位開發，能實現不同人員，從不同地點，以不同的接入方式(比如LAN，WAN，Internet/Intranet等)訪問。

(3) B/S結構利用了不斷成熟的瀏覽器技術，結合瀏覽器的多Script語言(CGI，VBScript，JavaScript，PHP)和ActiveX技術，用通用瀏覽器實現了原來需要復雜專用軟件才能實現的強大功能，并節約了開發成本［3］。

該監控系統前端設備采用嵌入式系統，包括DM365嵌入式平臺、攝像頭、云臺等。視頻服務器搭建于DM365平臺上，采用了可用于Linux平臺的Boa服務器為客戶端提供Web服務。DM365平臺負責把攝像頭采集到的模擬信號轉化為數字信號，然后將其壓縮為H.264格式，再以RTP格式打包后發送。監控前端采用嵌入式平臺，可使監控前端具有體積小，便于安裝布署，成本較低等特點。

客戶端采用IE8瀏覽器，通過在Web網頁中嵌入ActiveX控件來實現。客戶在通過身份認證后可訪問到現場的實時監控畫面，并可以進行云臺控制，畫面縮放，保存回放等操作。

本監控系統中客戶端的設計思路是：在前端DM365嵌入式平臺上移植Boa服務器用于提供Web服務。將視頻的接收、解碼、播放、保存回放等功能寫入ActiveX控件中，并通過Web服務器發布。Web服務器接收客戶端的請求，對視頻進行實時的采集，壓縮以及發送，并可對前端云臺等進行相應的操作。用戶通過瀏覽器訪問Web服務器時，瀏覽器便會自動下載該控件，實現遠程實時監控。

2 客戶端軟件的設計

客戶端軟件主要實現視頻數據的實時接收，播放，保存和回放，以及對前端云臺的控制。該軟件用VC++6.0來開發。VC提供了MFC ActiveX ControlWizard，使得用MFC開發ActiveX時不必理會控件接口的細節，可以把注意力集中控件本身的功能上［4］。客戶端軟件模塊如圖2所示。

圖2 客戶端軟件模塊用戶驗證模塊對訪問服務器的用戶進行身份驗證，以確定其訪問權限；網絡接收模塊用于接收從網絡傳輸過來的視頻數據包，并進行拆包，還原視頻數據；實時播放模塊實現對接收到的視頻數據進行解碼和播放；保存回放模塊用于將實時視頻保存到本地，在需要的時候可進行回放；云臺控件模塊，用于控制云臺，以及鏡頭調焦等；系統管理模塊用于管理員對前端設備進行參數設置、網絡配置以及用戶信息管理等。

下面將重點介紹網絡接收模塊和解碼播放模塊。

2.1 網絡接收模塊設計與實現

網絡傳輸采用RTP流媒體傳輸協議和UDP協議。

RTP協議(Real-time Transport Protocol)是Internet上一種流媒體傳輸協議。相比其他傳統的傳輸協議，RTP協議更加注重數據傳輸的實時性。雖然RTP是傳輸層協議，但它并沒有作為OSI體系結構中單獨一層來實現。RTP協議通常針對一個具體的應用來提供服務，也就是說，RTP只提供了協議框架，開發者可以根據具體的應用來對協議進行擴展［5］。本設計中使用了專門用于傳輸H.264視頻的RTP格式。

UDP(User Datagram Protocol)是ISO參考模型中一種無連接的傳輸層協議，提供面向事務的簡單不可靠信息傳送服務。它不屬于連接型協議，因而具有資源消耗小，處理速度快的優點，所以通常音頻、視頻和普通數據在傳送時使用UDP較多。

本設計中，數據的傳輸是由RTP和UDP一起完成的。UDP協議只負責數據包的傳輸而不管數據的傳輸時間順序，RTP的數據單元是由UDP來承載的。H.264視頻在發送前為一個個NAL單元，每個NAL單元被按照RTP格式進行裝后，再以UDP協議進行發送，其承載層次結構如圖3所示。由于UDP包所能傳輸的最大數據量為1 472 B，而一個NAL單元的大小經常會超過這個數量，所以發送前需要將NAL單元進行拆分后再進行RTP打包［6］。接收端收到UDP數據后從中取出RTP包，再將從多個RTP包負載中取出的NAL分片數據合并為一個NAL單元。

圖3 數據包承載層次圖由于UDP協議只負責數據的傳輸而不管數據的傳輸時間順序，所以在接收端收到的RTP包可能會亂序。重組NAL單元時，如果各分片的順序錯亂將會導致圖像失真，甚至無法正常播放，所以在重組NAL單元前需要對RTP包先進行排序，以確保重組的正確性。RTP接收模塊的程序流程圖如圖4所示。

RTP接收，拆包在本設計中用一個線程來實現，在線程中循環調用UDP接收函數recvfrom()，再將緩存中接收到的RTP數據包進行排序，然后調用RTP拆包函數Parse_RTP_Packet()取出RTP包負載中的數據，最后將數據組裝成NAL單元。

2.2 解碼播放模塊的實現

H.264(H.264/AVC)是ITU_T的視頻編碼專家組和ISO/IEC的活動圖像專家組(MPEG)聯合制定的新的視頻編碼標準。其目的是為了在低比特率下獲得很好的圖像壓縮效果并能適應不同的網絡環境。H.264的設計方案包含兩個層次，視頻編碼層(Video Coding Layer，VCL)和網絡抽象層(Network Abstraction Layer，NAL)，視頻編碼層主要致力于有效地表示視頻內容，網絡抽象層格式化VCL視頻表示，提供頭部信息，適合多種傳輸和存儲媒體［5］。

圖4 RTP拆包流程由于H.264格式的視頻在Windows下不自帶解碼器，所以在客戶端接收到的H.264視頻數據不能直接調用Windows組件進行解碼。本設計采用開源解碼庫FFMPEG進行H.264視頻的解碼。視頻解碼后為YUV格式的數據，再使用Windows組件DirectDraw實現對YUV數據的播放。DirectDraw是微軟發行的DirectX軟件SDK的API。DirectDraw提供了一個比GDI層次更高、功能更強、操作更有效、速度更快的應用程序圖像引擎［7］。

解碼播放H.264視頻的流程如圖5所示。

圖5 H.264解碼播放流程本模塊用另一個線程來實現。在該線程中循環調用FFMPEG解碼函數avcodec_decode_video()進行解碼。該線程與RTP接收模塊是兩個并發的線程。由于兩個模塊要對相同的內存區域(RTP拆包后組裝成的NAL所存放的區域與解碼器讀取數據的區域為同一區域)以及某些全變量進行操作，為避免內存讀寫的相互沖突的情況發生，本計采用了關鍵代碼段來保證線程的同步。關鍵代碼段也稱臨界區［8］，它是指一個小代碼段，在代碼能夠執行前，它必須獨占對某些資源的訪問權。相比其他線程同步方法，關鍵代碼段的同步速度更快。

在H.264解碼成功獲取一幀圖像(YUV格式)后，有兩種方法來顯示一幀圖片。一種是將YUV轉化為RGB格式再顯示，但這樣做會使一幀圖片的數據量增大，所耗費的系統資源會比較多，在系統資源有限的情況下實時播放不夠流暢。另一種是調用DirectDraw直接在窗口進行畫屏，便可顯示一幀圖片，具有顯示速度較快，實時播放效果好的特點。本設計中用DirectDraw實現圖片的顯示，在測試中播放畫面較流暢，程序耗費系統資源較少。

3 ActiveX控件及其在Web中的實現

基于B/S架構的軟件設計需要用ActiveX控件來實現。ActiveX控件一般用*.ocx格式的文件來封裝。ActiveX控件是一種面向對象的組件系統，每中組件對象都可提供各種不同的功能，不同軟件供應商提供的組件可在二進制級進行連接和通信［9］，組件與組件之間的相互作用通過接口來實現。

ActiveX控件用于Web的過程是將控件嵌入主頁中，用戶通過瀏覽器訪問該主頁時，將主頁中的控件下載，并在用戶機器上注冊，以后就可在用戶的瀏覽器上運行。控件下載一次后就駐留在用戶本地機器上，下次再訪問相同的主頁時，可不再下載該控件，而是直接運行用戶本地的控件。

要把ActiveX控件加入HTML網頁中首先要將其進行封裝成*.cab格式的文件。*.cab格式是一種壓縮文件，可用于存儲多個或單個壓縮文件。使用這種格式進行網絡軟件安裝時，可減小文件大小，并縮短下載時間。本設計用到的cab制作工具是cabarc.exe。制作cab文件所需文件為*.ocx和*.inf文件，利用cabarc.exe可將這兩個文件壓縮為*.cab。其中*.inf文件包含了控件的class id，版本號，以及在服務器中的路徑信息。將ActiveX控件嵌入HTML網頁的代碼如下：

CLASSID=″CLSID:04529E18-A655-4C77-9C29-

EB63EA88EF0″

CODEBASE=″http://****.avtivex/monitor.cab″

WIDTH=640

HEIGHT=480

ALIGN=center >

最后將生成的HTML網頁放入到Web服務器中，客戶端在訪問時可自動下載安裝。圖6為監控系統客戶端的實時運行情況。系統服務器端每秒發送25幀H.264圖像，客戶端通過IE瀏覽器便可進行畫面實時顯示和操作，且圖像較清晰流暢，無明顯時延，達到了實時監控的效果。

圖6 監控系統客戶端另外，網頁中需要實現客戶端與服務器的交互。由于監控前端使用的是嵌入式Boa服務器，所以需使用CGI腳本來實現客戶端與服務器端的動態交互［10］。

4 結 語

本設計為基于Web的視頻監控系統，客戶端使用瀏覽器便可實現對現場的實時監控，這使客戶端操作更加簡便，便于遠程維護和操作，相對于目前的基于PC的視頻監控系統有更強的通用性。視頻編碼采用了H.264技術，大大降低了數據的傳輸量，同時能在較差的網絡環境中表現出較好的健壯性，使Web視頻監控質量得到了有效的提升。隨著網絡技術的發展，基于H.264的Web視頻監控系統必將有廣闊的市場空間和良好的發展前景。

參 考 文 獻

［1］ 齊俊杰，胡潔，麻信洛.流媒體技術入門與提高[M]2版.北京：國防工業出版社.2009.

［2］ 孫鐵鑫.淺談B/S和C/S結構的對比[J]今日科苑，2007(6):42.

［3］ 張良銀.淺論C/S和B/S體系結構[J]工程地質計算機應用，2006(4):20-23，28.

［4］ 宇鵬，王曉峰，李云飛.Visual C++實踐與提高ActiveX篇[M]北京:中國鐵道出版社，2001.

［5］ 畢厚杰.新一代視頻壓縮標準:H.264/AVC[M]北京:人民郵電出版社，2007.

［6］ WENGER S， HANNUKSELA M M， STOCKHAMMER T. RFC 3984. RTP payload format for H.264 video [S] [S.l.]: [s.n.]， 2005.

［7］ MSDN Library. DirectDraw [EB/OL] [2007-08-13] http://msdn.microsoft.com/en-us/library/aa917136.aspx.

［8］ 孫鑫，余安萍.VC++深入詳解[M]北京:電子工業出版社，2010.

［9］ 夏驚濤，穆道生.基于Activex控件的視頻監控系統客戶端編程[J]廣播與電視技術，2006，33(1)：85-87.

［10］ 黃倩，閔華松.基于ARM的移動視頻監控系統[J]現代電子技術，2010，33(1):148-152.