> ## 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.
# Agregue rPPG basado en cámara a una aplicación de navegador existente
> Cree un flujo de navegador rPPG que funcione con createRppgSession, diagnóstico y limpieza.
Utilice esta página si ya tiene una aplicación de navegador y desea la ruta de integración de aplicaciones existentes recomendada.
Si desea la ruta del andamio, utilice [Inicio rápido](/es/sdk/tutorials/first-app). Si primero solo necesita el modelo mental, use [rPPG en una aplicación de navegador](/es/sdk/guides/rppg-browser).
Este tutorial muestra la ruta de integración de aplicaciones recomendada para `@elata-biosciences/rppg-web`.
La cámara rPPG es la **principal integración del navegador** para muchos productos Elata. No se requieren auriculares.
La idea central es simple: permita que `createRppgSession()` sea dueño del tiempo de ejecución del navegador, el bucle de procesamiento de video y los diagnósticos, mientras que su aplicación es dueña de la interfaz de usuario.
Este es el habitual **siguiente tutorial** después de [Cree su primera aplicación Elata](/es/sdk/tutorials/first-app) cuando elige la **aplicación existente** rama para cámara rPPG. Si está **extendiendo el andamio** , permanezca en `rppg-demo` y use [rPPG en una aplicación de navegador](/es/sdk/guides/rppg-browser) más [rppg-web](/es/sdk/rppg-web/getting-started).
## Lo que construirás
Usted:
1. instalar `@elata-biosciences/rppg-web`
2. solicitar acceso a la cámara
3. adjunte la transmisión a un elemento `video`
4. empezar `createRppgSession()`
5. leer métricas y diagnósticos
6. detener la sesión durante la limpieza
## Paso 1: instale el paquete
```bash pnpm theme={null}
pnpm add @elata-biosciences/rppg-web
```
```bash npm theme={null}
npm install @elata-biosciences/rppg-web
```
## Paso 2: prepare un elemento de video
Su aplicación necesita un elemento `video` que pueda recibir la transmisión de la cámara.
```html index.html (or your component markup) theme={null}
```
Las partes importantes son:
* `autoplay` para que la reproducción pueda comenzar una vez que se adjunte la transmisión
* `playsinline` para el comportamiento del navegador móvil
* `muted` para mantener las reglas de reproducción automática fuera del camino
## Paso 3: adquirir acceso a la cámara
```ts camera setup theme={null}
const videoEl = document.getElementById("camera") as HTMLVideoElement;
const stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "user" },
audio: false,
});
videoEl.srcObject = stream;
await videoEl.play();
```
En este punto, la aplicación de su navegador ya debería mostrar la vista previa de la cámara.
## Paso 4: Iniciar `createRppgSession()`
```ts rPPG session theme={null}
import { createRppgSession } from "@elata-biosciences/rppg-web";
const session = await createRppgSession({
video: videoEl,
sampleRate: 30,
backend: "auto",
faceMesh: "off",
onDiagnostics: (diagnostics) => {
console.log("status", diagnostics.state.status);
console.log("frames", diagnostics.framesSeen);
console.log("samples", diagnostics.totalSamplesReceived);
console.log("issues", diagnostics.issues);
},
onError: (error) => {
console.error(error.code, error.message);
},
});
```
Este es el punto de partida recomendado para la mayoría de las aplicaciones de navegador.
Se encarga de:
* empaquetado WASM inicio de backend
* captura de fotograma
* ROI/orquestación de sesiones
* emisión de diagnóstico
* apoyo de limpieza
## Paso 5: lea las métricas en su interfaz de usuario
```ts theme={null}
const metrics = session.getMetrics();
console.log(metrics);
```
En una aplicación real, realizarías una encuesta o te suscribirías a través de tu propia capa de estado de la interfaz de usuario y mostrarías los valores que son importantes para tu producto.
## Paso 6: Limpiar correctamente
Cuando el componente, ruta o página salga, detenga la sesión y libere la transmisión de la cámara. Ejecútelos en orden (los mismos `session` y `stream` que arriba):
```ts theme={null}
await session.stop();
```
```ts theme={null}
for (const track of stream.getTracks()) {
track.stop();
}
```
Esto importa más de lo que parece. Evita que las sesiones posteriores hereden el estado obsoleto de la cámara o del tiempo de ejecución.
## Ejemplo completo (pasta única)
Úselo cuando desee que un archivo se coloque en una aplicación Vite + React (por ejemplo, reemplace el contenido de `src/App.tsx`). Incluye configuración de la cámara, inicio de sesión y limpieza al desmontar.
```tsx App.tsx theme={null}
import { useEffect, useRef, useState } from "react";
import { createRppgSession, type RppgSession } from "@elata-biosciences/rppg-web";
export default function App() {
const videoRef = useRef(null);
const sessionRef = useRef(null);
const streamRef = useRef(null);
const [line, setLine] = useState("Starting…");
useEffect(() => {
let cancelled = false;
async function run() {
const video = videoRef.current;
if (!video) return;
let stream: MediaStream;
try {
stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "user" },
audio: false,
});
} catch {
setLine("Camera permission denied.");
return;
}
if (cancelled) {
stream.getTracks().forEach((t) => t.stop());
return;
}
streamRef.current = stream;
video.srcObject = stream;
await video.play().catch(() => undefined);
const sampleRate = stream.getVideoTracks()[0]?.getSettings().frameRate ?? 30;
try {
const session = await createRppgSession({
video,
sampleRate,
backend: "auto",
faceMesh: "off",
onDiagnostics: (d) => {
setLine(`status=${d.state.status} backend=${d.backendMode}`);
},
onError: (e) => setLine(`${e.code}: ${e.message}`),
});
if (cancelled) {
await session.dispose();
return;
}
sessionRef.current = session;
} catch (e) {
setLine(e instanceof Error ? e.message : "Session failed");
}
}
void run();
return () => {
cancelled = true;
void sessionRef.current?.dispose();
sessionRef.current = null;
streamRef.current?.getTracks().forEach((t) => t.stop());
streamRef.current = null;
};
}, []);
return (
{line}
);
}
```
Este ejemplo utiliza React `ref` en `