1.项目介绍：该项目主要是配合公司的 IPC 产品使用，利用 Vue/Vue3+TypeScript 框架进行开发。项目涉及的核心功能包括监控实时视频播放、回放视频播放，以及 AI 检测区域绘制等。2. 功能特点①监控/回放视频功能：● 码流传输：使用 WebSocket 技术进行码流传输，确保视频数据的实时性和稳定性。● 播放技术选择：根据码流分辨率和视频编码（如H265或H264）选择最佳的播放技术。对于高分辨率或H265编码的视频，使用基于 QT 开发的 Windows 插件播放；对于低分辨率或H264编码的视频，则使用 WebGL和 MSE 进行网页内播放。②AI 检测区域绘制：通过 Canvas API 实现检测区域的绘制功能，支持多边形、矩形、检测线段、数据表格等多种绘制类型。此外，还包括车辆/人的检测框绘制。2.工作亮点①Canvas 库开发：● 业务导向设计：针对项目的实际需求，设计并开发了一个 Canvas 绘制库。这个库不仅满足了当前项目的绘制需求，而且为未来的相似业务提供了快速开发的基础。● 高效复用：通过绘制库的使用，后续业务在面临相似绘制需求时，可以直接利用已有功能，大大提高了开发效率和代码复用性。 ②视频组件封装：● 组件化思想：将视频功能封装成独立的组件，使得在需要展示视频的页面中，只需简单引入该组件即可，极大地减少了代码冗余。 ● 便于维护：封装后的视频组件使得代码结构更加清晰，方便后续的需求变更和代码维护工作。③QTWeb 端组件：QTWeb 端组件是一个关键的部分，它主要负责 Web 页面与 QT 插件之间的交互。由于我们的项目中涉及到一些高分辨率或H265编码的视频播放需求，这些视频需要利用 QT 框架开发的 Windows 插件来提供流畅的播放体验。QTWeb 端组件的任务就是确保 Web 页面能够与这个 QT 插件进行无缝集成，从而实现视频内容在 Web 页面上的流畅播放。● 无缝集成：QTWeb 端组件通过 WebSocket 与 QT 插件进行通信，确保两者之间的数据交换和命令传递能够顺畅进行。● 视频播放控制：该组件提供了视频播放的控制功能，如播放、暂停、停止、快进、快退等，使得用户能够在 Web 页面上直接操作 QT 插件播放视频。● 视频窗口：首先会获取视频窗口在 Web 页面上的位置信息。这通常涉及到计算视频窗口的坐标（如左上角的位置）以及它的大小（宽度和高度），通过 window 对象和 DOM Api 获取位置信息，再计算后，发送给 QT 插件，还需要兼容各浏览器● 错误处理：组件还包含了错误处理机制，能够捕捉并处理视频播放过程中可能出现的各种错误情况，如网络中断、视频格式不支持等。④内存优化：● 问题定位：在接手项目的时候，针对预览页面挂载时存在的浏览器内存崩溃问题，通过控制面板的内存排查，准确地定位到了导致内存溢出的代码位置● 显著效果：经过一系列优化措施，如翻译文件的按需引入、视频数据堆积处理、路由模块动态导入、闭包释放等，不仅解决了内存崩溃问题，还显著降低了运行内存占用，从原来的30多M降低到了10多M，提升了应用的性能和稳定性。⑤性能优化：● 根据机型需求，将不必要的v-show 指令替换为v-if 指令，提高了页面的渲染性能和响应速度。● 引入 indexdb 技术，实现了图片数据的本地存储和快速访问，提高了应用的性能和用户体验。● canvas 绘制优化，通过分静态和动态层进行绘制优化，提高了 Canvas 的绘制性能和效率。⑥脚本：● Git 提交脚本：编写了一个用于自动化 Git 提交的脚本，简化了开发过程中的版本控制流程，提高了开发效率。● 打包部署脚本：用于项目的打包和部署，实现了自动化的构建和发布流程，进一步提升了项目的开发和管理效率。