基于海康威視WEB無插件的視頻監(jiān)控系統(tǒng)設(shè)計

葉欣宇

關(guān)鍵詞：視頻監(jiān)控；Django框架；HTML5；nginx

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2023）21-0100-03

0 引言

伴隨著網(wǎng)絡(luò)技術(shù)與多媒體技術(shù)的快速發(fā)展，流媒體應(yīng)運(yùn)而生，它以流的方式在網(wǎng)絡(luò)中傳輸音頻、視頻等多媒體數(shù)據(jù)，接收端只需要進(jìn)行短暫的緩沖，就可以播放視頻流畫面[1]。如今流媒體技術(shù)越來越受到人們的關(guān)注，在社會生活中發(fā)揮著越來越重要的作用，被廣泛應(yīng)用于視頻監(jiān)控、視頻會議、遠(yuǎn)程協(xié)助、遠(yuǎn)程教育等眾多方面[2]。隨著大規(guī)模的流媒體應(yīng)用帶來網(wǎng)絡(luò)流量呈爆炸式增長趨勢，思科研究報告指出，到2022 年全球視頻流量將占據(jù)所有互聯(lián)網(wǎng)流量的82%。與此同時，以視頻監(jiān)控為需求核心的流媒體系統(tǒng)也得到了廣泛的關(guān)注和應(yīng)用[3]。由于一般視頻監(jiān)控的廠商都會提供專門的客戶端供客戶瀏覽實(shí)時視頻流，然而用戶希望在任何環(huán)境下便捷地在手機(jī)網(wǎng)頁上無插件地觀看到視頻監(jiān)控情況。因此本文設(shè)計與實(shí)現(xiàn)了一個基于海康威視WEB無插件的視頻監(jiān)控系統(tǒng)，主要通過海康威視WEB3.2控件開發(fā)包實(shí)現(xiàn)網(wǎng)絡(luò)攝像頭視頻流的獲取，nginx完成訪問路由的反向代理服務(wù)功能，在Django架構(gòu)提供WEB服務(wù)的HTML5網(wǎng)頁上呈現(xiàn)清晰的直播畫面，滿足用戶在手機(jī)端HTML5網(wǎng)頁無需插件隨時隨地觀看視頻監(jiān)控的應(yīng)用場景需求。

1 視頻監(jiān)控系統(tǒng)設(shè)計與實(shí)現(xiàn)

1.1 系統(tǒng)總體設(shè)計方案

本文是基于海康威視WEB無插件的視頻進(jìn)行監(jiān)控系統(tǒng)的設(shè)計，系統(tǒng)采用B/S的架構(gòu)風(fēng)格，使用Django 框架進(jìn)行前后端的分離設(shè)計來提供WEB應(yīng)用服務(wù)，通過nginx實(shí)現(xiàn)反向代理服務(wù)器的功能，借助于海康威視WEB3.2控件開發(fā)包實(shí)現(xiàn)海康網(wǎng)絡(luò)攝像頭視頻流的實(shí)時獲取。同時整個系統(tǒng)的服務(wù)器部署于醫(yī)院的VMware vSphere虛擬化信息平臺上。系統(tǒng)總體設(shè)計框架如圖1所示。

整個系統(tǒng)的視頻顯示流程是：當(dāng)用戶在HTML5 網(wǎng)頁輸入視頻監(jiān)控訪問地址后，首先通過nginx反向代理服務(wù)器訪問到Django服務(wù)器提供的視頻直播畫面網(wǎng)頁，接著調(diào)用海康威視WEB3.2 控件包中的Ja?vaScript控件程序進(jìn)行海康網(wǎng)絡(luò)攝像頭的遠(yuǎn)程登錄并獲取視頻流，然后用戶就可以在網(wǎng)頁端無需插件進(jìn)行實(shí)時視頻監(jiān)控畫面的觀看。

1.2 海康威視WEB3.2控件開發(fā)包

海康威視WEB3.2控件開發(fā)包是基于ActiveX和NPAPI開發(fā)，接口封裝于JavaScript腳本，以JavaScript 接口形式提供用戶調(diào)用網(wǎng)絡(luò)攝像頭的遠(yuǎn)程操作命令，以WebSocket 通信協(xié)議來獲取視頻流，從而實(shí)現(xiàn)在HTML5網(wǎng)頁上無插件就能夠播放視頻流。

在JavaScript接口中配置了訪問網(wǎng)絡(luò)攝像頭的路由路徑，nginx通過解析請求中的Cookie信息中找到網(wǎng)絡(luò)攝像頭的IP地址進(jìn)行轉(zhuǎn)發(fā)，從而遠(yuǎn)程登錄訪問網(wǎng)絡(luò)攝像頭進(jìn)行相應(yīng)的操作控制。JavaScript接口調(diào)用網(wǎng)絡(luò)攝像頭請求的兩種Cookie消息格式如圖2所示。

系統(tǒng)通過調(diào)用JavaScript接口獲取視頻流的函數(shù)調(diào)用順序如圖3所示。首先要判斷HTML5網(wǎng)頁是否支持該控件，接著初始化控件參數(shù)以及將控件與網(wǎng)頁顯示元素相綁定，然后就是遠(yuǎn)程登錄操作網(wǎng)絡(luò)攝像頭獲取視頻流，并傳輸?shù)骄W(wǎng)頁顯示元素中播放視頻畫面。

1.3 nginx 反向代理服務(wù)器

一方面是JavaScript接口調(diào)用需要借助于nginx中的路由轉(zhuǎn)發(fā)功能實(shí)現(xiàn)對網(wǎng)絡(luò)攝像頭的登錄訪問與操作控制，另一方面是nginx使用反向代理服務(wù)功能也有助于提高系統(tǒng)的安全性和整體性能，也能防止外部攻擊入侵服務(wù)器以及起到負(fù)載均衡的作用[4-5]。同時在使用nginx反向代理服務(wù)功能后，需要將Django服務(wù)器中的CSS與JavaScript等靜態(tài)資源配置到nginx的root訪問路徑中，這樣才能夠在HTML5網(wǎng)頁上正確加載靜態(tài)資源。

根據(jù)系統(tǒng)功能需求，需要配置三個反向代理轉(zhuǎn)發(fā)路由，具體配置如圖4所示。第一個反向代理轉(zhuǎn)發(fā)路由用于訪問Django的WEB應(yīng)用服務(wù)，后面兩個反向代理轉(zhuǎn)發(fā)路由用于訪問執(zhí)行網(wǎng)絡(luò)攝像頭的操作命令與視頻流請求，并且在配置中加入WebSocket通信協(xié)議。

nginx 反向代理服務(wù)器通過修改配置的方式將HTTP協(xié)議升級，使用HTTP協(xié)議的Upgrade和Connec?tion協(xié)議頭來轉(zhuǎn)換為WebSocket雙向通信，用于系統(tǒng)請求網(wǎng)絡(luò)攝像頭的視頻流。WebSocket通信配置代碼如圖5所示。

1.4 Django 的WEB應(yīng)用服務(wù)

Django是基于Python開發(fā)的WEB應(yīng)用框架，具有強(qiáng)大的數(shù)據(jù)庫，完善的路由規(guī)則、豐富的說明文檔、強(qiáng)大的后臺功能、易擴(kuò)展的模板系統(tǒng)等特點(diǎn)[6-7]。Django 框架遵循Model-View-Template（MVT） 的設(shè)計模式，模型主要用于和數(shù)據(jù)庫進(jìn)行數(shù)據(jù)交互，視圖主要處理相應(yīng)的業(yè)務(wù)邏輯與調(diào)用相關(guān)模型，模板負(fù)責(zé)將網(wǎng)頁內(nèi)容展示給用戶[8]。Django架構(gòu)的工作流程如圖6所示。

網(wǎng)頁前端HTML5頁面設(shè)計需要考慮視頻播放區(qū)域的布局，畫面放大與縮小的功能，用戶登錄頁面設(shè)計以及加載靜態(tài)資源的配置等內(nèi)容。后端需要設(shè)計網(wǎng)頁訪問的路由路徑、用戶登錄信息驗(yàn)證等內(nèi)容。系統(tǒng)采用Django 自帶的服務(wù)器進(jìn)行WEB 應(yīng)用服務(wù)部署。

1.5 VMware vSphere虛擬化平臺

VMware vSphere 提供全球領(lǐng)先的虛擬化平臺，用于構(gòu)建云計算基礎(chǔ)架構(gòu)[9]。VMware vSphere虛擬化平臺將應(yīng)用程序和操作系統(tǒng)從底層硬件分離出來，對資源池進(jìn)行集中管理，實(shí)現(xiàn)服務(wù)器虛擬化、網(wǎng)絡(luò)虛擬化和存儲虛擬化，從而能夠提高資源利用率，大幅降低研發(fā)成本，兼具靈活性和可用性等優(yōu)勢[10]。為了保障系統(tǒng)服務(wù)器的穩(wěn)定運(yùn)行和提高系統(tǒng)性能，系統(tǒng)服務(wù)器部署于醫(yī)院的VMware vSphere虛擬化平臺中，虛擬化平臺架構(gòu)如圖7所示。

2 實(shí)驗(yàn)結(jié)果

在視頻監(jiān)控系統(tǒng)穩(wěn)定運(yùn)行后，用戶可以在HTML5 網(wǎng)頁端無需插件就能夠觀看對應(yīng)網(wǎng)絡(luò)攝像頭的直播畫面，同時點(diǎn)擊放大與縮小按鈕則可實(shí)現(xiàn)對應(yīng)視頻畫面放大與縮小的功能，如圖8 所示在安卓手機(jī)的HTML5 網(wǎng)頁上播放直播內(nèi)容。本系統(tǒng)符合用戶在HTML5網(wǎng)頁端無需插件就能獲得隨時隨地便捷的觀看體驗(yàn)。

本文設(shè)計的視頻監(jiān)控系統(tǒng)和ffmpeg+nginx+HLS 方式的網(wǎng)頁視頻直播系統(tǒng)[11]進(jìn)行對比實(shí)驗(yàn)，觀察兩個系統(tǒng)直播畫面的時間軸，實(shí)驗(yàn)結(jié)果表明本文系統(tǒng)在視頻延時方面提高了2S到6S。同時本文系統(tǒng)不需要配置視頻流協(xié)議轉(zhuǎn)換與推流，搭建流媒體服務(wù)器等復(fù)雜步驟。從而表明本文設(shè)計的視頻監(jiān)控系統(tǒng)具有較低的延時，系統(tǒng)結(jié)構(gòu)更簡單。

3 結(jié)束語

本系統(tǒng)采用海康威視WEB3.2控件開發(fā)包，結(jié)合Django框架設(shè)計WEB應(yīng)用服務(wù)，使用nginx反向代理服務(wù)器，依托于虛擬化平臺，共同組合實(shí)現(xiàn)視頻監(jiān)控系統(tǒng)，本系統(tǒng)開發(fā)流程簡單，模塊化編程，后期維護(hù)優(yōu)化方便，并具有一定的安全性。通過實(shí)驗(yàn)驗(yàn)證本文系統(tǒng)能夠穩(wěn)定運(yùn)行，滿足用戶隨時隨地、便捷地在HTML5網(wǎng)頁端無需插件就可以觀看直播的需求，具有較低的視頻播放延時，因此具有一定的應(yīng)用前景。

下一步計劃，為了充分發(fā)揮與利用視頻監(jiān)控系統(tǒng)的優(yōu)勢，未來將會引入5G通信技術(shù)，進(jìn)一步提高網(wǎng)絡(luò)通信質(zhì)量，并且同時接入圖像識別技術(shù)與大數(shù)據(jù)分析提高視頻監(jiān)控的應(yīng)用場景。