Camera Integration

Use this guide when you want live camera-based heart rate in a browser app. Start with the quick path first. Move to the manual pipeline only if you need lower-level control.

What this guide covers

This guide shows how to:

capture webcam frames in the browser
detect a face and extract a face region
feed samples into the rPPG processor
read live BPM and signal quality
improve estimates with Muse PPG when available

Before you start

pnpm add @elata-biosciences/rppg-web

npm install @elata-biosciences/rppg-web

@elata-biosciences/rppg-web installed
Browser with camera access (getUserMedia) and WebAssembly support
HTTPS or localhost for development

You need:

@elata-biosciences/rppg-web
a browser with camera access and WebAssembly support
https:// or localhost

rPPG works best when the face is well lit, mostly still, and fully visible in frame.

Choose a starting point

Start from a demo

Scaffold a working browser app if you want the fastest path to a reference implementation.

rPPG Web getting started

Learn the package entry points and the higher-level browser API.

Frame sources

See the lower-level camera and face-detection primitives used in this guide.

Calibration and fusion

Add Muse-based calibration when you want stronger estimates.

Quick integration

For most apps, use DemoRunner. It handles frame capture, face detection, ROI extraction, and processing in one flow.

pnpm
npm

pnpm add @elata-biosciences/rppg-web

npm install @elata-biosciences/rppg-web

import {
  RppgProcessor,
  MediaPipeFrameSource,
  DemoRunner,
} from "@elata-biosciences/rppg-web";

const source = new MediaPipeFrameSource();
const processor = new RppgProcessor("wasm", 30);

const runner = new DemoRunner(source, processor, {
  useSkinMask: true,
  onStats: () => {
    const metrics = processor.getMetrics();

    document.getElementById("bpm")!.textContent =
      metrics.bpm?.toFixed(0) ?? "--";

    document.getElementById("quality")!.textContent =
      `${((metrics.quality ?? 0) * 100).toFixed(0)}%`;
  },
});

await runner.start();

Show BPM only when signal quality is above your app’s threshold. A threshold around 0.5 is a practical starting point.

Manual pipeline

Use the manual path when you want tighter control over face tracking, sampling, or how your app renders intermediate results.

Load the face model and create a frame source

import {
  MediaPipeFaceFrameSource,
  loadFaceMesh,
} from "@elata-biosciences/rppg-web";

const faceMesh = await loadFaceMesh();
const source = new MediaPipeFaceFrameSource(faceMesh);

Create the processor

import { RppgProcessor } from "@elata-biosciences/rppg-web";

const processor = new RppgProcessor("wasm", 30, 10);

The third argument sets a 10-second analysis window.

Push samples from the face ROI

import { averageGreenInROI } from "@elata-biosciences/rppg-web";

source.onFrame = (frame) => {
  if (!frame.roi) return;

  const { x, y, w, h } = frame.roi;
  const green = averageGreenInROI(frame, x, y, w, h);

  processor.pushSample(
    frame.timestampMs ?? performance.now(),
    green,
  );
};

Start the camera and read metrics

await source.start();

setInterval(() => {
  const metrics = processor.getMetrics();
  console.log("BPM:", metrics.bpm, "quality:", metrics.quality);
}, 1000);

Add Muse calibration

If a Muse device is available, you can use its PPG as a reference signal to improve camera-based estimates.

import { RppgProcessor } from "@elata-biosciences/rppg-web";

const processor = new RppgProcessor("wasm", 30);

processor.updateMuseMetrics(museBpm, 0.9, performance.now());

For a fuller fusion workflow, including MuseFusionCalibrator and calibration models, continue to /sdk/rppg-web/calibration.

Quality checklist

Use this checklist before debugging the pipeline:

keep lighting even across the face
reduce head movement
wait 5 to 10 seconds before trusting early BPM output
make sure a face ROI is actually being detected
enable useSkinMask when you use DemoRunner

Where to go next

rPPG Web getting started

Learn the package surface and the higher-level browser session API.

Frame sources

Understand the camera and face-detection primitives in more detail.

Calibration and fusion

Improve estimates with Muse-based calibration and multi-source fusion.

create-elata-demo

Start from a working reference app if you want a faster onboarding path.

Overview

EEG Web SDK

EEG BLE Web SDK

Camera Web SDK

Operations

Contributors

Maintainers

What this guide covers

Before you start

Choose a starting point

Start from a demo

rPPG Web getting started

Frame sources

Calibration and fusion

Quick integration

Manual pipeline

Add Muse calibration

Quality checklist

Where to go next

rPPG Web getting started

Frame sources

Calibration and fusion

create-elata-demo

​What this guide covers

​Before you start

​Choose a starting point

Start from a demo

rPPG Web getting started

Frame sources

Calibration and fusion

​Quick integration

​Manual pipeline

​Add Muse calibration

​Quality checklist

​Where to go next

rPPG Web getting started

Frame sources

Calibration and fusion

create-elata-demo

What this guide covers

Before you start

Choose a starting point

Quick integration

Manual pipeline

Add Muse calibration

Quality checklist

Where to go next