Web Worker 并行处理多路视频流需为每路分配独立实例,按自身帧率、分辨率等属性差异化抽帧,通过 requestVideoFrameCallback 独立调度,配合 OffscreenCanvas 零拷贝与时间戳归集实现高效隔离处理。

用 Web Worker 并行处理多路视频流的帧率差异化抽帧,核心是让每路流按自身节奏独立采样,互不干扰,同时避免主线程卡顿。关键不在“同时启动”,而在“各自节拍可控、资源不冲突”。
每路流绑定专属 Worker 实例
不要复用单个 Worker 处理所有视频流——不同分辨率、帧率、编码格式会导致处理耗时不均,容易互相拖慢。应为每路视频创建独立 Worker:
- 主线程为每个 video 元素生成唯一 ID(如 stream-001),并传入对应 Worker 初始化参数
- Worker 文件内通过 self.name 或初始化消息识别归属,建立独立状态机(如上一帧时间戳、目标间隔、缩略图尺寸)
- 多个 Worker 可并行调用 requestVideoFrameCallback,浏览器底层会为每路流单独调度,天然支持差异化帧触发
按需设定各流的抽帧策略
差异化不是靠猜,而是根据流的实际属性动态配置。例如:
- 监控流:30fps 源,只需每秒取 1 帧 → 设置间隔 1000ms
- 会议流:本地摄像头 15fps,但关键动作少 → 可设为 500ms + 运动检测预筛(Worker 内用简单像素差判断是否跳过)
- 回放流:25fps 录像,需生成高密度缩略图 → 设为 200ms,但启用 OffscreenCanvas 复用与 Transferable 零拷贝
共享资源需显式隔离与复用
Worker 间不能共享变量,但可复用同一套轻量工具函数(如缩放算法、JPEG 编码参数)。重点在于内存对象隔离:
- 每个 Worker 独立创建 OffscreenCanvas 和 ImageData,尺寸按本流目标缩略图预设(如 160×90),不随源分辨率变化而重分配
- 主线程传入的 Uint8ClampedArray.buffer 必须用 postMessage(data, [data.buffer]) 转移,避免拷贝开销
- 缩略图生成后立即调用 offscreenCanvas.convertToBlob(),不缓存原始像素,Worker 内不保留对 ArrayBuffer 的引用
结果归集与时间对齐提示
并行不等于无序。主线程收到多路缩略图后,需按流 ID 匹配并标记时间戳:
- Worker 在 postMessage 中附带 { streamId, timestamp, blobUrl },timestamp 用主线程传入的 video.currentTime 或 performance.now()
- UI 层可据此显示“最后更新:200ms前”或“延迟:42ms”,让用户感知各流处理状态差异
- 若某路流长时间无响应,主线程可主动 terminate 对应 Worker 并重建,不影响其余流

















