HTML5高性能视频帧抓取与图像处理需理清数据流向：主线程用requestVideoFrameCallback精准捕获并传输像素，Worker纯计算缩放编码，OffscreenCanvas作桥梁，配合限频、Transferable传输和跨域配置确保性能与清晰度。
要在 HTML5 中实现高性能的视频帧抓取与图像处理，关键不是堆砌 API，而是理清数据流向、线程分工和资源生命周期。主线程负责感知与调度，Worker 负责纯计算，Canvas 是桥梁而非终点。
主线程：精准捕获 + 安全传输
视频帧不能靠 setInterval 硬刷，必须依赖浏览器原生帧同步机制：
- 优先用 requestVideoFrameCallback（Chrome/Edge/Firefox 支持），它在解码完成的关键帧时刻触发，时间戳精确到微秒，避免丢帧或重复采样
- 若需兼容旧环境，退而使用 requestAnimationFrame，但需配合 video.readyState ≥ HAVE_ENOUGH_DATA 判断，防止黑帧
- 每次捕获前创建离屏 canvas（
new OffscreenCanvas(w, h)），调用ctx.drawImage(video, 0, 0, w, h)绘制，再用ctx.getImageData(0, 0, w, h)提取像素 - 传给 Worker 的必须是 Transferable 对象（如
imageData.data.buffer），加上{ transfer: [buffer] }参数，避免内存拷贝
Worker 线程：无 DOM、纯计算、可复用
Worker 里没有 video、canvas 元素，但可以创建 OffscreenCanvas 做缩放与编码：
- 创建 OffscreenCanvas：
const offscreen = new OffscreenCanvas(targetW, targetH)，再获取 2D 上下文 - 对传入的像素数组做轻量预处理（如灰度转换、ROI 裁剪），再双线性缩放——不用第三方库，手写缩放逻辑更可控、体积小
- 缩放后绘制到 OffscreenCanvas，调用
offscreen.convertToBlob({ type: 'image/jpeg', quality: 0.8 })生成 Blob - 复用 ImageData 实例：Worker 初始化时预分配目标尺寸的
new ImageData(w, h)，后续直接填值，避免频繁 GC
限频与内存控制：不加这步，性能必崩
高分辨率视频每秒产生数 MB 像素数据，不做节流会迅速拖垮内存和主线程：
立即学习“前端免费学习笔记（深入）”；
- 按时间戳限频：记录上一次处理的时间戳，只处理间隔 ≥ 300ms 的帧（例如
if (now - lastTime > 300)） - 按帧率限频：用计数器 + 时间窗口（如 1 秒内最多处理 5 帧），比固定间隔更适应网络波动或解码延迟
- 主线程收到 Blob 后立即调用
URL.revokeObjectURL(url)，Worker 不保留任何像素引用，协助垃圾回收 - 自动释放 Transferable 缓冲区：postMessage 后，主线程不再持有原 buffer，Worker 处理完即可丢弃，无需手动 delete
跨域与清晰度：两个最容易踩的坑
哪怕本地文件测试正常，上线后常因这两点失败：
-
crossorigin="anonymous" 必须加在 video 标签上，且服务端响应头含
Access-Control-Allow-Origin；file:// 协议下无效，需起本地服务 - 画布尺寸必须用
video.videoWidth/video.videoHeight，而非 clientWidth/clientHeight —— 后者受 CSS 缩放影响，会导致像素拉伸、边缘模糊 - 高清截图需保持原始宽高比：先算缩放比
scale = Math.min(maxW / vidW, maxH / vidH)，再用 drawImage 的九参数重映射，避免变形
