Thermal Mask

The thermal mask visualization overlays a thermal-style effect tracked to the detected face region of interest (ROI). It gives users a clear visual cue that their face is being tracked and analyzed during the scan.

How It Works

The mask follows the face box reported by the face detector and paints an animated thermal gradient over the facial skin area. The effect is rendered on a canvas overlaying the video, so it scales with the camera preview. Two color schemes are available: a classic thermal gradient and a neutral grayscale.

Configuration

JavaScript

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

const camera = createVitalSignCamera({
  // ... other config
  visualizationOptions: {
    thermalMask: {
      enabled: true,
      opacity: 0.6,          // Mask opacity, 0–1 (default: 0.6)
      colorScheme: 'thermal' // 'thermal' | 'grayscale' (default: 'thermal')
    }
  }
});

React

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

const App = () => (
  <VitalSignCamera
    visualizationOptions={{
      thermalMask: { enabled: true, colorScheme: 'grayscale' }
    }}
  />
);

Vue

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

<script setup>
const visualizationOptions = {
  thermalMask: {
    enabled: true,
    opacity: 0.45,
    colorScheme: 'thermal'
  }
};
</script>

Options

Option	Type	Default	Description
enabled	boolean	true	Enable/disable the overlay
opacity	number	0.6	Opacity of the mask (0 to 1)
colorScheme	'thermal' | 'grayscale'	'thermal'	Color scheme for the heatmap effect

Runtime Updates

// Switch color scheme
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  thermalMask: { colorScheme: 'grayscale' }
};

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

ThermalMaskOptions Interface

interface ThermalMaskOptions {
  enabled?: boolean;
  opacity?: number;
  colorScheme?: 'thermal' | 'grayscale';
}

TIP

When the scanning sequence orchestrator is enabled, it owns the thermal mask (along with the face mesh and bounding box) lifecycle — the mask is driven by the sequence's thermal step instead of this option.