基于海康威視WEB無插件的視頻監控系統設計

葉欣宇

關鍵詞：視頻監控；Django框架；HTML5；nginx

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

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

0 引言

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

1 視頻監控系統設計與實現

1.1 系統總體設計方案

本文是基于海康威視WEB無插件的視頻進行監控系統的設計，系統采用B/S的架構風格，使用Django 框架進行前后端的分離設計來提供WEB應用服務，通過nginx實現反向代理服務器的功能，借助于海康威視WEB3.2控件開發包實現海康網絡攝像頭視頻流的實時獲取。同時整個系統的服務器部署于醫院的VMware vSphere虛擬化信息平臺上。系統總體設計框架如圖1所示。

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

1.2 海康威視WEB3.2控件開發包

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

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

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

1.3 nginx 反向代理服務器

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

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

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

1.4 Django 的WEB應用服務

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

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

1.5 VMware vSphere虛擬化平臺

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

2 實驗結果

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

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

3 結束語

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

下一步計劃，為了充分發揮與利用視頻監控系統的優勢，未來將會引入5G通信技術，進一步提高網絡通信質量，并且同時接入圖像識別技術與大數據分析提高視頻監控的應用場景。