大屏定时截图上传需求复盘.md

大屏定时截图上传需求复盘

关键点：

1. 截图方式（html2canvas、svg-to-image、webRTC），优缺点分析，最后选择 html2canvas，截图原理剖析。
2. 截图时 canvas 元素模糊，使用 html2canvas 截图发现 Unity 场景（canvas 元素）截出来是第一帧，后设置 preserveDrawingBuffer=false 解决。
3. 截图上传，因为截图出来是 base64 格式，后转成 Blob 格式后成功上传
4. 内网 WOS 上传问题，想好使用场景，在上传时使用的对应的内外网域名。
5. 定时截图，如何找到准确的定时方案，JS 自带的定时器不准确，尤其在 tab 页切换时。后选择了 Web Worker 里新建定时器的方式，在到达截图时通知到主线程执行截图方法即可（Web Worker 内不可执行 DOM 操作，所以通知主线程去做截图操作）。

优化点：

1. WOS 加载时机，在页面加载完成后，空闲时或需要时加载，不要影响主要功能。
2. 定时器优化，在当前标签页隐藏时，清楚定时器（因为大屏也退出了）。节省 CPU 和网络资源。
3. 代码优化，对功能模块及工具函数进行拆分，不要都放在一个文件里。
4. 图片压缩，截图图片在内容较多的时候，图片过大，可以判断图片大小，对大于 3M 的图片进行一个简单的压缩处理。
5. 截图到上传耗时过长，截图操作进行后到截图上传完成这个过程，中间耗时过长（其中 html2canvas 遍历 DOM 最耗时间、其次 WOS 鉴权和上传、然后是截图上传），所以会导致定时截图规定的时候并不准确，最好是在上一个截图上传完成之后在启动下一个定时。
6. 补偿机制，从截图到上传成功这个过程涉及步骤较多，执行过程中可以出现错误，所以在出现错误的时候定时截图是否继续，还是尝试几次之后字停止截图，然后上传错误日志。
7. 最新截图同名覆盖，对统一驾校的 PC 端截图命名唯一（jxId_pc_robot_screen），然后同名覆盖，获取时通过图片 RUL?时间戳去访问。每个驾校只保留一个最新的图（这块优化从一开始就应该想到，之前是驾校id-时间戳命名的..）。
8. WOS-JS 资源加载，在截图函数执行前加载。如果有则截图，没有则加载 WOS-JS 资源

出错点：

1. 影响主流程，WOS 的 JS 文件加载应该在 Unity 文件之后执行，不要阻碍主要的资源加载和功能。
2. 代码遗漏，Unity 监听加载完成的方法未使用 uesEffice 包裹，导致进入时执行多次。
3. 网络错误，WOS 内网上传、外网可访问的问题，第一次使用对这块不是很清楚，走了很多弯路。