基于Node.js的移動(dòng)視頻監(jiān)控系統(tǒng)①

房 峰,高美鳳

(江南大學(xué) 物聯(lián)網(wǎng)工程學(xué)院,無(wú)錫 214122)

基于Node.js的移動(dòng)視頻監(jiān)控系統(tǒng)①

房 峰,高美鳳

(江南大學(xué) 物聯(lián)網(wǎng)工程學(xué)院,無(wú)錫 214122)

使用OpenCV和jQuery Mobile設(shè)計(jì)了一款基于Node.js運(yùn)行平臺(tái)的移動(dòng)視頻監(jiān)控系統(tǒng).系統(tǒng)采用B/S結(jié)構(gòu),在windows系統(tǒng)上搭建的Node.js服務(wù)器用于接收和發(fā)送視頻,同樣部署在windows系統(tǒng)上的OpenCV負(fù)責(zé)圖像的處理和編碼;用jQuery Mobile結(jié)合Hybrid App開發(fā)模式制作的客戶端運(yùn)行在移動(dòng)終端,提供監(jiān)控功能.測(cè)試結(jié)果表明,在WiFi環(huán)境下,系統(tǒng)可進(jìn)行有效的多用戶實(shí)時(shí)監(jiān)控.

視頻監(jiān)控; jQuery Mobile; Hybrid App; OpenCV; Node.js

隨著攝像頭安裝數(shù)量的日益增多,以及智慧城市和公共安全需求的日益增長(zhǎng),傳統(tǒng)的人工視頻監(jiān)控方式已經(jīng)遠(yuǎn)遠(yuǎn)不能滿足監(jiān)控需要,因此,智能視頻監(jiān)控技術(shù)應(yīng)運(yùn)而生并迅速成為一個(gè)研究熱點(diǎn)[1].文獻(xiàn)[2]中提出了一種圖像傳輸和分發(fā)系統(tǒng)的設(shè)計(jì)方法,該系統(tǒng)利用TCP/IP協(xié)議接收智能視頻監(jiān)控系統(tǒng)輸出的圖像數(shù)據(jù),再利用 websocket協(xié)議把 data URI格式的圖像數(shù)據(jù)轉(zhuǎn)發(fā)給客戶端.本文利用文獻(xiàn)[2]中的相關(guān)技術(shù),在windows 系統(tǒng)上,基于 Node.js 運(yùn)行平臺(tái),采用 Hybrid App移動(dòng)開發(fā)模式,結(jié)合OpenCV圖像處理庫(kù)和Web前端技術(shù),開發(fā)了一款移動(dòng)端低成本多用戶實(shí)時(shí)監(jiān)控系統(tǒng).

1 系統(tǒng)結(jié)構(gòu)

移動(dòng)視頻監(jiān)控系統(tǒng)主要由USB攝像頭、視頻圖像處理系統(tǒng)、Node.js服務(wù)器和移動(dòng)客戶端組成,如圖1所示.

圖1 系統(tǒng)總體結(jié)構(gòu)

其中,Node.js服務(wù)器通過TCP協(xié)議接收經(jīng)視頻圖像處理系統(tǒng)處理過的視頻圖像數(shù)據(jù),再利用WebSocket協(xié)議把jpeg圖像原始二進(jìn)制數(shù)據(jù)進(jìn)行base64編碼構(gòu)造的data URI字符串轉(zhuǎn)發(fā)給移動(dòng)客戶端,客戶端負(fù)責(zé)接收該字符串并通過image元素引用完成視頻圖像顯示功能.本系統(tǒng)在同一局域網(wǎng)下已經(jīng)測(cè)試成功.

2 視頻圖像處理系統(tǒng)

OpenCV提供了非常豐富的幀提取函數(shù)和視覺處理算法,開發(fā)者可以在其視頻開發(fā)項(xiàng)目中直接調(diào)用進(jìn)行算法移植并添加自己的程序,即可完成復(fù)雜龐大的開發(fā)任務(wù),達(dá)到事半功倍的效果[3].本文視頻圖像處理系統(tǒng)就是利用OpenCV庫(kù),結(jié)合多線程方式,將處理過的視頻數(shù)據(jù)進(jìn)行JPEG壓縮,最終通過TCP協(xié)議轉(zhuǎn)發(fā)給服務(wù)器.

2.1 多線程處理視頻數(shù)據(jù)

采用多線程可以提高資源的利用率和程序的響應(yīng)速度,使程序設(shè)計(jì)變得簡(jiǎn)單.圖像處理部分就是利用基于windows系統(tǒng)的C++多線程編程方法,完成3個(gè)基本任務(wù),即圖像獲取、圖像處理和處理后圖像數(shù)據(jù)的網(wǎng)絡(luò)發(fā)送.在程序設(shè)計(jì)上,使用3個(gè)線程實(shí)現(xiàn)以上3個(gè)任務(wù),在線程之間采用互斥鎖的機(jī)制對(duì)共享的關(guān)鍵數(shù)據(jù)進(jìn)行保護(hù)和實(shí)現(xiàn)線程之間的同步,從而保證系統(tǒng)平穩(wěn)、流暢運(yùn)行,具體的實(shí)現(xiàn)機(jī)制如圖2所示.圖像獲取線程與圖像處理線程之間、圖像處理線程和圖像發(fā)送線程之間共同維護(hù)了兩個(gè)緩沖區(qū)A和B,并且這兩個(gè)緩沖區(qū)分別有兩個(gè)線程擁有權(quán)限對(duì)其進(jìn)行操作,這樣就會(huì)產(chǎn)生競(jìng)爭(zhēng)現(xiàn)象,破壞數(shù)據(jù)的完整性,采用互斥鎖機(jī)制正好能解決以上問題.

圖2 多線程圖像處理機(jī)制

2.2 基于TCP的視頻傳輸

TCP是面向連接的通信協(xié)議,提供可靠的數(shù)據(jù)流服務(wù),從而確保視頻的有效傳輸.面向連接的TCP協(xié)議需要客戶端和服務(wù)器兩個(gè)應(yīng)用.本文中,視頻圖像處理系統(tǒng)作為TCP Client,使用socket傳輸經(jīng)處理后的圖像幀數(shù)據(jù),發(fā)送給作為TCP Server的Node.js服務(wù)器.為了保證圖像傳輸?shù)膶?shí)時(shí)性,Node.js服務(wù)器與視頻圖像處理系統(tǒng)部署在同一臺(tái)PC機(jī)上.

2.3 JPEG圖像數(shù)據(jù)壓縮

JPEG是互聯(lián)網(wǎng)上使用最廣泛的一種圖像存儲(chǔ)和傳送格式[4],是第一個(gè)國(guó)際圖像壓縮標(biāo)準(zhǔn).JPEG圖像壓縮算法能夠在提供良好的壓縮性能的同時(shí),具有比較好的重建質(zhì)量,被廣泛應(yīng)用于圖像、視頻處理領(lǐng)域,使用JPEG標(biāo)準(zhǔn)壓縮后圖像的體積可以減少數(shù)十倍.在圖像處理線程中對(duì)處理過的圖像進(jìn)行JPEG壓縮,將壓縮之后的JPEG數(shù)據(jù)再由圖像發(fā)送線程通過TCP協(xié)議發(fā)送給服務(wù)器,這樣就大大減小圖像數(shù)據(jù)體積,進(jìn)一步提高數(shù)據(jù)傳輸?shù)膶?shí)時(shí)性.

3 Node.js服務(wù)器實(shí)現(xiàn)

Node.js服務(wù)器由TCP服務(wù)器和Web服務(wù)器組成,如圖1所示.實(shí)現(xiàn)的主要功能有jpeg圖像幀數(shù)據(jù)的接收,圖像幀數(shù)據(jù)的編碼并構(gòu)造為 data URI字符串,利用WebSocket協(xié)議進(jìn)行字符串?dāng)?shù)據(jù)的發(fā)送,處理多用戶的HTTP請(qǐng)求.

3.1 Node.js簡(jiǎn)介

Node.js是建立在 Chrome V8 之上的運(yùn)行平臺(tái),它用于構(gòu)建快速、可擴(kuò)展的網(wǎng)絡(luò)應(yīng)用程序.Node.js使用一種事件驅(qū)動(dòng)、非阻塞的I/O模型,這也使得跨分布式設(shè)備的數(shù)據(jù)密集型實(shí)時(shí)應(yīng)用更加輕量、高效和完美.并且異步非阻塞的Node.js所構(gòu)建的Web應(yīng)用程序和同步阻塞語(yǔ)言PHP相比,在高并發(fā)請(qǐng)求的情況下,Node.js構(gòu)建的服務(wù)器比PHP構(gòu)建的應(yīng)用程序響應(yīng)時(shí)間短、吞吐率高[5].因此,本文采用Node.js運(yùn)行平臺(tái),可進(jìn)一步實(shí)現(xiàn)多用戶實(shí)時(shí)監(jiān)控.

3.2 TCP服務(wù)器

前文所述,視頻數(shù)據(jù)的傳輸是基于TCP協(xié)議的,視頻圖像處理系統(tǒng)作為TCP Client,Node.js服務(wù)器中的TCP服務(wù)器作為TCP Server.TCP服務(wù)器主要功能是實(shí)現(xiàn)jpeg圖像幀數(shù)據(jù)的接收,因此使用net模塊提供的異步網(wǎng)絡(luò)包裝器對(duì)象來(lái)創(chuàng)建TCP服務(wù)器[6].部分代碼如下:

3.3 Web服務(wù)器

HTTP是Web服務(wù)器和瀏覽器使用的通訊協(xié)議,Web服務(wù)器用此協(xié)議來(lái)接收和處理瀏覽器發(fā)出的HTTP請(qǐng)求.使用Node.js構(gòu)建的Web服務(wù)器除了具有在高并發(fā)請(qǐng)求下響應(yīng)時(shí)間短、吞吐率高的性能優(yōu)勢(shì)外,還可以進(jìn)行路由設(shè)置,從而瀏覽器可以通過HTTP協(xié)議很方便地獲取服務(wù)器上的html資源.

Web服務(wù)器主要功能有,JPEG圖像幀數(shù)據(jù)base64編碼并構(gòu)造data URI字符串、字符串?dāng)?shù)據(jù)的發(fā)送和處理多用戶請(qǐng)求.

本系統(tǒng)利用Node.js的Express框架結(jié)合socket.io模塊搭建Web服務(wù)器,部分代碼如下:

3.3.1 WebSocket

Web服務(wù)器要把圖像數(shù)據(jù)發(fā)送給各個(gè)客戶端,需要一種實(shí)時(shí)性較強(qiáng)的全雙工通信方式,而不是單向被動(dòng)的HTTP請(qǐng)求.

WebSocket是Html5的一種新的協(xié)議,它實(shí)現(xiàn)了客戶端與服務(wù)器全雙工socket通信[7].建立WebSocket連接后,雙方都可以隨時(shí)給對(duì)方發(fā)送數(shù)據(jù),在實(shí)時(shí)性上比HTTP協(xié)議更強(qiáng).基于這種特點(diǎn),Web服務(wù)器會(huì)將編碼構(gòu)造的字符串?dāng)?shù)據(jù)通過WebSocket協(xié)議立即轉(zhuǎn)發(fā)給與Web服務(wù)器建立連接的移動(dòng)客戶端,達(dá)到實(shí)時(shí)轉(zhuǎn)發(fā)效果.在本文實(shí)現(xiàn)上,使用socket.io模塊實(shí)現(xiàn)全雙工通信.部分代碼如下:

3.3.2 data URI

一般情況下,在瀏覽器上通過image元素的src屬性引用圖片文件URL地址來(lái)完成圖像的顯示.如果在服務(wù)器端把每一幀圖像都保存為jpeg文件,再讓瀏覽器通過URL引用圖像,這樣每一幀圖像的引用都要耗費(fèi)一個(gè)HTTP請(qǐng)求,從而造成時(shí)間的浪費(fèi).

data URI是由RFC2397定義的一種把小文件嵌入文檔的方案,可以有效的減少HTTP請(qǐng)求數(shù).對(duì)于圖像文件等二進(jìn)制數(shù)據(jù),可以將文件的二進(jìn)制數(shù)據(jù)進(jìn)行base64編碼之后再進(jìn)行嵌入.針對(duì)傳輸?shù)腏PEG圖像文件,在Web服務(wù)器中,對(duì)JPEG圖像幀數(shù)據(jù)進(jìn)行base64編碼,并構(gòu)造成如下字符串:

var dataURI=’data:image/jpeg;base64,’+buf.toString(‘base64’);

4 移動(dòng)客戶端實(shí)現(xiàn)

客戶端軟件采用Hybrid App移動(dòng)開發(fā)模式和jQuery Mobile框架聯(lián)合編程,實(shí)現(xiàn)了對(duì)data URI字符串接收、顯示、播放和暫停的基本功能.客戶端通過HTTP協(xié)議接收Web服務(wù)器返回的html文件,然后通過內(nèi)嵌在原生應(yīng)用主窗口中的瀏覽器內(nèi)核對(duì)該文件進(jìn)行渲染解析.其中,data URI字符串的接收利用 WebSocket協(xié)議實(shí)現(xiàn).此外,客戶端與服務(wù)器之間能夠正常使用WebSocket協(xié)議通信,除了服務(wù)器要引用相應(yīng)的包之外,返回給客戶端的html文件中必須引用以下文件:

這樣,才能調(diào)用io函數(shù),取得socket對(duì)象.

4.1 Hybrid App開發(fā)模式和jQuery Mobile框架

移動(dòng)App是針對(duì)移動(dòng)設(shè)備所開發(fā)的應(yīng)用軟件,智能終端的普及不僅推動(dòng)了移動(dòng)互聯(lián)網(wǎng)的發(fā)展,也帶來(lái)了移動(dòng)App應(yīng)用的爆炸式增長(zhǎng).目前比較流行的有三種移動(dòng) App 開發(fā)模式:Native App(原生開發(fā)模式)、Web App(網(wǎng)頁(yè)開發(fā)模式)和 Hybrid App(混合開發(fā)模式)[8].本系統(tǒng)選擇混合開發(fā)模式,此模式介于前兩者之間,有效解決了原生應(yīng)用開發(fā)周期長(zhǎng)以及網(wǎng)頁(yè)應(yīng)用中用戶粘性不夠的問題.

jQuery Mobile是基于 jQuery 和 jQuery UI的 Web框架,專用于移動(dòng)智能終端平臺(tái),支持多種移動(dòng)平臺(tái).它具有輕量級(jí)的代碼,使用漸進(jìn)增強(qiáng)方式構(gòu)建,具有可伸縮、易更換主題的設(shè)計(jì)特點(diǎn)[9].利用jQuery Mobile框架實(shí)現(xiàn)前端表現(xiàn)界面不但符合移動(dòng)用戶交互體驗(yàn),而且有效解決了移動(dòng)端兼容問題.

4.2 視頻接收與顯示

為了實(shí)現(xiàn)在客戶端上流暢并實(shí)時(shí)觀看經(jīng)過視頻圖像處理系統(tǒng)處理后的圖像,采用了在客戶端高速而連續(xù)引用每一幀圖像的data URI字符串進(jìn)行圖像顯示的方法來(lái)模擬視頻直播的效果.

移動(dòng)客戶端通過WebSocket協(xié)議接收經(jīng)base64編碼構(gòu)造的data URI字符串,然后通過image元素引用該字符串完成圖像顯示,即將接收到的字符串賦值給image元素的src屬性.此外,通過一個(gè)信號(hào)量控制客戶端是否接收數(shù)據(jù)來(lái)實(shí)現(xiàn)播放與暫停的功能,部分代碼如下:

雖然jQuery Mobile是針對(duì)移動(dòng)端的Web框架,解決了控件如按鈕對(duì)各種移動(dòng)端屏幕尺寸的適應(yīng)問題,但是沒有考慮image元素的兼容,導(dǎo)致顯示的視頻圖像大小無(wú)法達(dá)到自適應(yīng)屏幕的效果,要在head標(biāo)簽內(nèi)對(duì)image元素做如下設(shè)置:

5 系統(tǒng)測(cè)試

本系統(tǒng)在win8操作系統(tǒng)上進(jìn)行測(cè)試.視頻圖像處理系統(tǒng)與Node.js服務(wù)器部署在同一臺(tái)PC機(jī)上,其中,視頻圖像處理應(yīng)用程序利用Visual Studio 2013結(jié)合移植入的OpenCV2進(jìn)行編程.Node.js服務(wù)器利用前端開發(fā)工具WebStorm10.0.5進(jìn)行開發(fā).移動(dòng)客戶端運(yùn)行在Android手機(jī)上,利用ADT進(jìn)行開發(fā).確保在同一可用的WiFi環(huán)境下后,先運(yùn)行Node.js服務(wù)器,再運(yùn)行視頻圖像處理應(yīng)用程序,最后打開手機(jī)桌面上的Monitor圖標(biāo)如圖3,按下開始按鈕便可實(shí)時(shí)顯示視頻圖像,測(cè)試結(jié)果如圖4所示.

圖3 Monitor圖標(biāo)

圖4 系統(tǒng)測(cè)試

6 結(jié)語(yǔ)

本文介紹了一種基于Node.js的移動(dòng)視頻監(jiān)控系統(tǒng),經(jīng)過測(cè)試,該系統(tǒng)能夠?qū)崟r(shí)傳輸視頻圖像數(shù)據(jù),讓多用戶通過移動(dòng)端進(jìn)行實(shí)時(shí)的視頻監(jiān)控,解決了常規(guī)監(jiān)控系統(tǒng)只顯示圖像不能對(duì)圖像進(jìn)行處理、實(shí)時(shí)性差和無(wú)法多用戶同時(shí)連接的問題以及傳統(tǒng)網(wǎng)頁(yè)應(yīng)用中用戶粘性不夠的問題.此外,系統(tǒng)易于搭建,性能穩(wěn)定,成本低廉,具有廣泛的應(yīng)用價(jià)值.

1黃凱奇,陳曉棠,康運(yùn)鋒,等.智能視頻監(jiān)控技術(shù)綜述.計(jì)算機(jī)學(xué)報(bào),2015,38(6):1093–1118.[doi:10.11897/SP.J.1016.2015.01093]

2禤潤(rùn)堂.面向?qū)崟r(shí)視頻監(jiān)控的圖像傳輸及分發(fā)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[碩士學(xué)位論文].北京:北京郵電大學(xué),2015.

3劉瑞禎,于仕琪.OpenCV 教程—基礎(chǔ)篇.北京:北京航空航天大學(xué)出版社,2007.

4馮彥輝,高潔,徐曄,等.基于 JPEG 圖像文件格式的研究.讓西電子技術(shù),2009,(1):38–39.

5王金龍,宋斌,丁銳.Node.js:一種新的 Web 應(yīng)用構(gòu)建技術(shù).現(xiàn)代電子技術(shù),2015,38(6):70–73.

6陳會(huì)安.JavaScript+jQuery Mobile+Node.js 跨平臺(tái)網(wǎng)頁(yè)設(shè)計(jì).北京:機(jī)械工業(yè)出版社,2016:1.

7肖在昌,楊文暉,劉兵.基于 WebSocket的實(shí)時(shí)技術(shù).電腦與電信,2012,(12):40–42.[doi:10.3969/j.issn.1008-6609.2012.12.034]

8楊毅.移動(dòng) APP 開發(fā)模式探討.福建電腦,2014,30(6):86–87.

9Firtman M.jQuery Mobile:Up and Running.O’Reilly Media Inc.,2012.

Mobile Video Monitoring System Based on Node.js

FANG Feng,GAO Mei-Feng
(School of IoT Engineering,Jiangnan University,Wuxi 214122,China)

A mobile video monitoring system based on Node.js is designed by using OpenCV coupling with Web frontend technology in this paper.The system adopts B/S structure.Node.js server is built on windows system for acquisition and transmission of video data and OpenCV built on the same system is used for image processing and encoding.The client is made with Web front-end technology and Hybrid App development model running on the mobile terminal,to provide monitoring function.The test results show that under WiFi environment,the system carries out multi-user and real-time monitoring effectively.

video monitoring; jQuery Mobile; Hybrid App; OpenCV; Node.js

房峰,高美鳳.基于 Node.js 的移動(dòng)視頻監(jiān)控系統(tǒng).計(jì)算機(jī)系統(tǒng)應(yīng)用,2017,26(10):281–285.http://www.c-s-a.org.cn/1003-3254/6000.html

2017-01-03; 采用時(shí)間:2017-02-20