基于服务器本地地图的园区视频监控 web 系统

主要功能截图

针对传统园区视频监控系统面临的问题，通过参考目前业界的主流技术方向和最佳实践，本文设计并开发实现了一套基于服务器本地地图和深度学习技术的智能园区视频监控系统。

本系统实现了地图瓦片数据和自定义园区地图的服务器本地保存、加载和渲染，多摄像头直播画面的播放，多摄像头基于其园区地理位置的管理，基于实时监控画面对异常事件的检测报警和管理，异常事件报警的触发规则的定义和管理以及系统角色权限的管理，并完成了系统测试。

智慧园区视频监控 Web 系统是一个功能完整、架构领先的开源项目，其核心架构划分为前端、后端、监控算法端、RTMP 媒体服务器和地图瓦片服务器五大部分，以下为详细介绍：

一、前端

前端部分负责用户界面的展示和交互，用户可以通过浏览器访问系统，实时查看监控画面、管理摄像头、设置报警规则等。前端界面设计直观易用，方便用户快速上手。

二、后端

后端部分是系统的核心处理层，负责处理前端请求、管理摄像头设备、存储监控数据、实现用户认证和权限控制等功能。后端采用高效的编程语言和框架开发，确保系统的稳定性和高性能。

三、监控算法端

监控算法端集成了先进的人工智能算法，用于实时分析监控画面，自动识别异常事件，如人员入侵、越界、摔倒等。算法端能够实时触发报警机制，通知相关人员及时处理，大大提高了监控系统的智能化水平和响应速度。

四、RTMP 媒体服务器

RTMP 媒体服务器负责实时视频流的传输和分发。它支持多种视频流传输协议，确保视频画面能够流畅、稳定地传输到前端界面，供用户实时查看。同时，媒体服务器还支持视频流的录制和存储，方便用户后续查看和分析。

五、地图瓦片服务器

地图瓦片服务器负责提供园区地图的瓦片数据，支持在前端界面上直观展示摄像头的分布和地理位置信息。用户可以通过地图界面快速定位到特定摄像头，调取相关监控画面，提高了监控管理的便捷性。

部署

前后端和 RTMP 服务器统一打包构建为 Docker Image：crazyher/campus-surveillance-system

其中容器内 80 端口是 HTTP 服务，1515 是 RTMP 服务

监控算法端单独打包构建为 Docke Image：crazyher/campus-surveillance-ai-end

前端

前端页面采用 React 技术栈编写，并嵌入 leaflet 地图渲染引擎以加载自定义图层。监控视频的实时流播放采用 HLS 协议。其中的 HLS 播放器使用 hls.js。

后端

后端使用 Typescript 语言并基于 Node.js 的 Nest 框架编写，主要负责处理业务逻辑，包括保存自定义园区地图数据、数据库 IO、提供前端管理操作的接口和监控算法端的事件上报接口。通过与监控算法端的解耦，以避免 AI 算法影响后端性能和稳定性。

监控算法端

监控算法端使用 Python 编写，主要任务是拉取监控摄像头提供的 RTSP/RTMP 流，以 RTMP 的格式推给本系统的 RTMP 服务器，同时对流画面基于深度学习算法进行实时检测。

摄像头配置的获取和异常事件的上报通过与后端 Websocket 实时通信完成。

基本流程：

1. 与后端建立 WS 连接
2. 后端验证管理员账号密码，鉴权通过后由后端下发摄像头配置规则和拉流地址
3. 为每一个摄像头创建工作进程，在其中：
   • 启动子线程执行 ffmpeg 把摄像头原始拉流地址推流给 RTMP 服务器
   • 对原始拉流地址基于配置的报警规则做实时目标检测。