热图

热图可视化显示人脸区域的 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
}