高速公路视频监控平台移动端产品系统Vibe Coding

高速公路视频监控平台原有能力主要集中在 PC 端和监控中心，管理人员、路政养护人员和现场处置人员一旦离开坐席，就只能通过电话询问现场情况，无法直接查看视频。高速公路线路长、点位多、设备层级深，现场人员往往难以快速找到目标摄像机；地图、实时视频、云台控制、录像回放和抓拍图片分散在不同入口，操作路径较长；球机控制基本只能在 PC 上完成，现场无法根据实际情况调整视角；同时，移动网络带宽波动、iOS 与 Android 地图能力差异明显，也进一步限制了移动化使用。因此，项目立项的核心目的，是把监控中心的关键能力延伸到手机端，让工作人员在巡检、值守、应急和取证现场也能随时看视频、找设备、控制云台、查看录像和保存证据。
移动端通过“地图与设备树”解决找设备难的问题，通过 WebRTC 低延迟播放解决现场看实时画面（即直播）的问题，通过触控云台、预置位和横屏全屏解决现场操控球机的问题，通过录像回放和抓拍相册解决事后检索与取证的问题；同时用默认子码流、网络自适应、iOS 和 Android 差异化适配以及统一的登录鉴权，保证弱网和双端环境下的可用性。最终把原来“固定在监控中心”的视频监控能力，变成“在路上也能看、能控、能查、能留证”的移动化能力。

移动端共包含 10 个页面和 4 个底部 Tab，构成“地图找设备—实时看画面—云台控制—录像回放—抓拍留证”的完整流程。地图监控支持设备与路况图层、3D 与卫星切换、路段搜索定位、摄像机聚合和点位弹窗；实时播放以组织、路段、设备树展示摄像机和在线数量，并支持名称搜索、折叠和下拉刷新；云台页提供 WebRTC 实时画面、单屏、四屏与八屏切换、附近摄像机滑动、四方向长按、速度调节、变倍、变焦、聚焦、预置位设置与调用，以及抓拍、横屏全屏、双指缩放和拖动；录像回放支持按日期、机构、路段、设备和事件分类检索，使用原生播放器播放 MP4，并支持倍速和删除；抓拍相册支持按时间段和设备筛选、网格预览和分页加载。账号模块包括登录、注册、个人资料、修改密码和退出登录，登录、注册、改密均对密码进行 AES 加密，并提供密码强度校验、默认密码强制修改和会话失效处理。

我主要负责移动端核心功能的设计与实现：搭建 uni-app + Vue 3 工程和路由、TabBar，完成地图监控、实时设备树、云台控制、录像回放、抓拍相册及账号模块；封装统一请求、登录态、设备字段归一化、设备缓存、媒体地址构建、全屏和密码加密等工具层；重点攻克 App 端 WebRTC 播放、多屏视频调度、横竖屏切换和 iOS 与 Android 地图差异。
实现亮点包括：通过 renderjs 在视图层创建 DOM video 并注入 ZLMRTCClient，解决逻辑层无法操作 DOM 的问题；使用单屏、四屏和八屏分别建立独立视频实例，并错峰启动，降低多路视频协商的压力；iOS 使用原生聚合、Android 使用数据层自聚合，解决 marker 删除和样式不可控问题；通过 cover-view 或 nvue 覆盖层解决原生地图遮挡；统一使用 6 位十六进制颜色，避免双端颜色字节序差异。难点主要在原生地图层级、双端聚合差异、多路视频资源释放、横竖屏状态复位以及后端多套设备字段和云台指令码的适配。