Face Mesh

The face mesh visualization renders a 468-point facial landmark wireframe overlay. It provides detailed visual feedback about face detection quality and tracking precision.

How It Works

The SDK's face mesh module detects 468 facial landmarks in real-time, mapping the contours of eyes, eyebrows, nose, mouth, and jawline. The visualization draws connecting lines between these points to form a wireframe mesh overlay on the detected face. An optional animation effect provides a subtle pulsing appearance to confirm active tracking.

Configuration

JavaScript

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

const camera = createVitalSignCamera({
  userId: 'user-123',
  apiKey: 'your-api-key',
  visualizationOptions: {
    faceMesh: {
      enabled: true,
      color: 'lightgreen',       // Wireframe color (default: 'lightgreen')
      lineWidth: 1.5,            // Stroke width in pixels (default: 1.5)
      animate: true,             // Pulsing animation (default: false)
      speed: 1.0,                // Animation speed multiplier (default: 1.0)
      direction: 'both',         // Pulse direction: 'in' | 'out' | 'both' (default: 'both')
      minOpacity: 0.2,           // Minimum opacity during animation cycle (default: 0.2)
      maxOpacity: 1.0            // Maximum opacity during animation cycle (default: 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>

Dynamic Updates

// Enable with custom animation
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  faceMesh: {
    enabled: true,
    color: '#ff6b6b',
    animate: true,
    speed: 2.0
  }
};

// Change animation direction
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  faceMesh: { direction: 'in' }
};

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

Animation Directions

Direction	Behavior
'both'	Opacity oscillates between min and max (default)
'in'	Pulses inward (fades in, snaps out)
'out'	Pulses outward (fades out, snaps in)

FaceMeshOptions Interface

interface FaceMeshOptions {
  enabled?: boolean;
  color?: string;              // CSS color (default: 'lightgreen')
  lineWidth?: number;          // Stroke width in px (default: 1.5)
  animate?: boolean;           // Enable breathing animation (default: false)
  speed?: number;              // Animation speed multiplier (default: 1.0)
  direction?: 'in' | 'out' | 'both';  // Pulse direction (default: 'both')
  minOpacity?: number;         // Min opacity in cycle (default: 0.2)
  maxOpacity?: number;         // Max opacity in cycle (default: 1.0)
}