Frame Sources

interface FrameSource {
  onFrame: ((frame: Frame) => void) | null;
  start(): Promise<void>;
  stop(): Promise<void>;
}

type Frame = {
  data: Uint8ClampedArray | number[];  // RGBA pixel data
  width: number;
  height: number;
  roi?: ROI;
  rois?: ROI[];
  timestampMs?: number;
};

type ROI = { x: number; y: number; w: number; h: number };

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

const video = document.querySelector("video")!; // a playing camera <video>
const source = new MediaPipeFrameSource(video);

source.onFrame = (frame) => {
  // frame.roi contains the detected face bounding box
  // frame.data contains the camera image pixels
  console.log("Face ROI:", frame.roi);
};

await source.start();
// ... later
await source.stop();

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

const faceLandmarker = await loadFaceLandmarker();
if (!faceLandmarker) throw new Error("Face tracking unavailable");
const source = new MediaPipeFaceFrameSource(video, faceLandmarker);

source.onFrame = (frame) => {
  // frame.rois may contain multiple face regions
  console.log("Face regions:", frame.rois?.length);
};

await source.start();

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

const faceLandmarker = await loadFaceLandmarker({
  // all optional:
  // visionCdnBase, wasmBase, modelAssetPath
});

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

const backend = await loadWasmBackend();
if (!backend) throw new Error("rPPG WASM backend unavailable");
const source = new MediaPipeFrameSource(video);
const processor = new RppgProcessor(backend, 30);

const options: DemoRunnerOptions = {
  useSkinMask: true,
  onStats: (stats) => {
    console.log(`Green: ${stats.intensity}, Skin: ${stats.skinRatio}, FPS: ${stats.fps}`);
  },
};

const runner = new DemoRunner(source, processor, options);
await runner.start();

// ... later
await runner.stop();

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

const intensity = averageGreenInROI(frame, roi.x, roi.y, roi.w, roi.h);