边界框

边界框可视化在检测到的人脸周围绘制一个矩形。它提供清晰的视觉确认，表明 SDK 已成功定位用户的面部并正在跟踪。

工作原理

边界框会随着面部在摄像头画面中移动而实时跟随，每处理一帧都会更新。框的大小和位置会根据面部距离和方向动态调整。

配置

JavaScript

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

const camera = createVitalSignCamera({
  userId: 'user-123',
  apiKey: 'your-api-key',
  visualizationOptions: {
    boundingBox: {
      enabled: true,
      color: 'red'      // CSS 颜色字符串（默认：'red'）
    }
  }
});

React

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

const App = () => (
  <VitalSignCamera
    visualizationOptions={{
      boundingBox: { enabled: true, color: '#00ff00' }
    }}
  />
);

Vue

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

<script setup>
const visualizationOptions = {
  boundingBox: {
    enabled: true,
    color: 'cyan'
  }
};
</script>

动态更新

// 更改颜色
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  boundingBox: { color: '#ff8800' }
};

// 禁用
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  boundingBox: { enabled: false }
};

BoundingBoxOptions 接口

interface BoundingBoxOptions {
  enabled?: boolean;
  color?: string;     // CSS 颜色字符串（默认：'red'）
}