熱圖

熱圖可視化顯示臉部區域的 PPG（光電容積描記法）振幅疊加層，顯示面部哪些區域提供最強的血容量脈搏訊號。這有助於用戶將面部定位在最佳位置以獲得準確的測量結果。

工作原理

熱圖即時分析視訊幀，測量不同面部區域的 PPG 訊號振幅。脈搏訊號較強的區域會高亮顯示，而較弱的區域則較暗或透明。可視化效果會隨著光照和面部位置的變化而動態調整。

可用預設

熱圖包含 10 種視覺預設，從柔和到鮮豔不等：

預設	描述	視覺風格
field	柔和場疊加	柔和半透明綠色場
thermalField	熱感場	暖色漸變（藍→紅）
mask	半透明遮罩	偵測到面部區域的柔和疊加
lut1	查找表 1 (Magma)	深紫色到亮黃色
lut2	查找表 2 (Plasma)	深紫色到亮黃色
lut3	查找表 3 (Viridis)	深藍色到亮黃色
lut4	查找表 4 (Inferno)	深黑紫色到亮黃色
neon	霓虹發光效果	明亮高對比度發光
surface	表面熱模式	地形等高線顯示
light	最小光疊加	非常微弱的疊加

配置

JavaScript

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

const camera = createVitalSignCamera({
  userId: 'user-123',
  apiKey: 'your-api-key',
  visualizationOptions: {
    heatmap: {
      enabled: true,
      mode: 'field',           // 視覺預設（預設：'field'）
      opacity: 0.6,            // 0.0 - 1.0（預設：0.6）
      blurRadius: 0,           // 高斯模糊半徑（預設：0，無模糊）
      brightness: 1.0,         // 亮度倍率（預設：1.0）
      contrast: 1.0,           // 對比度倍率（預設：1.0）
      saturation: 1.0,         // 色彩飽和度（預設：1.0）
      smoothingFactor: 1.0,    // 時間平滑（0.0 - 1.0，預設：1.0）
      scale: 1.0,              // 疊加縮放（預設：1.0）
      showOnlyFaceArea: false, // 僅限面部區域（預設：false）
      enableAutoFit: true,     // 自動適配面部邊界框（預設：true）
      customColormap: undefined // 自訂 RGBA 色標
    }
  }
});

React

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

const App = () => (
  <VitalSignCamera
    visualizationOptions={{
      heatmap: {
        enabled: true,
        mode: 'neon',
        opacity: 0.7,
        blurRadius: 2
      }
    }}
  />
);

Vue

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

<script setup>
const visualizationOptions = {
  heatmap: {
    enabled: true,
    mode: 'thermalField',
    opacity: 0.65,
    showOnlyFaceArea: true
  }
};
</script>

動態配置

您可以使用 visualizationOptions 設定器在執行階段更改熱圖預設和設定。熱圖會立即重新配置，無需重新啟動相機：

// 切換預設
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  heatmap: { mode: 'neon', opacity: 0.8 }
};

// 停用熱圖
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  heatmap: { enabled: false }
};

// 使用預設設定啟用
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  heatmap: { enabled: true }
};

自訂顏色對應

對於進階用例，您可以使用 RGBA 色標提供自訂顏色對應：

camera.visualizationOptions = {
  heatmap: {
    enabled: true,
    mode: 'field',
    customColormap: [
      { pos: 0.0, color: [0, 0, 0, 0] },       // 最小值完全透明
      { pos: 0.3, color: [0, 0, 255, 100] },    // 30% 藍色
      { pos: 0.6, color: [0, 255, 255, 150] },  // 60% 青色
      { pos: 0.9, color: [0, 255, 0, 200] },    // 90% 綠色
      { pos: 1.0, color: [255, 0, 0, 255] }     // 最大值紅色
    ]
  }
};

HeatmapOptions 介面

interface HeatmapOptions {
  enabled?: boolean;
  mode?: HeatmapVariantMode;       // 預設：'field'
  opacity?: number;                // 0.0 - 1.0
  blurRadius?: number;             // 0 = 無模糊
  brightness?: number;
  contrast?: number;
  saturation?: number;
  smoothingFactor?: number;        // 0.0 - 1.0
  scale?: number;
  showOnlyFaceArea?: boolean;
  enableAutoFit?: boolean;
  customColormap?: ColormapStop[];
}

type HeatmapVariantMode =
  | 'field'
  | 'thermalField'
  | 'mask'
  | 'lut1'
  | 'lut2'
  | 'lut3'
  | 'lut4'
  | 'neon'
  | 'surface'
  | 'light';

interface ColormapStop {
  pos: number;        // 0.0 - 1.0
  color: [number, number, number, number];  // [R, G, B, A] 0-255
}