国标视频平台-视频调阅与电子地图功能实现

视频调阅与电子地图src/pages/video-filters本文档将描述视频调阅与电子地图在前端的实现思路、模块边界以及与后端的协作方式。实现集中在src/pages/video-filters目录通过pageType在同一套壳里切换右侧主区域分屏预览或地图。项目地址https://github.com/openskeye/skeyevss_frontend_web1. 为什么共用一个大页面index.tsx中Main组件接收pageType:maps|video-preview左侧始终是「筛选区」Tabs切换设备列表DeviceMenus与组织架构DepartmentTrees权限由Setting中的permissionIds/super控制如P_1_4_1、P_1_4_2。右侧按pageType二选一video-preview→components/preview.tsx多分屏网格maps→components/maps.tsxLeaflet 地图 标记弹窗内嵌播放器这样设备树、通道选择、与通道列表相关的状态channelSelected、previews等可以复用地图模式额外把DeviceMenus的「点位设置」「点击定位」接到MapRef。2. 视频调阅数据流与交互2.1 整体结构右侧 preview.tsx页面状态左侧筛选DeviceMenusDepartmentTreespreviews 九宫格槽位channelSelected 字典分屏数 1/4/9/16分屏网格CVideoBox x N用户在树或列表中点选通道 →onSelectChannel更新channelSelected并在当前selectedIndex对应的格子里写入该通道uniqueId若该通道已在其他格则腾挪/去重然后焦点切到下一格轮询布局。previews: string[]长度等于splitStylemodel.ts里SplitStyle枚举每个元素是通道uniqueId或空串。视频调阅电子地图2.2 播放器与取流核心每个有信号的格子渲染#components/video的CVideoBox传入deviceUniqueId、channelUniqueId。组件内部调用GetVideoStream#repositories/apis/base→/internal/vss/video/stream由后端生成/拉取媒体流并返回多协议播放地址如 HTTP-FLV、WebRTC 等。要点见src/components/video/index.tsx成功后把VideoStreamResp存本地 state并通过videoStream回调向上抛出父组件用setVideoStreamRefCall(uniqueId, v)缓存供「当前选中格」的云台控制等使用。直播默认按系统设置里的mediaServerVideoPlayAddressType选一条地址回放startAt/endAt非零时偏向 HTTP-FLV并会走StopVideoStream、PlaybackControl等配套接口。组件卸载时在useEffectcleanup 里stopVideoStream()避免僵尸流。2.3 分屏、轮播、预设能力实现要点1/4/9/16 分屏SplitStyleonSetSplitStyle切换时若当前选中格超出范围则回到 0全屏screenfull包住整个#videos容器轮播handleSlideVideos打开ChannelsPopupsetInterval按页把previews更新为通道 id 的滑动窗口当splitStyle 通道数时自动停轮播本地预设VideoPreviewPreinstall#repositories/cache/ls存title splitStyle selectedIndex previews应用时用ChannelListApi按uniqueId批量拉回通道实体2.4 组织架构侧栏fetchChannels拉全量通道并按depIds聚合成channelGroups右键部门可「设置分组」批量改depIds与通道管理 APIChannelUpdate一致。通道节点点击行为与设备树一致最终都走onSelectChannel。3. 电子地图瓦片、标记与弹窗内播放3.1 技术选型react-leafletMapContainer、TileLayer、Marker、Popup。辅助组件#components/sundryDirectTianDiTuLayer在线天地图、MapClickHandler、MapPointController程序化移动中心/缩放、MapSizeUpdater左侧折叠时触发表单重算尺寸。3.2 标记从哪来loadChannels调用ChannelListApi条件为纬度、经度均大于 0const loadChannels (): void { void ChannelListApi({ all: true, conditions: [ { column: latitude, value: 0, operator: Operator.gt }, { column: longitude, value: 0, operator: Operator.gt } ] }).then( ...返回的list与maps设备字典拼成MapMarkerposition: [latitude, longitude]使用Leaflet 约定[lat, lng]。另外有一个固定的中心点defCenterPoint可来自系统设置mapCenterPoints或常量默认值。3.3 底图策略根据 Recoil 里的Setting若配置了本地瓦片路径mapTiles走TileLayerurl为{proxy-file-url}/{mapTiles}/{z}/{x}/{y}.png离线包。否则若配置了tmap-key走DirectTianDiTuLayer在线天地图矢量 注记。初始center/zoom来自mapCenterPoints、mapZoom。3.4 弹窗里的视频与云台每个通道Marker的Popup内渲染MapDevicePopup内嵌同一套CVideoBox同样走GetVideoStream。videoStream回调里setVideoStreamRefCall(channelUniqueId, v)setSelectedVideo(v)供全局「当前流」展示码率等。若设备支持控制controlState()在弹窗顶部渲染ControlWidget云台拖拽等与视频调阅里控制条一致。CMarker在click时调用tracingMenu(channelItem, false)在popupclose时tracingMenu(..., true)用于与左侧设备树展开/高亮联动。3.5 父组件驱动的地图 APIMapRefuseImperativeHandle对外暴露reloadMap({ channelItem })以该通道坐标为新中心、zoom: 10清空非中心标记后重新loadChannels例如在设备树里编辑完坐标后刷新。location({ channelItem })MapPointController飞到该点并对匹配坐标的 markeropenPopup()。设备树侧通过reloadMap/location与channelClick地图模式点通道名则定位与地图联动地图模式下还可把SetChannelPoints作为DeviceMenus的pointComponent在树上维护经纬度需许可且非许可证错误状态。4. 注意点性能多分屏下多个CVideoBox会并发拉流需注意浏览器解码与媒体服务路数轮播会频繁切换格子依赖组件卸载时stopVideoStream。HTTPSGetVideoStream会传https: window.location.protocol https:与 WebRTC/WSS 链路一致。坐标系若后端存 GCJ-02/WGS84需与天地图/离线瓦片一致否则会出现偏移此仓库前端按「直接使用通道经纬度」假定已与底图匹配。5. 关键文件索引路径作用src/pages/video-filters/index.tsxpage入口筛选 pageType分支src/pages/video-filters/components/preview.tsx分屏 UI、预设、全屏、轮播入口src/pages/video-filters/components/maps.tsxLeaflet、标记、取带坐标通道、MapRefsrc/pages/video-filters/components/control-widget.tsx弹窗内云台控制src/pages/video-filters/model.ts分屏枚举src/components/video/index.tsx统一取流与播放器切换src/repositories/apis/base.tsGetVideoStream等接口