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 source = new MediaPipeFrameSource();

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, loadFaceMesh } from "@elata-biosciences/rppg-web";

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

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

await source.start();

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

const faceMesh = await loadFaceMesh();

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

const source = new MediaPipeFrameSource();
const processor = new RppgProcessor("wasm", 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);