Cursor实践-集中视频监控管理系统

完整新的需求

1、关键词搜索

markdown 复制代码

使用萤石 ezuikit-js SDK，结合vue3技术，实现PC端控制视频的直播和回放，设备控制、设备查询与管理功能。
1. 默认展示第一个视频，支持切换1/4/9宫格。
2. 每个视频可单独控制播放、回放、云台（放大缩小）、截图功能。
3. 整体操作区切换布局。
4. 设备查询与管理功能
5. 设备查询与管理：需要从萤石云API获取设备列表，显示设备状态（在线/离线），并允许用户选择设备来添加到当前布局中。这部分可能需要调用萤石的设备列表接口，并处理分页和筛选。
6. 性能优化：多视频流同时播放可能影响性能，需要考虑按需加载、非活动窗口暂停播放、分辨率切换等策略。例如，使用Intersection Observer来检测视频元素是否在视口中，从而暂停或恢复播放。
7. 错误处理与用户反馈：处理视频加载失败、设备离线等情况，给出提示信息。例如，当设备离线时，显示离线状态并禁用控制按钮。
这个视频列表，默认展示一个屏幕展示第一个返回的视频。可选择4个视频在屏幕中间同时展示、也可以选择9个视频在屏幕中间同时展示。
每个视频可以单独控制放大、缩小、播放、回放等的操作区，也有一个整体的操作区，能控制1屏展示1个、4个、9个视频的控制。注意控制分屏后，视频加载的性能。避免卡顿。视频设备离线状态的给出列表说明。