1 基于RTSP流媒体的实时视频监控与转码Web平台
核心目标:将传统安防摄像头(支持RTSP协议)产生的视频流,通过低延迟、高兼容性的方式,在标准Web浏览器中实时播放与 统一管理。
项目价值:解决浏览器原生不支持RTSP/RTMP等流媒体协议的问题,实现跨平台、无需插件的“开箱即看”体验。
1. 流媒体中间件 (MediaServer):这是项目的技术核心,负责最底层的协议转换。
核心作用:协议转换:将摄像头发出的RTSP流,实时转换为HTTP-FLV或HLS流。FLV格式延迟更低(2-3秒),HLS兼容性更好但延迟稍高。
流管理:提供流的拉取、分发、录制、快照等基础功能。
2. 后端服务 (Spring Boot):作为业务中枢,连接前端、数据库和MediaServer。
核心职责:
设备管理API:提供摄像头的增删改查、状态监测(在线/离线)接口。
流地址生成与鉴权:根据设备信息,动态生成对应的播放地址(如 http://media-server:port/live/device_id.flv),并加入token等安全校验,防止非法访问。
信令转发:如需云台控制(PTZ),则通过后端将控制指令转发给摄像头。
其他服务:用户权限管理、视频录制计划与文件管理等。
3. 前端界面 (Vue + Element UI)
提供直观、易用的用户操作界面。
播放器集成:
方案选择:这是前端关键。对于HTTP-FLV流,通常集成 flv.js(一个纯JavaScript的FLV播放器);对于HLS流,在支持MSE的浏览器中可使用 hls.js,或直接使用 video.js(它封装了多种格式的播放能力)。
实现:在Vue组件中封装播放器库,通过<video>标签进行控制。
UI构建:利用 Element UI 快速搭建包括设备树、视频监控网格(多画面)、播放控制栏(播放/暂停、截图、全屏)、时间轴回放等组件。
状态管理:使用Vuex或Pinia管理全局的播放列表、设备状态等数据。