React中同时使用MediaPipe FaceMesh与FaceDetection模型的问题

问题核心是画布绘制时的覆盖逻辑错误：虽然两个模型都输出了结果，但绘制时要么重复清空画布，要么没有基于同一帧画面叠加绘制，导致后绘制的内容覆盖了前一个。

关键修复步骤 #

1. 以原始视频帧为绘制基底：每一帧绘制前，先把当前视频帧完整画到画布上，确保所有模型的绘制都叠加在原始画面之上，而非清空画布后重新绘制。
2. 顺序叠加两个模型的绘制结果：先画FaceDetection的检测框，再画FaceMesh的关键点（或反之），不要在两次绘制之间清空画布。

代码示例（JavaScript） #

假设你使用MediaPipe的Web API，修复后的核心绘制逻辑如下：

// 获取画布上下文
const canvas = document.getElementById('output_canvas');
const ctx = canvas.getContext('2d');

// 处理模型结果并绘制
function drawResults(image, detections, faceLandmarks) {
  // 1. 先绘制原始视频帧作为底图
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  // 2. 绘制FaceDetection的检测框
  if (detections) {
    detections.forEach(detection => {
      const box = detection.boundingBox;
      // 设置检测框样式
      ctx.strokeStyle = '#2ecc71';
      ctx.lineWidth = 3;
      // 计算画布上的坐标
      const x = box.xMin * canvas.width;
      const y = box.yMin * canvas.height;
      const width = (box.xMax - box.xMin) * canvas.width;
      const height = (box.yMax - box.yMin) * canvas.height;
      // 绘制矩形
      ctx.strokeRect(x, y, width, height);
    });
  }

  // 3. 绘制FaceMesh的关键点
  if (faceLandmarks) {
    faceLandmarks.forEach(landmarks => {
      ctx.fillStyle = '#e74c3c';
      landmarks.forEach(landmark => {
        const x = landmark.x * canvas.width;
        const y = landmark.y * canvas.height;
        // 绘制关键点圆点
        ctx.beginPath();
        ctx.arc(x, y, 2, 0, 2 * Math.PI);
        ctx.fill();
      });
    });
  }
}

// 帧处理逻辑
async function processFrame(video) {
  // 同时获取两个模型的结果（确保处理同一帧）
  const detectionResults = await faceDetectionPipeline.process(video);
  const meshResults = await faceMeshPipeline.process(video);

  // 调用绘制函数
  drawResults(video, detectionResults.detections, meshResults.multiFaceLandmarks);

  // 循环处理下一帧
  requestAnimationFrame(() => processFrame(video));
}

额外注意事项 #

• 如果使用MediaPipe官方的drawUtils工具函数，比如drawDetections或drawFaceLandmarks，这些函数默认不会清空画布，只需按顺序调用即可，无需手动实现绘制逻辑。
• 确保两个模型处理的是同一帧视频画面，避免因帧不同步导致绘制错位。

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