可视化选项

Vitals™ SDK 提供多种可视化叠加层，在生命体征扫描过程中增强用户体验。这些选项提供关于人脸检测、信号质量和测量进度的实时视觉反馈。

可用可视化

功能	描述	文档
热图	脸部区域的 PPG 振幅热图覆盖，提供 10 种视觉预设	热图指南
信号可视化器	实时滚动 PPG/呼吸波形显示	信号可视化器指南
边界框	人脸检测边界矩形	边界框指南
面部网格	468 点面部标志线框覆盖（含动画）	面部网格指南
模型加载进度	AI 模型初始化期间的进度覆盖	模型加载进度指南

配置

可视化选项通过创建相机实例时的 visualizationOptions 属性进行配置：

JavaScript

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

const camera = createVitalSignCamera({
  // ... 其他配置
  visualizationOptions: {
    heatmap: { enabled: true, mode: 'field' },
    boundingBox: { enabled: true, color: 'red' },
    faceMesh: { enabled: true, color: 'lightgreen', animate: true }
  }
});

React

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

const App = () => (
  <VitalSignCamera
    visualizationOptions={{
      heatmap: { enabled: true, mode: 'field' },
      boundingBox: { enabled: true },
      faceMesh: { enabled: true }
    }}
  />
);

Vue

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

<script setup>
const visualizationOptions = {
  heatmap: { enabled: true, mode: 'field' },
  boundingBox: { enabled: true },
  faceMesh: { enabled: true }
};
</script>

运行时更新

可视化选项可在运行时通过 visualizationOptions 设置器进行更新：

// 停用热图
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  heatmap: { enabled: false }
};

// 更换热图预设
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  heatmap: { mode: 'neon' }
};

VisualizationOptions 接口

interface VisualizationOptions {
  boundingBox?: BoundingBoxOptions;
  faceMesh?: FaceMeshOptions;
  modelLoadingProgress?: ModelLoadingProgressOptions;
  heatmap?: HeatmapOptions;
}

每个子选项在首次启用时惰性初始化，并在停用时销毁。