React Web应用中正确关闭MediaPipe手部Landmark模型预测的方法

你遇到的问题核心是直接调用handModel.current.close()时，模型的预测循环或视频流资源仍在运行，和WebGL上下文销毁操作冲突，导致浏览器线程死锁冻结。以下是高效且安全的清理方案：

1. 先终止预测循环，再执行模型关闭 #

MediaPipe的手部检测依赖持续的帧处理循环（通常用requestAnimationFrame实现），如果不先停止这个循环就关闭模型，会导致WebGL资源在被占用时被销毁，触发死锁。

• 用ref存储动画帧ID，在预测启动时记录：

  const animationFrameId = useRef(null);
  
  const runPrediction = async () => {
    // 你的帧预测逻辑
    animationFrameId.current = requestAnimationFrame(runPrediction);
  };
  

• 在清理函数中先取消动画帧：

  useEffect(() => {
    // 模型加载、预测启动逻辑
  
    return () => {
      // 先停止预测循环
      if (animationFrameId.current) {
        cancelAnimationFrame(animationFrameId.current);
      }
      // 后续执行模型关闭操作
    };
  }, []);
  

2. 断开视频流与模型的关联 #

如果应用通过视频流持续给模型喂帧，需要先停止视频轨道，避免模型在关闭时仍尝试读取流资源：

const videoRef = useRef(null);

useEffect(() => {
  // 模型加载、预测启动逻辑

  return () => {
    // 停止动画帧
    if (animationFrameId.current) {
      cancelAnimationFrame(animationFrameId.current);
    }
    // 停止视频流轨道
    if (videoRef.current?.srcObject) {
      const tracks = videoRef.current.srcObject.getTracks();
      tracks.forEach(track => track.stop());
    }
    // 最后关闭模型
    if (handModel.current) {
      await handModel.current.close();
      handModel.current = null;
    }
  };
}, []);

3. 完整的useEffect清理示例 #

结合以上步骤，完整的清理逻辑实现如下：

import { useEffect, useRef } from 'react';
import { Hands } from '@mediapipe/hands';

const RingDemo = () => {
  const handModel = useRef(null);
  const animationFrameId = useRef(null);
  const videoRef = useRef(null);

  useEffect(() => {
    const initModel = async () => {
      handModel.current = new Hands({
        locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`
      });
      // 配置模型参数
      handModel.current.setOptions({
        maxNumHands: 1,
        modelComplexity: 1
      });
      // 结果回调（绘制戒指逻辑）
      handModel.current.onResults((results) => {
        // 你的戒指绘制代码
      });
      // 启动预测循环
      const runPrediction = async () => {
        if (videoRef.current && handModel.current) {
          await handModel.current.send({ image: videoRef.current });
        }
        animationFrameId.current = requestAnimationFrame(runPrediction);
      };
      runPrediction();
    };

    initModel();

    return async () => {
      // 1. 停止预测循环
      if (animationFrameId.current) {
        cancelAnimationFrame(animationFrameId.current);
        animationFrameId.current = null;
      }
      // 2. 停止视频流
      if (videoRef.current?.srcObject) {
        const tracks = videoRef.current.srcObject.getTracks();
        tracks.forEach(track => track.stop());
        videoRef.current.srcObject = null;
      }
      // 3. 关闭模型并释放引用
      if (handModel.current) {
        await handModel.current.close();
        handModel.current = null;
      }
    };
  }, []);

  return <video ref={videoRef} autoPlay playsInline muted />;
};

export default RingDemo;

额外排查要点 #

• 确保没有其他组件或全局变量持有模型引用，导致资源无法被GC回收
• 如果使用了自定义WebGL渲染器（比如配合AR的Three.js），要同步停止渲染循环并释放对应WebGL资源

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