基于WEB的跨平臺移動視頻監控系統

王羽+楊文娟+陳侃

摘 要：設計并實現了一種視頻監控系統，兼容不同生產商的視頻設備，具備跨平臺性，可以從各種主流桌面終端和移動終端的網頁中查看實時監控視頻，并且不依賴任何視頻播放插件，支持有線局域網、WIFI和3G信號。

關鍵詞：跨平臺 HTML5 流媒體 插件 移動視頻監控

中圖分類號：TP273 文獻標識碼：A 文章編號：1674-098X（2014）06（b）-0055-02

視頻監控系統廣泛應用于金融、交通、安防、教育、醫療、生產等眾多領域，常以獨立系統出現，或嵌入其它監控系統以及綜合管理系統成為其功能模塊。視頻監控系統的前端設備為數字攝像機和模擬攝像機，其中模擬攝像機的視頻信號通常需經過編碼器或數字硬盤錄像機（簡稱DVR），實現數字化后方可同數字攝像機一樣接入網絡中，數字攝像機、編碼器及DVR的生產商提供客戶端軟件供用戶查看視頻內容。視頻設備生產商提供的客戶端軟件絕大部分只能運行在Windows桌面環境中，少部分支持Android和IOS操作系統，且客戶端軟件一般只能訪問本品牌的設備，不具備多品牌兼容性；視頻設備生產商提供的二次開發接口（SDK）也少有Windows以外的版本。

隨著無線通信技術的高速發展和移動終端計算能力的不斷提高，應用軟件的跨平臺性能不再局限于桌面計算機的硬件架構和操作系統范疇，而是開始向移動設備延伸。只有那些既能在各種桌面操作系統上運行，也能在主流移動操作系統上運行的軟件產品，才算是真正意義上具備了跨平臺特性。結合前文所述視頻前端設備現狀，視頻監控系統追求在不同的桌面終端和移動終端上直接實現采集，解碼并播放原始視頻流，是一件難以企及的事情；而如果能夠實現在主流桌面終端和移動終端上無差別地訪問實時監控視頻，就已經在應用層面上達到了預期的效果。

該文設計實現了一種基于WEB的跨平臺移動視頻監控系統，與傳統的視頻監控系統相比，該系統可兼容各生產商的視頻設備，為Windows、Linux、Android、IOS終端提供相同的用戶體驗，且基于HTML5視頻的設計完全消除了包括插件在內的所有客戶端開發工作。

1 前臺設計

系統前臺采用B/S架構。與C/S架構相比，具有3大優勢。

首先，B/S架構利于跨平臺特性的實現。Windows、Linux、Android、IOS操作系統之間存在著顯著的差異，而Chrome、Firefox等瀏覽器針對上述操作系統發布了相應版本的軟件，為運行在瀏覽器內的應用屏蔽了操作系統差異。

其次，B/S架構便于嵌入其它系統。在實際應用中，視頻監控系統不僅會以獨立系統的形式出現，還可能作為其它監控系統或綜合管理系統的功能模塊呈現。C/S架構的軟件如果要嵌入其它系統，必須用后者提供的接口對自身進行封裝，而B/S架構的軟件只需要在HTML級別做一些簡單的修改就可以達到嵌入效果。

再次，B/S架構便于系統開發與部署。若采用C/S架構則需要針對每一種操作系統開發相應的客戶端軟件版本，還需要為所有的客戶端都進行安裝、維護和升級工作。而B/S架構系統的所有開發、維護和升級工作都在服務端完成，有效降低了開發和運維成本。

但是直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。大多數的視頻是通過插件來顯示的，然而并非所有瀏覽器都擁有同樣的插件。以使用率最高的視頻顯示插件Flash為例，Adobe已于2011年11月曾宣布，未來將專注于PC上的Flash，針對移動設備Flash的工作將重點放在幫助開發人員使用Adobe AIR為所有應用商店開發原生應用程序，而不再為新的移動設備（芯片、瀏覽器、OS版本等）開發Flash Player。這意味著，如果希望WEB視頻監控系統在移動終端上具備良好的表現，就必須放棄對插件的依賴。

另一種常見的實現方法是將應用軟件封裝為ActiveX控件，這也是目前視頻設備生產商開發WEB版本應用時采用的主要方式。但遺憾的是，ActiveX控件只能在Windows操作系統的Internet Explorer瀏覽器使用。

該文采用了HTML5標準中的視頻技術。HTML5是HTML的下一個主要的修訂版本，它規定了一種通過video元素來包含視頻的標準方法。當前，video元素支持三種視頻格式，如表1所示：Ogg指帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件；MPEG4指帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件；WebM指帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件。瀏覽器對他們的支持如表1所示：

考慮到H.264存在專利許可問題，并且WebM發布時間較短，本文暫時選用了自由和開源的Ogg文件格式。至此，系統前臺就能夠以一種極為簡單的方式實現，只需在網頁中加入一個HTML標簽：

2 后臺設計

如前文所述，由于視頻設備生產商提供的SDK多為Windows版本，難以在桌面終端和移動終端上直接實現解碼播放，所以本文采用了基于流媒體服務器推送的形式，即在服務端進行視頻采集和解碼工作，再由服務器向頁面請求者推送視頻流。

系統后臺由前端采集模塊、流媒體發布模塊和編碼轉換模塊等三部分組成，如圖1所示。前端采集模塊對視頻設備生產商提供的SDK進行封裝，向視頻設備請求實時流，并監聽RTSP連接；流媒體發布模塊存儲視頻編碼配置信息，緩沖視頻流，處理來自瀏覽器的視頻查看請求；編碼轉換模塊是連接編碼轉換模塊和流媒體發布模塊的橋梁，將RTSP流轉為HTTP流，并實現視頻編碼轉換。

2.1 前端采集模塊

前端采集模塊是一個可選模塊，主要功能是將前端設備生產商私有的視頻流轉換成標準RTSP流。目前已有部分前端網絡設備支持RTSP協議，前端采集模塊對這些設備而言是透明的。對于那些尚不支持RTSP協議的視頻設備，前端采集模塊調用設備生產商提供的SDK連接視頻設備，獲取視頻流并進行解碼，同時監聽RTSP連接請求，將視頻圖像發送至RTSP客戶端。對于不同生產商提供的SDK，前端采集模塊將其網絡連接和解碼播放接口封裝成統一形式的動態庫，當需要支持新的設備時，只需要開發新的動態庫即可。

2.2 流媒體發布模塊

流媒體發布模塊采用ffserver實現，ffserver是一個HTTP多媒體實時廣播流服務器，支持對同一輸入流以多達20種格式進行訪問。流媒體發布模塊啟動后，會根據配置文件創建若干視頻流緩沖區例如feed1，feed2等，緩沖區的內部被分為若干個4096字節的塊，其中第一個塊存儲該緩沖區的配置信息和播放位置信息，其余的塊存儲視頻流內容。當流媒體發布模塊收到播放視頻的HTTP請求時，檢索當前播放內容所存儲的塊，從這個塊開始依次讀取數據，組成完整視頻幀發送給客戶端。

緩沖文件頭的部信息來自配置文件，其中的主要配置信息包括三部分。

（1）服務信息：服務端口，最大HTTP連接數，最大客戶端連接數，最大帶寬等。

（2）緩沖信息：緩沖文件位置、大小。當有視頻流向緩沖文件寫入達到預設大小時，后續文件會覆蓋緩沖文件中頭部以外的部分。

（3）視頻流信息：文件格式、碼率、視頻編碼格式、音頻編碼格式，視頻尺寸等。根據前臺HTML5視頻支持的情況，應將文件格式配置為ogg，音視頻編碼格式分別配置為Vorbis和Theora。視頻尺寸影響視頻在頁面中顯示的大小，碼率影響視頻的清晰程度，可根據實際需要進行配置。

2.3 編碼轉換模塊

編碼轉換模塊采用ffmpeg實現，ffmpeg是一個可以運行音頻和視頻錄制、格式轉換、并具備流讀寫功能的自由軟件，包含了一個音視頻解碼庫libavcodec，和一個音視頻格式轉換庫libavformat。

編碼轉換模塊繼流媒體發布模塊之后啟動，它啟動時帶兩個參數。第一個參數的形式類似于“rtsp：//host：port/domain”向前端采集模塊去請求RTSP流；第二個參數的形式類似于“http：//host：port/feed1.ffm”指向流媒體發布模塊上的緩沖區。

編碼轉換模塊啟動后會檢測RTSP輸入是否能夠正確的獲取和解析，然后主動向流媒體發布模塊發起兩次連接。第一次是一個短暫的連接，編碼轉換模塊從對方獲取視頻流配置信息，并在后續的工作中使用這些信息進行編碼。第二次則是一個長久的連接，編碼轉換模塊將編碼后的視頻數據源源不斷地發送給流媒體發布模塊，并由后者寫入的緩沖區的相應塊中。

前端采集模塊、流媒體發布模塊和編碼轉換模塊可以運行在同一臺計算機上，也可以分別運行在不同的計算機上。系統后臺搭建完成后，可以在桌面終端或者移動終端上，支持HTML5的瀏覽器地址欄輸入“http：//host：port/video.ogg”，訪問到準實時的監控視頻。通過將該地址以video標簽添加到其它網頁中，可以將視頻監控的實時畫面嵌入到任何基于WEB的監控系統或綜合管理系統，甚至支持HTTP或RTSP視頻流的C/S系統客戶端中。

3 訪問與流量管理

在工程實際應用中，系統除了上述內容之外，還包括一個訪問與流量管理模塊，主要任務如下：

（1）對流媒體發布模塊進行維護；

（2）收到來自網頁的新的視頻請求時調用編碼轉換模塊；

（3）如果視頻源的前端設備不支持RTSP，則調用前端采集模塊；

（4）如果對某一視頻源的所有請求均已離線，則關閉相應的編碼轉換模塊。

除了實時性之外，流量也是移動視頻監控系統需要考量的重要指標。經實驗檢測，在局域網內訪問實時視頻存在大約3 s左右的延時；3G網絡中略長于3 s，視頻載入時間視網速快慢而異；音視頻流量約為80 KB/s時，可以在移動終端上看到較清晰的圖像，滿足3G網絡的要求。

4 結語

該文設計并實現了一種基于WEB的跨平臺移動視頻監控系統，可以從各種主流桌面終端和移動終端，在網頁中以非插件的形式查看實時監控視頻，并且支持有線局域網、WIFI和3G信號。后續的研究工作將關注如何識別瀏覽器版本、屏幕分辨率、操作系統以及網絡環境等外在因素，自動從主碼流和子碼流中為用戶進行選擇，為網絡條件好、屏幕分辨率高的終端用戶提供更為清晰的畫質；為網速較慢、屏幕分辨率低的終端用戶提供更為流暢的播放速度。

參考文獻

[1] 齊鴻儒，童任，韓鵬.移動視頻監控系統的設計與實現[J].計算機仿真， 2011，24（8）：109-111，154.

[2] QI Hong-ru， TONG Ren， HAN Peng. A Novel Real-time Mobile Video Surveillance System[J]. Computer Simulation， 2011，24（8）：109-111，154.

[3] 肖東暉，林立.電力系統統一視頻監控平臺解決方案[J].電力系統自動化，2013，37（5）：74-80.

[4] XIAO Donghui， LIN Li. Solution Scheme of Integrated Video Surveillance Platform of Power System[J].Automation of Electric Power Systems， 2013，37（5）：74-80.

[5] 王永利.分布式網絡視頻監控系統的架構[J]. 自動化儀表，2010，31（7）：42-44.

[6] WANG Yongli. Architecture of Distributed Networked Video Monitoring System[J]. Process Automation Instrumentation， 2013，37（5）：74-80.

[7] Adobe.Flash to Focus on PC Browsing and Mobile Apps.Adobe Feature Blogs [EB/OL].http：//blogs.adobe.com/conversations/2011/11/flash-focus.html. 2011.

[8] Simon Pieters.HTML5 differences from HTML4 [EB/OL]. W3C， http：//www.w3.org/TR/html5-diff， 2010.endprint