基于Node.js的移動視頻監控系統①

房 峰,高美鳳

(江南大學 物聯網工程學院,無錫 214122)

基于Node.js的移動視頻監控系統①

房 峰,高美鳳

(江南大學 物聯網工程學院,無錫 214122)

使用OpenCV和jQuery Mobile設計了一款基于Node.js運行平臺的移動視頻監控系統.系統采用B/S結構,在windows系統上搭建的Node.js服務器用于接收和發送視頻,同樣部署在windows系統上的OpenCV負責圖像的處理和編碼;用jQuery Mobile結合Hybrid App開發模式制作的客戶端運行在移動終端,提供監控功能.測試結果表明,在WiFi環境下,系統可進行有效的多用戶實時監控.

視頻監控; jQuery Mobile; Hybrid App; OpenCV; Node.js

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

1 系統結構

移動視頻監控系統主要由USB攝像頭、視頻圖像處理系統、Node.js服務器和移動客戶端組成,如圖1所示.

圖1 系統總體結構

其中,Node.js服務器通過TCP協議接收經視頻圖像處理系統處理過的視頻圖像數據,再利用WebSocket協議把jpeg圖像原始二進制數據進行base64編碼構造的data URI字符串轉發給移動客戶端,客戶端負責接收該字符串并通過image元素引用完成視頻圖像顯示功能.本系統在同一局域網下已經測試成功.

2 視頻圖像處理系統

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

2.1 多線程處理視頻數據

采用多線程可以提高資源的利用率和程序的響應速度,使程序設計變得簡單.圖像處理部分就是利用基于windows系統的C++多線程編程方法,完成3個基本任務,即圖像獲取、圖像處理和處理后圖像數據的網絡發送.在程序設計上,使用3個線程實現以上3個任務,在線程之間采用互斥鎖的機制對共享的關鍵數據進行保護和實現線程之間的同步,從而保證系統平穩、流暢運行,具體的實現機制如圖2所示.圖像獲取線程與圖像處理線程之間、圖像處理線程和圖像發送線程之間共同維護了兩個緩沖區A和B,并且這兩個緩沖區分別有兩個線程擁有權限對其進行操作,這樣就會產生競爭現象,破壞數據的完整性,采用互斥鎖機制正好能解決以上問題.

圖2 多線程圖像處理機制

2.2 基于TCP的視頻傳輸

TCP是面向連接的通信協議,提供可靠的數據流服務,從而確保視頻的有效傳輸.面向連接的TCP協議需要客戶端和服務器兩個應用.本文中,視頻圖像處理系統作為TCP Client,使用socket傳輸經處理后的圖像幀數據,發送給作為TCP Server的Node.js服務器.為了保證圖像傳輸的實時性,Node.js服務器與視頻圖像處理系統部署在同一臺PC機上.

2.3 JPEG圖像數據壓縮

JPEG是互聯網上使用最廣泛的一種圖像存儲和傳送格式[4],是第一個國際圖像壓縮標準.JPEG圖像壓縮算法能夠在提供良好的壓縮性能的同時,具有比較好的重建質量,被廣泛應用于圖像、視頻處理領域,使用JPEG標準壓縮后圖像的體積可以減少數十倍.在圖像處理線程中對處理過的圖像進行JPEG壓縮,將壓縮之后的JPEG數據再由圖像發送線程通過TCP協議發送給服務器,這樣就大大減小圖像數據體積,進一步提高數據傳輸的實時性.

3 Node.js服務器實現

Node.js服務器由TCP服務器和Web服務器組成,如圖1所示.實現的主要功能有jpeg圖像幀數據的接收,圖像幀數據的編碼并構造為 data URI字符串,利用WebSocket協議進行字符串數據的發送,處理多用戶的HTTP請求.

3.1 Node.js簡介

Node.js是建立在 Chrome V8 之上的運行平臺,它用于構建快速、可擴展的網絡應用程序.Node.js使用一種事件驅動、非阻塞的I/O模型,這也使得跨分布式設備的數據密集型實時應用更加輕量、高效和完美.并且異步非阻塞的Node.js所構建的Web應用程序和同步阻塞語言PHP相比,在高并發請求的情況下,Node.js構建的服務器比PHP構建的應用程序響應時間短、吞吐率高[5].因此,本文采用Node.js運行平臺,可進一步實現多用戶實時監控.

3.2 TCP服務器

前文所述,視頻數據的傳輸是基于TCP協議的,視頻圖像處理系統作為TCP Client,Node.js服務器中的TCP服務器作為TCP Server.TCP服務器主要功能是實現jpeg圖像幀數據的接收,因此使用net模塊提供的異步網絡包裝器對象來創建TCP服務器[6].部分代碼如下:

3.3 Web服務器

HTTP是Web服務器和瀏覽器使用的通訊協議,Web服務器用此協議來接收和處理瀏覽器發出的HTTP請求.使用Node.js構建的Web服務器除了具有在高并發請求下響應時間短、吞吐率高的性能優勢外,還可以進行路由設置,從而瀏覽器可以通過HTTP協議很方便地獲取服務器上的html資源.

Web服務器主要功能有,JPEG圖像幀數據base64編碼并構造data URI字符串、字符串數據的發送和處理多用戶請求.

本系統利用Node.js的Express框架結合socket.io模塊搭建Web服務器,部分代碼如下:

3.3.1 WebSocket

Web服務器要把圖像數據發送給各個客戶端,需要一種實時性較強的全雙工通信方式,而不是單向被動的HTTP請求.

WebSocket是Html5的一種新的協議,它實現了客戶端與服務器全雙工socket通信[7].建立WebSocket連接后,雙方都可以隨時給對方發送數據,在實時性上比HTTP協議更強.基于這種特點,Web服務器會將編碼構造的字符串數據通過WebSocket協議立即轉發給與Web服務器建立連接的移動客戶端,達到實時轉發效果.在本文實現上,使用socket.io模塊實現全雙工通信.部分代碼如下:

3.3.2 data URI

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

data URI是由RFC2397定義的一種把小文件嵌入文檔的方案,可以有效的減少HTTP請求數.對于圖像文件等二進制數據,可以將文件的二進制數據進行base64編碼之后再進行嵌入.針對傳輸的JPEG圖像文件,在Web服務器中,對JPEG圖像幀數據進行base64編碼,并構造成如下字符串:

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

4 移動客戶端實現

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

這樣,才能調用io函數,取得socket對象.

4.1 Hybrid App開發模式和jQuery Mobile框架

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

jQuery Mobile是基于 jQuery 和 jQuery UI的 Web框架,專用于移動智能終端平臺,支持多種移動平臺.它具有輕量級的代碼,使用漸進增強方式構建,具有可伸縮、易更換主題的設計特點[9].利用jQuery Mobile框架實現前端表現界面不但符合移動用戶交互體驗,而且有效解決了移動端兼容問題.

4.2 視頻接收與顯示

為了實現在客戶端上流暢并實時觀看經過視頻圖像處理系統處理后的圖像,采用了在客戶端高速而連續引用每一幀圖像的data URI字符串進行圖像顯示的方法來模擬視頻直播的效果.

移動客戶端通過WebSocket協議接收經base64編碼構造的data URI字符串,然后通過image元素引用該字符串完成圖像顯示,即將接收到的字符串賦值給image元素的src屬性.此外,通過一個信號量控制客戶端是否接收數據來實現播放與暫停的功能,部分代碼如下:

雖然jQuery Mobile是針對移動端的Web框架,解決了控件如按鈕對各種移動端屏幕尺寸的適應問題,但是沒有考慮image元素的兼容,導致顯示的視頻圖像大小無法達到自適應屏幕的效果,要在head標簽內對image元素做如下設置:

5 系統測試

本系統在win8操作系統上進行測試.視頻圖像處理系統與Node.js服務器部署在同一臺PC機上,其中,視頻圖像處理應用程序利用Visual Studio 2013結合移植入的OpenCV2進行編程.Node.js服務器利用前端開發工具WebStorm10.0.5進行開發.移動客戶端運行在Android手機上,利用ADT進行開發.確保在同一可用的WiFi環境下后,先運行Node.js服務器,再運行視頻圖像處理應用程序,最后打開手機桌面上的Monitor圖標如圖3,按下開始按鈕便可實時顯示視頻圖像,測試結果如圖4所示.

圖3 Monitor圖標

圖4 系統測試

6 結語

本文介紹了一種基于Node.js的移動視頻監控系統,經過測試,該系統能夠實時傳輸視頻圖像數據,讓多用戶通過移動端進行實時的視頻監控,解決了常規監控系統只顯示圖像不能對圖像進行處理、實時性差和無法多用戶同時連接的問題以及傳統網頁應用中用戶粘性不夠的問題.此外,系統易于搭建,性能穩定,成本低廉,具有廣泛的應用價值.

1黃凱奇,陳曉棠,康運鋒,等.智能視頻監控技術綜述.計算機學報,2015,38(6):1093–1118.[doi:10.11897/SP.J.1016.2015.01093]

2禤潤堂.面向實時視頻監控的圖像傳輸及分發系統設計與實現[碩士學位論文].北京:北京郵電大學,2015.

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

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

5王金龍,宋斌,丁銳.Node.js:一種新的 Web 應用構建技術.現代電子技術,2015,38(6):70–73.

6陳會安.JavaScript+jQuery Mobile+Node.js 跨平臺網頁設計.北京:機械工業出版社,2016:1.

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

8楊毅.移動 APP 開發模式探討.福建電腦,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 的移動視頻監控系統.計算機系統應用,2017,26(10):281–285.http://www.c-s-a.org.cn/1003-3254/6000.html

2017-01-03; 采用時間:2017-02-20