基于WEB的跨平臺移動視頻監(jiān)控系統(tǒng)

王羽+楊文娟+陳侃

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

關(guān)鍵詞：跨平臺 HTML5 流媒體 插件 移動視頻監(jiān)控

中圖分類號：TP273 文獻(xiàn)標(biāo)識碼：A 文章編號：1674-098X（2014）06（b）-0055-02

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

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

該文設(shè)計(jì)實(shí)現(xiàn)了一種基于WEB的跨平臺移動視頻監(jiān)控系統(tǒng)，與傳統(tǒng)的視頻監(jiān)控系統(tǒng)相比，該系統(tǒng)可兼容各生產(chǎn)商的視頻設(shè)備，為Windows、Linux、Android、IOS終端提供相同的用戶體驗(yàn)，且基于HTML5視頻的設(shè)計(jì)完全消除了包括插件在內(nèi)的所有客戶端開發(fā)工作。

1 前臺設(shè)計(jì)

系統(tǒng)前臺采用B/S架構(gòu)。與C/S架構(gòu)相比，具有3大優(yōu)勢。

首先，B/S架構(gòu)利于跨平臺特性的實(shí)現(xiàn)。Windows、Linux、Android、IOS操作系統(tǒng)之間存在著顯著的差異，而Chrome、Firefox等瀏覽器針對上述操作系統(tǒng)發(fā)布了相應(yīng)版本的軟件，為運(yùn)行在瀏覽器內(nèi)的應(yīng)用屏蔽了操作系統(tǒng)差異。

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

再次，B/S架構(gòu)便于系統(tǒng)開發(fā)與部署。若采用C/S架構(gòu)則需要針對每一種操作系統(tǒng)開發(fā)相應(yīng)的客戶端軟件版本，還需要為所有的客戶端都進(jìn)行安裝、維護(hù)和升級工作。而B/S架構(gòu)系統(tǒng)的所有開發(fā)、維護(hù)和升級工作都在服務(wù)端完成，有效降低了開發(fā)和運(yùn)維成本。

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

另一種常見的實(shí)現(xiàn)方法是將應(yīng)用軟件封裝為ActiveX控件，這也是目前視頻設(shè)備生產(chǎn)商開發(fā)WEB版本應(yīng)用時采用的主要方式。但遺憾的是，ActiveX控件只能在Windows操作系統(tǒng)的Internet Explorer瀏覽器使用。

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

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

2 后臺設(shè)計(jì)

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

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

2.1 前端采集模塊

前端采集模塊是一個可選模塊，主要功能是將前端設(shè)備生產(chǎn)商私有的視頻流轉(zhuǎn)換成標(biāo)準(zhǔn)RTSP流。目前已有部分前端網(wǎng)絡(luò)設(shè)備支持RTSP協(xié)議，前端采集模塊對這些設(shè)備而言是透明的。對于那些尚不支持RTSP協(xié)議的視頻設(shè)備，前端采集模塊調(diào)用設(shè)備生產(chǎn)商提供的SDK連接視頻設(shè)備，獲取視頻流并進(jìn)行解碼，同時監(jiān)聽RTSP連接請求，將視頻圖像發(fā)送至RTSP客戶端。對于不同生產(chǎn)商提供的SDK，前端采集模塊將其網(wǎng)絡(luò)連接和解碼播放接口封裝成統(tǒng)一形式的動態(tài)庫，當(dāng)需要支持新的設(shè)備時，只需要開發(fā)新的動態(tài)庫即可。

2.2 流媒體發(fā)布模塊

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

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

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

（2）緩沖信息：緩沖文件位置、大小。當(dāng)有視頻流向緩沖文件寫入達(dá)到預(yù)設(shè)大小時，后續(xù)文件會覆蓋緩沖文件中頭部以外的部分。

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

2.3 編碼轉(zhuǎn)換模塊

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

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

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

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

3 訪問與流量管理

在工程實(shí)際應(yīng)用中，系統(tǒng)除了上述內(nèi)容之外，還包括一個訪問與流量管理模塊，主要任務(wù)如下：

（1）對流媒體發(fā)布模塊進(jìn)行維護(hù)；

（2）收到來自網(wǎng)頁的新的視頻請求時調(diào)用編碼轉(zhuǎn)換模塊；

（3）如果視頻源的前端設(shè)備不支持RTSP，則調(diào)用前端采集模塊；

（4）如果對某一視頻源的所有請求均已離線，則關(guān)閉相應(yīng)的編碼轉(zhuǎn)換模塊。

除了實(shí)時性之外，流量也是移動視頻監(jiān)控系統(tǒng)需要考量的重要指標(biāo)。經(jīng)實(shí)驗(yàn)檢測，在局域網(wǎng)內(nèi)訪問實(shí)時視頻存在大約3 s左右的延時；3G網(wǎng)絡(luò)中略長于3 s，視頻載入時間視網(wǎng)速快慢而異；音視頻流量約為80 KB/s時，可以在移動終端上看到較清晰的圖像，滿足3G網(wǎng)絡(luò)的要求。

4 結(jié)語

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

參考文獻(xiàn)

[1] 齊鴻儒，童任，韓鵬.移動視頻監(jiān)控系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(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] 肖東暉，林立.電力系統(tǒng)統(tǒng)一視頻監(jiān)控平臺解決方案[J].電力系統(tǒng)自動化，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] 王永利.分布式網(wǎng)絡(luò)視頻監(jiān)控系統(tǒng)的架構(gòu)[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