Standardized UI Components for Web and Mobile

Building the UI for camera management and data visualization is often the most time-consuming part of integrating rPPG into an app. To fix this, we have standardized our UI components across both web and iOS.

Whether you are using vitallens.js or vitallens-ios, you can now drop in the same three pre-built components to handle the entire user experience.

1. The Scan Component

The Scan component is a self-contained wizard for guided measurements. It handles face positioning, checks lighting conditions, and runs a fixed 30-second scan before displaying the final aggregated results.

<script type="module" src="https://cdn.jsdelivr.net/npm/vitallens/dist/vitallens.browser.js"></script>
<vitallens-scan api-key="YOUR_API_KEY"></vitallens-scan>

import SwiftUI
import VitalLensUI

struct ContentView: View {
    var body: some View {
        VitalLensScanView(
            apiKey: "YOUR_API_KEY",
            method: "vitallens"
        ) { result in
            // Handle results
        }
    }
}

2. The Monitor Component

If you need continuous tracking, the Monitor component provides a real-time dashboard. It uses the camera to display live heart rate, respiratory rate, HRV, and physiological waveforms. It also prompts the user to adjust if it loses the face or detects poor lighting.

<script type="module" src="https://cdn.jsdelivr.net/npm/vitallens/dist/vitallens.browser.js"></script>
<vitallens-monitor api-key="YOUR_API_KEY"></vitallens-monitor>

import SwiftUI
import VitalLensUI

struct ContentView: View {
    var body: some View {
        VitalLensMonitorView(
            apiKey: "YOUR_API_KEY",
            showWaveforms: true
        )
    }
}

3. The File Component

For asynchronous analysis, the File component provides a simple upload interface. It prompts the user for a video file, handles the processing state, and visualizes the final extracted vitals and waveforms.

<script type="module" src="https://cdn.jsdelivr.net/npm/vitallens/dist/vitallens.browser.js"></script>
<vitallens-file api-key="YOUR_API_KEY"></vitallens-file>

import SwiftUI
import VitalLensUI

struct ContentView: View {
    var body: some View {
        VitalLensFileView(
            apiKey: "YOUR_API_KEY"
        )
    }
}

Processing Parity Under the Hood

Along with these new web components, the latest version of vitallens.js now integrates vitallens-core, our shared internal signal processing library written in Rust. This guarantees mathematical parity for the local processing of raw waveform estimates into derived vitals across both the JS and iOS SDKs.

What's Next

We are starting work on VitalLens 3.0 and vitallens-android. When it launches, it will feature these exact same three components, ensuring a unified integration experience across Web, iOS, and Android.