Bounding Box

The bounding box visualization draws a rectangle around the detected face. It provides clear visual confirmation that the SDK has successfully located the user's face and is tracking it.

How It Works

The bounding box follows the face as it moves within the camera frame, updating in real-time with each processed frame. The box size and position adjust dynamically based on face distance and orientation.

Configuration

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 color string (default: '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>

Dynamic Updates

// Change color
camera.visualizationOptions = {
  ...camera.visualizationOptions,
  boundingBox: { color: '#ff8800' }
};

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

BoundingBoxOptions Interface

interface BoundingBoxOptions {
  enabled?: boolean;
  color?: string;     // CSS color string (default: 'red')
}