html5视频处理需主线程负责采集与渲染、web worker专注像素计算：主线程用getusermedia和requestvideoframecallback获取帧，通过offscreencanvas提取像素并零拷贝传给worker；worker执行缩放、裁剪、格式转换等纯计算任务，结果回传主线程渲染，全程需零拷贝、对象复用与帧率节流。
HTML5 视频处理不能把帧运算全扔进 Web Worker，因为 Worker 无法访问 <video></video>、<canvas></canvas> 或 DOM。真正可行的协同方式是：主线程管“采”和“画”，Worker 管“算”——只做像素级计算，不碰渲染。
主线程负责视频采集与帧提取
必须由主线程完成以下操作：
- 调用
navigator.mediaDevices.getUserMedia()获取本地流，或接收远程MediaStream - 将流挂载到
<video></video>元素并静音播放（即使不显示，也需播放以驱动帧更新） - 使用
requestVideoFrameCallback（推荐）或定时captureStream().getVideoTracks()[0].requestFrame()触发关键帧捕获时机 - 用离屏
OffscreenCanvas或隐藏<canvas></canvas>调用drawImage(video, ...)，再通过getImageData()提取原始像素（Uint8ClampedArray） - 将像素数据连同宽高、时间戳等元信息，通过
postMessage(data, [data.buffer])零拷贝传给 Worker
Worker 负责纯计算型帧处理
Worker 收到的是已解码的 RGBA 或 YUV 像素数组（取决于主线程预处理方式），它可安全执行以下任务：
- 缩放（如双线性/最近邻）：输入 1280×720 → 输出 320×180 缩略图
- 裁剪与定位：为画中画合成准备指定区域帧（如左上角 200×150 子图）
- YUV→RGBA 转换（若主线程传入的是 YUV 格式视频帧）
- Alpha 混合叠加：多路帧按坐标+透明度逐像素合成单帧
- 简单滤镜或灰度化：遍历像素数组修改值，不依赖 canvas API
- 生成 JPEG Blob：借助
OffscreenCanvas.convertToBlob()（现代浏览器支持）
注意：若需兼容旧环境且无 OffscreenCanvas，可用纯 JS 实现轻量缩放算法（如 box-filter 简化版），直接操作 Uint8ClampedArray 输出新尺寸数组。
主线程回传与渲染闭环
Worker 处理完成后，将结果帧数据（如合成后的 Uint8ClampedArray 或 Blob）发回主线程：
- 若传回的是像素数组，主线程用
putImageData()渲染到预览<canvas></canvas> - 若传回的是
Blob，调用URL.createObjectURL(blob)生成 URL，设为<img>的src或绘制到 canvas - 每次使用完
URL.createObjectURL()后，立即调用URL.revokeObjectURL()防止内存泄漏 - 主线程应控制抽帧频率（例如每 200ms 最多处理一帧），避免 Worker 过载或帧堆积
性能关键点：零拷贝 + 复用 + 节流
实时性（≥25fps）依赖三个底层优化：
-
零拷贝传输：所有大体积数据（
ArrayBuffer、ImageBitmap）必须用postMessage(data, [transferList])移交所有权，禁止结构化克隆 -
对象复用：Worker 内提前创建固定尺寸的
ImageData或OffscreenCanvas，避免每帧 new 新对象触发 GC -
帧率节流：主线程根据
requestVideoFrameCallback的时间戳判断是否跳过当前帧；Worker 也可返回处理耗时，供主线程动态降频
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
