如何在JS Web Worker中挂载Video Transformer？技术方案探讨

可迁移的核心模块 #

• MediaPipe视频帧分割处理：计算密集型操作，无DOM依赖，放在Worker中可避免阻塞主线程UI。
• Video Transformer的transform函数逻辑：流块入队等纯逻辑处理，无需DOM操作即可迁移。
• OffscreenCanvas绘制：Worker支持OffscreenCanvas，分割后的帧渲染可在Worker内完成，无需主线程介入。

方案1：部分迁移（主线程解析流，Worker处理核心逻辑） #

低侵入性起步方案，保留主线程流初始化，仅迁移计算密集部分：

1. 主线程侧：
   • 创建MediaStreamTrackProcessor获取视频帧可读流。
   • 遍历流中的VideoFrame，通过postMessage将帧作为Transferable对象发送给Worker，同时在transfer列表中指定[videoFrame]避免内存拷贝。
   • 接收Worker返回的处理结果（如处理后的VideoFrame或流块），完成后续展示或流输出。
2. Worker侧：
   • 初始化@mediapipe/tasks-vision分割器（模型可通过主线程传递ArrayBuffer，或提前下载到Worker可访问路径）。
   • 监听主线程消息，接收VideoFrame后执行分割处理。
   • 使用OffscreenCanvas完成分割后的帧绘制（如蒙版叠加）。
   • 执行transform函数的流块入队逻辑，将处理后的结果通过postMessage传回主线程（同样用Transferable传递）。

方案2：全链路迁移（流解析、处理、入队均在Worker） #

适合极致解放主线程的场景，将整个视频流处理链路移入Worker：

1. 主线程侧：
   • 获取MediaStreamTrack后，将其或对应ReadableStream通过postMessage转移到Worker（在transfer列表中指定对应对象）。
   • 接收Worker传回的处理后的MediaStreamTrack，绑定到页面<video>元素展示。
2. Worker侧：
   • 接收转移的可读流，创建MediaStreamTrackProcessor读取视频帧。
   • 初始化MediaPipe分割器与OffscreenCanvas。
   • 串联完整处理逻辑：

     const processor = new MediaStreamTrackProcessor({ track: transferredTrack });
     const generator = new MediaStreamTrackGenerator({ kind: 'video' });
     processor.readable.pipeThrough(new TransformStream({
       async transform(frame, controller) {
         // 1. MediaPipe分割处理
         const segmentationResult = await segmenter.segment(frame);
         // 2. OffscreenCanvas绘制处理
         const offscreenCanvas = new OffscreenCanvas(frame.displayWidth, frame.displayHeight);
         const ctx = offscreenCanvas.getContext('2d');
         // 原帧与分割蒙版绘制逻辑...
         // 3. 生成新帧并入队
         const processedFrame = new VideoFrame(offscreenCanvas, { timestamp: frame.timestamp });
         controller.enqueue(processedFrame);
         frame.close(); // 释放原帧内存
       }
     })).pipeTo(generator.writable);
     // 将生成的Track传回主线程
     self.postMessage({ track: generator }, [generator]);
     

   • 将生成的MediaStreamTrackGenerator实例转移回主线程。

关键注意事项 #

• Transferable对象使用：VideoFrame、ReadableStream、OffscreenCanvas、MediaStreamTrackGenerator均为Transferable类型，必须在postMessage的transfer列表中指定，减少内存开销。
• MediaPipe初始化：确保@mediapipe/tasks-vision的Worker脚本可被子Worker访问，部分版本需手动指定模型路径（如createSegmenter时配置baseOptions: { modelAssetPath: 'model.tflite' }）。
• 内存管理：处理完的VideoFrame必须调用close()释放内存，避免泄漏。
• 错误监听：Worker内监听self.onerror，主线程监听Worker的error事件，及时捕获异常。

内容的提问来源于stack exchange，提问作者Joacopaz