> ## Documentation Index
> Fetch the complete documentation index at: https://docs.elata.bio/llms.txt
> Use this file to discover all available pages before exploring further.

# Fuentes de marco

> Captura de cámara y detección de rostros con MediaPipe

<a id="framesource-interface" />

## Interfaz FrameSource

Todas las fuentes de fotogramas implementan esta interfaz:

```typescript theme={null}
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 };
```

***

<a id="mediapipeframesource" />

## Fuente de marco de tubería de medios

Captura fotogramas de la cámara y utiliza MediaPipe para la detección de rostros, proporcionando un ROI del rostro con cada fotograma:

```typescript theme={null}
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();
```

***

<a id="mediapipefaceframesource" />

## MediosPipeFaceFrameFuente

Una variante más especializada que utiliza MediaPipe FaceLandmarker para la detección de puntos de referencia faciales. Cada cuadro lleva el ROI de la cara más los sub-ROI de la frente y las mejillas, puntos de referencia y formas combinadas:

```typescript theme={null}
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();
```

***

<a id="loadfacelandmarker" />

## cargarFaceLandmarker

Carga MediaPipe FaceLandmarker (con blendshapes) desde una CDN. Devuelve `null` cuando el seguimiento facial no está disponible, por lo que puedes recurrir a `MediaPipeFrameSource`:

```typescript theme={null}
import { loadFaceLandmarker } from "@elata-biosciences/rppg-web";

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

***

<a id="demorunner" />

## corredor de demostración

`DemoRunner` organiza una fuente de fotogramas y `RppgProcessor` juntos, manejando la extracción de ROI, el enmascaramiento de piel y los informes de estadísticas:

```typescript theme={null}
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();
```

<a id="demorunneroptions" />

### Opciones de DemoRunner

| Opción | Tipo | Predeterminado | Descripción |
| - | - | - | - |
| `roi` | `ROI \| null` | `null` | Se corrigió la anulación de ROI (nulo = usar detección de rostros) |
| `sampleRate` | `number` | - | Anular la frecuencia de muestreo |
| `roiSmoothingAlpha` | `number` | - | Suavizado exponencial para la fluctuación del ROI |
| `useSkinMask` | `boolean` | `false` | Aplicar mascarilla de tono de piel YCbCr |
| `skinRatioSmoothingAlpha` | `number` | - | Suavizar la métrica de proporción de piel |
| `onStats` | `function` | - | Devolución de llamada con estadísticas por cuadro |

***

<a id="roi-helper" />

## Ayudante de retorno de la inversión

Extraiga la intensidad promedio del canal verde de una región de interés:

```typescript theme={null}
import { averageGreenInROI } from "@elata-biosciences/rppg-web";

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

***

<a id="next" />

## Siguiente

<CardGroup cols={2}>
  <Card title="Calibración y Fusión" icon="bullseye" href="/es/sdk/rppg-web/calibration">
    Muse PPG modelos de calibración
  </Card>

  <Card title="rppg-web Primeros pasos" icon="heart-pulse" href="/es/sdk/rppg-web/getting-started">
    Instalar y configurar rppg-web
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.