如何在Web Worker中正确导入TensorFlowJS手势检测模块？

核心配置要点 #

Web Worker 必须以ES模块模式启动，同时确保 TensorFlow.js 及手势检测模型在 Worker 环境中正确导入。

主页面脚本（UI线程） #

// 获取视频元素
const video = document.getElementById('video');
// 以模块模式创建Web Worker
const handPoseWorker = new Worker('./hand-pose-worker.js', { type: 'module' });

// 初始化摄像头
async function initCamera() {
  const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
  video.srcObject = stream;
  await video.play();
  // 持续向Worker推送视频帧
  requestAnimationFrame(sendFrameToWorker);
}

// 转换视频帧为ImageData并发送给Worker
function sendFrameToWorker() {
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0);
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  handPoseWorker.postMessage(imageData);
  requestAnimationFrame(sendFrameToWorker);
}

// 接收Worker返回的检测结果并更新UI
handPoseWorker.onmessage = (event) => {
  const detectedPoses = event.data;
  // 复用原有的手势渲染逻辑
  renderPoses(detectedPoses);
};

// 初始化流程
initCamera();

// 原有的UI渲染函数（保持不变）
function renderPoses(poses) {
  // 这里写你之前的关键点绘制逻辑
}

Web Worker 脚本（hand-pose-worker.js） #

方式1：使用npm依赖（需构建工具支持） #

// 导入TensorFlow.js及手势检测模型
import * as tf from '@tensorflow/tfjs';
import * as handPoseDetection from '@tensorflow-models/hand-pose-detection';

let handDetector;

// 初始化手势检测器
async function initDetector() {
  const modelConfig = {
    runtime: 'tfjs',
    modelType: 'lite' // 优先选lite模型提升速度
  };
  handDetector = await handPoseDetection.createDetector(
    handPoseDetection.SupportedModels.MediaPipeHands,
    modelConfig
  );
}

// 处理主页面发送的帧数据
self.onmessage = async (event) => {
  // 首次收到帧时初始化模型
  if (!handDetector) {
    await initDetector();
  }
  const frameData = event.data;
  // 执行手势检测
  const poses = await handDetector.estimateHands(frameData, {
    flipHorizontal: true // 适配前置摄像头镜像
  });
  // 将检测结果发回主页面
  self.postMessage(poses);
};

方式2：直接使用CDN（无需构建工具） #

如果是纯静态页面，将Worker中的导入替换为CDN链接：

import * as tf from 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.14.0/dist/tf.esm.js';
import * as handPoseDetection from 'https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection@2.0.1/dist/hand-pose-detection.esm.js';

// 后续初始化及检测逻辑与方式1完全一致

关键注意事项 #

• 必须给 Worker 指定 { type: 'module' }，否则无法使用ES模块导入语法。
• Worker 中禁止操作DOM，所有UI渲染逻辑必须留在主页面线程。
• 发送帧数据时优先使用ImageData，避免传递DOM元素（Worker无法访问）。
• 若追求极致速度，可调整modelType为lite、降低视频分辨率或减少检测帧率。

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