面部網格

面部網格可視化渲染一個 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 選項。