可視化選項

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;
}

每個子選項在首次啟用時惰性初始化，並在停用時銷毀。