Integración de cámara

Utilice esta guía cuando desee un control de nivel inferior sobre la frecuencia cardíaca basada en la cámara en una aplicación de navegador. Para obtener la API de alto nivel recomendada, comience con rPPG en una aplicación de navegador.

Qué cubre esta guía

Esta guía muestra cómo:

capturar fotogramas de la cámara web en el navegador
detectar una cara y extraer una región de la cara
introducir muestras en el procesador rPPG
leer BPM en vivo y calidad de la señal
mejorar las estimaciones con Muse PPG cuando esté disponible

Antes de empezar

Necesitas:

@elata-biosciences/rppg-web
un navegador con acceso a la cámara (getUserMedia) y soporte WebAssembly
https:// o localhost

npm install @elata-biosciences/rppg-web

pnpm add @elata-biosciences/rppg-web

rPPG funciona mejor cuando el rostro está bien iluminado, mayormente quieto y completamente visible en el encuadre.

La mayoría de las aplicaciones deberían usar createRppgSession(), que incluye todo lo que hay en esta página (WASM inicio, captura de fotogramas, selección de ROI, diagnóstico, limpieza). Consulte rPPG en una aplicación de navegador. Utilice las piezas de nivel inferior que aparecen a continuación solo cuando necesite una orquestación personalizada.

Elige un punto de partida

Empezar desde una demostración

Cree una aplicación de navegador que funcione si desea la ruta más rápida hacia una implementación de referencia.

rPPG Web iniciándose

Conozca los puntos de entrada del paquete y la API del navegador de nivel superior.

Fuentes de fotogramas

Consulte las primitivas de detección de rostros y cámara de nivel inferior utilizadas en esta guía.

Calibración y fusión

Agregue calibración basada en Muse cuando desee estimaciones más sólidas.

Integración rápida con DemoRunner

DemoRunner maneja la captura de fotogramas, la detección de rostros, la extracción de ROI y el procesamiento en un solo flujo, mientras te deja el control del procesador.

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();

Muestra BPM solo cuando metrics.confidence esté por encima del umbral de tu aplicación. Un umbral alrededor de 0.5 es un punto de partida práctico.

Tubería manual

Utilice la ruta manual cuando desee un control más estricto sobre el seguimiento de rostros, el muestreo o cómo su aplicación genera resultados intermedios.

Cargue el modelo de cara y cree una fuente de marco.

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);

Crear el procesador

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);

El tercer argumento establece una ventana de análisis de 10 segundos.

Empuje muestras del ROI de la cara

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,
  );
};

Iniciar la cámara y leer métricas.

await source.start();

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

Agregar calibración de Muse

Si hay un dispositivo Muse disponible, puede utilizar su PPG como señal de referencia para mejorar las estimaciones basadas en cámaras.

// `processor` is the RppgProcessor created above
processor.updateMuseMetrics(museBpm, 0.9, performance.now());

Para obtener un flujo de trabajo de fusión más completo, que incluye MuseFusionCalibrator y modelos de calibración, continúe con /sdk/rppg-web/calibration.

Lista de control de calidad

Utilice esta lista de verificación antes de depurar la canalización:

mantener la iluminación uniforme en toda la cara
reducir el movimiento de la cabeza
espere de 5 a 10 segundos antes de confiar en la salida inicial de BPM
asegúrese de que realmente se esté detectando un ROI facial
habilite useSkinMask cuando use DemoRunner

Adónde ir a continuación

rPPG Web iniciándose

Conozca la superficie del paquete y la API de sesión del navegador de nivel superior.

Fuentes de fotogramas

Comprenda las primitivas de cámara y detección de rostros con más detalle.

Calibración y fusión

Mejore las estimaciones con calibración basada en Muse y fusión de múltiples fuentes.

crear-elata-demo

Comience desde una aplicación de referencia funcional si desea una ruta de incorporación más rápida.

Información general

SDK web de EEG

SDK web de EEG por BLE

SDK web de cámara

SDK web de PPG

Sesiones y análisis

Compatibilidad y soporte

Colaboradores

Integración de cámara

Qué cubre esta guía

Antes de empezar

Elige un punto de partida

Empezar desde una demostración

rPPG Web iniciándose

Fuentes de fotogramas

Calibración y fusión

Integración rápida con DemoRunner

Tubería manual

Agregar calibración de Muse

Lista de control de calidad

Adónde ir a continuación

rPPG Web iniciándose

Fuentes de fotogramas

Calibración y fusión

crear-elata-demo

​Qué cubre esta guía

​Antes de empezar

​Elige un punto de partida

Empezar desde una demostración

rPPG Web iniciándose

Fuentes de fotogramas

Calibración y fusión

​Integración rápida con DemoRunner

​Tubería manual

​Agregar calibración de Muse

​Lista de control de calidad

​Adónde ir a continuación

rPPG Web iniciándose

Fuentes de fotogramas

Calibración y fusión

crear-elata-demo

Qué cubre esta guía

Antes de empezar

Elige un punto de partida

Integración rápida con DemoRunner

Tubería manual

Agregar calibración de Muse

Lista de control de calidad

Adónde ir a continuación