JavaScript SDK 2.1.3

Sample Code

The quickest and simplest way to kickstart your journey with the JavaScript SDK is by downloading and experimenting with our full-featured sample code:

• Download JavaScript Plain HTML project
• Download JavaScript NodeJS project
• Download TypeScript NodeJS project

IMPORTANT

In the above sample codes, the strings __YOUR_USER_ID__ and __YOUR_API_KEY__ should be replaced by your own User ID and API Key repectively. Please contact us to obtain your User ID and API Key.

Installation

SDK file installation

In your NodeJS project, install the SDK with the npm install or yarn add commands:

npm

npm install "https://sdk.panoptic.ai/npm/ts-vital-sign-camera-2.1.3.tgz"

yarn

yarn add "https://sdk.panoptic.ai/npm/ts-vital-sign-camera-2.1.3.tgz"

TIP

If you are using Yarn v2 or later, you might need to include the package name in the command, such as yarn add vital-sign-camera@"https://sdk.panoptic.ai/npm/ts-vital-sign-camera-2.1.3.tgz".

Alternatively, if you are not using NodeJS, you can install the SDK by adding the following line to your main HTML file:

<script src="vital-sign-camera.umd-2.1.3.js">

The file vital-sign-camera.umd-2.1.3.js is included in this sample project.

Vite Configuration

If you are using Vite as your build tool, you need to exclude ts-vital-sign-camera from dependency optimization to ensure proper functionality:

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    exclude: ['ts-vital-sign-camera'],
  },
});

Deployment Notes

NOTE

If the project is deployed to Google Cloud, some web servers, such as serve, might not function correctly, causing the facial skin age feature to fail. To prevent this issue, use http-server instead.

What's new

2.1.3 (02-Feb-2026)

• Bug Fixes: Fixed the package resolving problem

2.1.2 (02-Feb-2026)

• Bundle Size Optimization: Reduced bundle size by externalizing some dependencies
• Model Loading: Enhanced model loading progress handling and localization support
• Bug Fixes: Various bug fixes and performance improvements

2.1.1 (26-Jan-2026)

• Bug fixes and performance improvements.

2.1.0 (23-Jan-2026)

• Model Loading Progress: Added comprehensive model loading progress tracking with visual overlays
• Real-time Estimation: Introduced real-time vital sign estimation capabilities with ME-rPPG and FDA estimators
• Signal Visualization: New SignalVisualizer class for displaying PPG and ECG signals on canvas
• Localization Support: Added internationalization support for model loading progress UI
• Bundle Size Optimization: Fixed large initial bundle size issues for better performance
• API Enhancements: Multiple new interfaces and configuration options

New API Interfaces

• ModelLoadingProgressEvent: Event interface for tracking model loading progress with percentage, bytes, and stage information
• ModelLoadingProgressOptions: Configuration options for model loading progress visualization including localization
• RealtimeEstimation: Interface for real-time estimation results with heart rate, confidence, and signal quality
• RealtimeEstimationConfig: Configuration for real-time estimators (ME-rPPG and FDA)
• SignalVisualizer: Class for visualizing PPG/ECG signals on HTML5 canvas
• SignalVisualizerConfig: Configuration options for signal visualization
• SignalData: Interface for signal data with values, timestamps, and sample rate

New Properties and Callbacks

• modelLoadingProgressElement: Property on VitalSignCameraInterface for accessing the progress overlay element
• onModelLoadingProgress: Callback in VitalSignCameraCreationProps for model loading progress events
• localize: Localization function in ModelLoadingProgressOptions for international text support

New Enums and Types

• ModelLoadingStage: Enum for model loading stages (Downloading, Caching, Ready)
• ModelLoadingStageInfo: Type for structured stage information
• RealtimeEstimatorType: Enum for estimator types (FDA, ME-rPPG)
• LocalizationKey: Type for localization keys used in model loading progress