基于海康威视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通信技术，进一步提高网络通信质量，并且同时接入图像识别技术与大数据分析提高视频监控的应用场景。