面部网格

面部网格可视化渲染一个 468 点面部标志线框覆盖层。它提供关于面部检测质量和跟踪精度的详细视觉反馈。

工作原理

SDK 的面部网格模块实时检测 468 个面部标志点，映射眼睛、眉毛、鼻子、嘴巴和下颌线的轮廓。可视化会在这些点之间绘制连接线，在检测到的面部上形成线框网格覆盖层。可选的扫描动画提供微弱的扫掠外观，以确认正在主动跟踪。

配置

JavaScript

import { createVitalSignCamera } from 'ts-vital-sign-camera';

const camera = createVitalSignCamera({
  // ... 其他配置
  visualizationOptions: {
    faceMesh: {
      enabled: true,
      color: 'lightgreen',       // 线框颜色（默认：'lightgreen'）
      lineWidth: '1%',           // 像素，或面部宽度的百分比（默认：'1%'）
      animate: true,             // 扫描动画（默认：true）
      animationDirection: 'both',// 'horizontal' | 'vertical' | 'both' | 'ripple'
      animationSpeed: 1.0,       // 动画时长（秒）
      animationDelay: 0,         // CSS animation-delay（秒）
      simplifyFaceMesh: false    // 移除外圈与锯齿网格（默认：false）
    }
  }
});

React

import { VitalSignCamera } from 'react-vital-sign-camera';

const App = () => (
  <VitalSignCamera
    visualizationOptions={{
      faceMesh: {
        enabled: true,
        color: '#00ff88',
        animate: true,
        animationDirection: 'ripple'
      }
    }}
  />
);

Vue

<template>
  <VitalSignCamera
    :visualizationOptions="visualizationOptions"
  />
</template>

<script setup>
const visualizationOptions = {
  faceMesh: {
    enabled: true,
    color: '#64ffda',
    lineWidth: '0.5%',
    animate: true,
    animationDirection: 'both',
    animationSpeed: 6,
    simplifyFaceMesh: true
  }
};
</script>

动画方向

方向	行为
'vertical'	上下扫掠网格（未设置时的默认值）
'horizontal'	左右扫掠网格
'both'	四向扫掠
'ripple'	从鼻尖向外扩散的涟漪

扫掠是应用在线框上的 CSS 遮罩动画；animationSpeed 控制一次扫掠的持续时间（秒），animationDelay 偏移动画的起始时间（使用负值可从周期中间开始）。

简化网格

将 simplifyFaceMesh 设为 true 可移除外圈以及周围的结构性锯齿连接，留下更简洁、聚焦于面部轮廓的网格。当完整网格在视觉上过于密集时（例如小屏幕）非常有用。

动态更新

// 更改动画方向
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  faceMesh: { animationDirection: 'ripple' }
};

// 简化网格
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  faceMesh: { simplifyFaceMesh: true }
};

// 停用
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  faceMesh: { enabled: false }
};

FaceMeshOptions 接口

type FaceMeshAnimationDirection = 'horizontal' | 'vertical' | 'both' | 'ripple';

interface FaceMeshOptions {
  enabled?: boolean;                  // 启用/停用覆盖层
  color?: string;                     // CSS 颜色（默认：'lightgreen'）
  lineWidth?: number | `${number}%`;  // 像素，或面部宽度的百分比（默认：'1%'）
  animate?: boolean;                  // 启用扫描动画（默认：true）
  animationSpeed?: number;            // 动画时长（秒）
  animationDelay?: number;            // CSS animation-delay（秒）
  animationDirection?: FaceMeshAnimationDirection;
  simplifyFaceMesh?: boolean;         // 移除外圈与锯齿连接（默认：false）
}

TIP

当扫描序列编排器启用时，它会接管面部网格（以及热感遮罩、边界框）的生命周期。此时应通过序列自身的选项与 idleStage 配置网格，而非顶层的 faceMesh 选项。