> ## 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. # Teledetección en una aplicación de navegador > Agregue una cámara basada en navegador rPPG con los asistentes de sesión de Elata compatibles. Utilice esta página si desea el modelo de integración para el navegador rPPG. Si desea pasos numerados para una aplicación existente, use [Agregar rPPG basado en cámara a una aplicación de navegador existente](/es/sdk/tutorials/rppg-existing-app). Si desea la ruta de andamio, use [Cree su primera aplicación Elata](/es/sdk/tutorials/first-app). Esta es la ruta de bioseñal del navegador **principal** para la mayoría de los productos: no se requieren auriculares antes de enviar una señal significativa de UX. rPPG significa fotopletismografía remota. Estima los cambios relacionados con el pulso a partir del vídeo de la cámara, generalmente de una región de la cara, sin necesidad de un sensor portátil. En las aplicaciones de navegador, los desarrolladores suelen utilizar rPPG para convertir la transmisión de una cámara en vivo en métricas, diagnósticos y comentarios orientados al bienestar del estilo del ritmo cardíaco. Los ejemplos de aplicaciones concretas incluyen: * Juegos de engaño o farol que reaccionan a los cambios de pulso durante los momentos clave. * Retroalimentación de estrés o excitación en el entrenamiento y las experiencias sociales. * Flujos de respiración y relajación que muestran una respuesta fisiológica a lo largo del tiempo. * Aplicaciones de salud o bienestar orientadas a la biorretroalimentación que requieren señales de pulso basadas en cámaras sin hardware adicional. *** ## Instalación ```bash pnpm theme={null} pnpm add @elata-biosciences/rppg-web ``` ```bash npm theme={null} npm install @elata-biosciences/rppg-web ``` *** ## Recomendado versus avanzado Utilice `createRppgSession()` para aplicaciones de navegador. Maneja WASM inicio, captura de fotogramas, orquestación de ROI, diagnóstico y limpieza. **Recomendado:** * Utilice `createRppgSession()` para aplicaciones de navegador. * Utilice `createManagedRppgSession()` cuando desee un comportamiento de reinicio integrado después de una falla del procesador del terminal. * Utilice `createRppgPipeline()` de `@elata-biosciences/eeg-web` solo si necesita intencionalmente una ingestión de muestra de bajo nivel. **Avanzado:** * Utilice `RppgProcessor`, `DemoRunner`, backends personalizados o enlaces WASM generados solo si necesita una orquestación personalizada y ya comprende el ciclo de vida del tiempo de ejecución. * Si no está depurando el SDK en sí, no comience con las exportaciones WASM generadas. *** ## Integración mínima ```ts 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(diagnostics.state.status, diagnostics.faceTrackingMode); console.log(diagnostics.framesSeen, diagnostics.totalSamplesReceived); console.log(diagnostics.issues, diagnostics.processorFailure); }, onError: (error) => { console.error(error.code, error.message); }, }); console.log(session.getMetrics()); ``` *** ## Flujo de integración típico 1. Adquiera una transmisión de cámara en el navegador y adjúntela a un elemento `video` . 2. Llama al `createRppgSession({ video, backend: "auto" })`. 3. Leer métricas de `session.getMetrics()`. 4. Diagnóstico de superficie de `onDiagnostics` o `session.getDiagnostics()`. 5. Detenga la sesión durante la limpieza con `await session.stop()`. `createRppgSession()` posee WASM init, carga de FaceMesh, programación de fotogramas, selección de ROI, diagnóstico y limpieza. Utilice `session.state` o `diagnostics.state` para distinguir: * normal `running` * respaldo de inicio o configuración degradada a través de `degraded` * Fallo del procesador de tiempo de ejecución del terminal a través de `failed` Si elige intencionalmente `faceMesh: "off"`, la sesión permanece en el modo `video_frame` compatible y no se informa como una falla de FaceMesh de manera predeterminada. Si su aplicación necesita rutas de recursos explícitas en lugar de la búsqueda predeterminada `/pkg/*` , pase uno o más de: ```ts theme={null} const session = await createRppgSession({ video: videoEl, wasmJsUrl: "/assets/rppg_wasm.js", wasmBinaryUrl: "/assets/rppg_wasm_bg.wasm", }); ``` Las aplicaciones avanzadas también pueden proporcionar `wasmImporter` directamente. *** ## Flujo de reinicio administrado Si desea que el SDK sea el propietario del tiempo de reinicio después de fallas en el procesador del terminal, use el contenedor administrado: ```ts theme={null} import { createManagedRppgSession } from "@elata-biosciences/rppg-web"; const managed = await createManagedRppgSession({ video: videoEl, faceMesh: "off", maxRetries: 3, retryDelayMs: 1500, onStateChange: (state) => { console.log(state.status, state.retryCount, state.lastError?.code); }, }); ``` El contenedor administrado expone estados de alto nivel como `starting`, `running`, `retrying`y `failed`, y al mismo tiempo permite que las aplicaciones bajen al `RppgSession` subyacente cuando sea necesario. *** ## Ayudantes avanzados Utilice `getTraceSnapshot()` cuando necesite formas de onda recientes o puntos de depuración para gráficos, paneles de depuración o captura de regresión: ```ts theme={null} const trace = session.getTraceSnapshot(300); console.log(trace.points); console.log(trace.lastSample); console.log(trace.backendFailure); ``` Para depurar la forma de onda de pico/umbral a partir de los datos de seguimiento, utilice `computeTraceWaveformDebug()`: ```ts theme={null} import { computeTraceWaveformDebug } from "@elata-biosciences/rppg-web"; const waveform = computeTraceWaveformDebug(session.getTraceSnapshot(300)); console.log(waveform.peaks); ``` Utilice `normalizeRppgError()` en lugar de analizar el texto del mensaje sin formato en el código de la aplicación: ```ts theme={null} import { normalizeRppgError } from "@elata-biosciences/rppg-web"; const normalized = normalizeRppgError(session.lastError, session.getDiagnostics()); console.log(normalized?.code); console.log(normalized?.message); console.log(normalized?.guidance); ``` Esto proporciona a las aplicaciones categorías estables como `wasm_init_failed`, `backend_unavailable`, `camera_not_playing`y `processor_failed`. Si desea una única instantánea de la aplicación con estado de reinicio, publicación de puerta, datos de seguimiento y mensajes estables, utilice `createRppgAppAdapter()`: ```ts theme={null} import { createManagedRppgSession, createRppgAppAdapter, } from "@elata-biosciences/rppg-web"; const managed = await createManagedRppgSession({ video, faceMesh: "off", }); const adapter = createRppgAppAdapter(); const app = adapter.getSnapshot(managed); if (app.canPublish) { console.log(app.publishBpm); } console.log(app.status, app.message); ``` Si desea que el SDK también sea propietario del bucle de instantáneas recurrente, utilice `createRppgAppMonitor()`: ```ts theme={null} import { createManagedRppgSession, createRppgAppMonitor, } from "@elata-biosciences/rppg-web"; const managed = await createManagedRppgSession({ video, faceMesh: "off", }); const monitor = createRppgAppMonitor(managed, { intervalMs: 500 }); monitor.subscribe((snapshot) => { console.log(snapshot.status, snapshot.publishBpm); }); monitor.start(); ``` `createRppgSession()` ahora espera a que el elemento de vídeo comience a reproducirse de forma predeterminada. Si necesitas coordinar ese paso tú mismo llama directamente al `ensureVideoPlaying()` : ```ts theme={null} import { ensureVideoPlaying } from "@elata-biosciences/rppg-web"; await ensureVideoPlaying(video, { timeoutMs: 5000 }); ``` *** ## Cuándo utilizar la plantilla rPPG en su lugar Prefiere la plantilla con andamios `rppg-demo` cuando quieras: * una aplicación de cámara de navegador en buen estado * una referencia para la carga de activos empaquetados WASM * un punto de comparación más rápido al depurar su propia integración *** ## Problemas comunes * Si `session.backendMode` es `unavailable`, su aplicación probablemente no esté entregando correctamente los activos `pkg/` empaquetados. * Si `session.state.status` es `failed`, trate ese procesador como terminal y vuelva a crear la sesión en lugar de continuar sondeando métricas de él. * Si ve "la canalización de backend no tiene push\_API de muestra", probablemente haya omitido la ruta de contenedor seguro. Comience con `createRppgSession()` para aplicaciones de navegador o `initEegWasm()` más `createRppgPipeline()` para ingesta de bajo nivel. * Si presiona `wasmrppgpipeline_new`, inicialice el módulo WASM antes de crear canalizaciones de bajo nivel y evite llamar directamente a los constructores generados. * Si ve advertencias de inicio obsoletas, dirija el inicio a través de `initEegWasm()` en lugar de reenviar cadenas sin formato, URL o buffers a las exportaciones de inicio generadas. * Si falla el acceso a la cámara, confirme que la página tiene permiso para usar `getUserMedia`. * Si `session.lastError` no es nulo, use `code` y `message` para mostrar la captura real o la falla del procesador en lugar de volver a intentarlo a ciegas. * Si solo está evaluando el SDK, la aplicación con scaffolding es mucho más rápida que crear usted mismo todo el proceso del navegador. *** ## Guía de versión Los paquetes tienen versiones independientes, por lo que `rppg-web` y `eeg-web` no compartirán un número de versión y las últimas versiones no son automáticamente compatibles entre sí. Si utiliza varios paquetes de Elata juntos, utilice el conjunto de pines `create-elata-demo` . Consulte [Compatibilidad](/es/sdk/operations/compatibility#package-versions). ***