Camera Integration

Use this guide when you want lower-level control over camera-based heart rate in a browser app. For the recommended high-level API, start with rPPG in a browser app.

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

You need:

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

npm install @elata-biosciences/rppg-web

pnpm add @elata-biosciences/rppg-web

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

Most apps should use createRppgSession(), which wraps everything on this page (WASM init, frame capture, ROI selection, diagnostics, cleanup). See rPPG in a browser app. Use the lower-level pieces below only when you need custom orchestration.

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 with DemoRunner

DemoRunner handles frame capture, face detection, ROI extraction, and processing in one flow, while leaving you in control of the processor.

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

const video = document.querySelector("video")!; // a playing camera <video>
const backend = await loadWasmBackend(); // null if the packaged WASM can't be loaded
if (!backend) throw new Error("rPPG WASM backend unavailable");
const source = new MediaPipeFrameSource(video);
const processor = new RppgProcessor(backend, 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.confidence * 100).toFixed(0)}%`;
  },
});

await runner.start();

Show BPM only when metrics.confidence 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,
  loadFaceLandmarker,
} from "@elata-biosciences/rppg-web";

// Loads MediaPipe FaceLandmarker from a CDN; returns null if unavailable.
const faceLandmarker = await loadFaceLandmarker();
if (!faceLandmarker) throw new Error("Face tracking unavailable");
const source = new MediaPipeFaceFrameSource(video, faceLandmarker);

Create the processor

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

const backend = await loadWasmBackend();
if (!backend) throw new Error("rPPG WASM backend unavailable");
const processor = new RppgProcessor(backend, 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, "confidence:", metrics.confidence);
}, 1000);

Add Muse calibration

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

// `processor` is the RppgProcessor created above
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

PPG Web SDK

Sessions and Analytics

Operations

Contributors

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 with DemoRunner

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 with DemoRunner

​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 with DemoRunner

Manual pipeline

Add Muse calibration

Quality checklist

Where to go next