掃描序列

掃描序列是一個階段感知編排器，在掃描進行時驅動內建可視化效果按預定義動畫播放。您只需啟用序列一次，SDK 就會為您呈現掃描動畫，而無需逐一啟用每個覆蓋層。

工作原理

編排器會監視引擎階段：

• 收集數據期間（CollectingData），它在臉部上播放掃掠動畫：
  1. 水平掃掠（預設 2 秒）
  2. 垂直掃掠（預設 2 秒）
  3. 漣漪（預設 0.5 秒）
  4. 靜態網格加熱感遮罩（開放式——持續到階段改變為止）
• 其他情況（等待、分析或閒置），它顯示您在 idleStage 中提供的配置——例如平靜的面部網格，讓用戶在掃描前後始終獲得視覺反饋。

編排器啟用時，它接管 faceMesh、thermalMask 和 boundingBox 可視化：這些選項的頂層配置會被跳過以避免重複建立，應改為透過序列選項（以及 idleStage）進行配置。modelLoadingProgress 不受序列管理，保持其正常生命週期。

配置

JavaScript

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

const camera = createVitalSignCamera({
  // ... 其他配置
  visualizationOptions: {
    scanningSequence: {
      enabled: true,
      // 待機可視化（未收集數據時顯示）
      idleStage: {
        faceMesh: {
          color: 'rgba(200, 200, 200, 0.6)',
          animationDirection: 'both',
          animationSpeed: 6,
          lineWidth: '0.3%'
        }
      },
      // 掃掠樣式
      sweepColor: 'white',
      sweepLineWidth: 0.3,
      // 最終熱感步驟樣式
      staticColor: 'rgba(255, 255, 255, 0.4)',
      staticLineWidth: 0.07,
      // 時間
      stepDurations: [2, 2, 0.5], // [水平, 垂直, 漣漪]，單位為秒
      animationDelay: -1.5
    }
  }
});

React

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

const App = () => (
  <VitalSignCamera
    visualizationOptions={{
      scanningSequence: {
        enabled: true,
        idleStage: {
          faceMesh: { animationDirection: 'both', animationSpeed: 6 }
        }
      }
    }}
  />
);

Vue

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

<script setup>
const visualizationOptions = {
  scanningSequence: {
    enabled: true,
    idleStage: {
      faceMesh: { animationDirection: 'both', animationSpeed: 6 }
    },
    stepDurations: [2, 2, 0.5]
  }
};
</script>

選項

選項	類型	預設	描述
enabled	boolean	存在時為 true	編排器的主開關
idleStage	VisualizationOptions	—	引擎階段不是 CollectingData 時套用的可視化配置。接受與 visualizationOptions 相同的結構（例如 faceMesh、thermalMask、boundingBox）。建議在此宣告 faceMesh，讓用戶在掃描前後都能看到跟蹤反饋
sweepColor	string	'white'	三個動畫掃掠步驟期間的網格顏色
sweepLineWidth	number | \${number}%``	0.3	掃掠步驟期間的線寬。字串為面部寬度的百分比；純數字為像素
staticColor	string	'rgba(255, 255, 255, 0.4)'	最終熱感步驟中靜態（非動畫）網格的顏色
staticLineWidth	number | \${number}%``	0.07	最終熱感步驟中靜態網格的線寬
stepDurations	[number, number, number]	[2, 2, 0.5]	三個掃掠步驟的持續時間（秒），順序為 [水平, 垂直, 漣漪]。最終熱感步驟是開放式的，持續到引擎階段改變為止
animationDelay	number	-1.5	套用於掃掠步驟的動畫延遲（秒）。使用 0 從相位 0 開始，或使用負值從週期中間開始

ScanningSequenceOptions 介面

interface ScanningSequenceOptions {
  enabled?: boolean;
  idleStage?: VisualizationOptions;
  sweepColor?: string;
  sweepLineWidth?: number | `${number}%`;
  staticLineWidth?: number | `${number}%`;
  staticColor?: string;
  stepDurations?: [number, number, number];
  animationDelay?: number;
}

TIP

序列設計用於配合熱感遮罩顯示數據——在 idleStage 中配置 thermalMask，或依賴序列內建的熱感步驟。掃掠動畫方向請參閱面部網格選項。