使用MediaPipe Hands构建React组件时遇TypeError构造函数错误

我正在尝试使用Google的MediaPipe Hands库构建一个React组件，却遇到了以下错误：typeError: hands.Hands is not a constructor。以下是我的代码：

const LandmarkExtractionComponent = (): JSX.Element => {
    useEffect(() => {
        const videoElement = document.getElementById("input_video") as HTMLVideoElement;
        const canvasElement = document.getElementById("output_canvas") as HTMLCanvasElement;
        const canvasCtx = canvasElement.getContext("2d");

        if (!canvasCtx) {
            return;
        }

        const onResults = (results: mpHands.Results): void => {
            canvasCtx.save();
            canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
            canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
            if (results.multiHandLandmarks) {
                for (const landmarks of results.multiHandLandmarks) {
                    drawingUtils.drawConnectors(canvasCtx, landmarks, mpHands.HAND_CONNECTIONS, {
                        color: "#00FF00",
                        lineWidth: 5
                    });
                    drawingUtils.drawLandmarks(canvasCtx, landmarks, { color: "#FF0000", lineWidth: 2 });
                }
            }
            canvasCtx.restore();
        };

        const hands = new mpHands.Hands({
            locateFile: (_file: string) => {
                return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
            }
        });
    
        hands.setOptions({
            maxNumHands: 1,
            modelComplexity: 1,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });

        hands.onResults(onResults);

        const camera = new cameraUtils.Camera(videoElement, {
            onFrame: async () => {
                await hands.send({ image: videoElement });
            },
            width: 1280,
            height: 720
        });

        camera.start();
    }, []);

    return (
        <div>
            <UserInterfaceComponent />
        </div>
    );
};

export default LandmarkExtractionComponent;

解决步骤 #

• 修正库的导入与构造函数调用路径
  不同的引入方式对应不同的构造函数访问路径：

  • 若通过CDN全局引入：构造函数应改为new window.mediapipe.solutions.hands.Hands(...)，而非mpHands.Hands
  • 若通过npm安装：确保导入语句正确，例如：

    import { Hands } from '@mediapipe/hands';
    // 或
    import * as mpHands from '@mediapipe/hands';
    

    此时构造函数调用为new Hands(...)或new mpHands.Hands(...)，避免命名空间混淆。

• 修复代码中的变量错误
  locateFile回调里误用了未定义的file变量，需改为参数_file：

  locateFile: (_file: string) => {
      return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${_file}`;
  }
  

• 确认DOM元素存在性
  虽然使用了useEffect空依赖，但建议通过React Ref获取DOM元素，而非document.getElementById，确保组件挂载后元素已存在：

  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  
  useEffect(() => {
      const videoElement = videoRef.current;
      const canvasElement = canvasRef.current;
      if (!videoElement || !canvasElement) return;
      // 后续初始化逻辑
  }, []);
  
  // 渲染部分
  return (
      <div>
          <video ref={videoRef} id="input_video" />
          <canvas ref={canvasRef} id="output_canvas" />
          <UserInterfaceComponent />
      </div>
  );
  

• 检查版本兼容性
  MediaPipe API在版本迭代中可能变更构造函数位置，建议对照当前使用版本的官方文档确认API结构。

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