葉欣宇

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

中圖分類號：TP311 文獻標識碼：A

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

0 引言

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

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

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

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

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

1.2 ?？低昗EB3.2控件開發(fā)包

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

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

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

1.3 nginx 反向代理服務器

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

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

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

1.4 Django 的WEB應用服務

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

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

1.5 VMware vSphere虛擬化平臺

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

2 實驗結果

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

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

3 結束語

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

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