面部网格

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

工作原理

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

配置

JavaScript

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

const camera = createVitalSignCamera({
  userId: 'user-123',
  apiKey: 'your-api-key',
  visualizationOptions: {
    faceMesh: {
      enabled: true,
      color: 'lightgreen',       // 线框颜色（默认：'lightgreen'）
      lineWidth: 1.5,            // 线条宽度（像素，默认：1.5）
      animate: true,             // 脉冲动画（默认：false）
      speed: 1.0,                // 动画速度倍率（默认：1.0）
      direction: 'both',         // 脉冲方向：'in' | 'out' | 'both'（默认：'both'）
      minOpacity: 0.2,           // 动画循环期间的最小不透明度（默认：0.2）
      maxOpacity: 1.0            // 动画循环期间的最大不透明度（默认：1.0）
    }
  }
});

React

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

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

Vue

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

<script setup>
const visualizationOptions = {
  faceMesh: {
    enabled: true,
    color: '#64ffda',
    lineWidth: 1.2,
    animate: true,
    speed: 0.8,
    direction: 'both',
    minOpacity: 0.15,
    maxOpacity: 0.9
  }
};
</script>

动态更新

// 启用自定义动画
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  faceMesh: {
    enabled: true,
    color: '#ff6b6b',
    animate: true,
    speed: 2.0
  }
};

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

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

动画方向

方向	行为
'both'	不透明度在最小值和最大值之间振荡（默认）
'in'	向内脉冲（淡入，突然消失）
'out'	向外脉冲（淡出，突然出现）

FaceMeshOptions 接口

interface FaceMeshOptions {
  enabled?: boolean;
  color?: string;              // CSS 颜色（默认：'lightgreen'）
  lineWidth?: number;          // 线条宽度（像素，默认：1.5）
  animate?: boolean;           // 启用呼吸动画（默认：false）
  speed?: number;              // 动画速度倍率（默认：1.0）
  direction?: 'in' | 'out' | 'both';  // 脉冲方向（默认：'both'）
  minOpacity?: number;         // 循环中的最小不透明度（默认：0.2）
  maxOpacity?: number;         // 循环中的最大不透明度（默认：1.0）
}