Teledetección en una aplicación de navegador

• 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

pnpm add @elata-biosciences/rppg-web

npm install @elata-biosciences/rppg-web

​

Recomendado versus avanzado

• 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.

• 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

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

• 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

const session = await createRppgSession({
  video: videoEl,
  wasmJsUrl: "/assets/rppg_wasm.js",
  wasmBinaryUrl: "/assets/rppg_wasm_bg.wasm",
});

​

Flujo de reinicio administrado

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

​

Ayudantes avanzados

const trace = session.getTraceSnapshot(300);

console.log(trace.points);
console.log(trace.lastSample);
console.log(trace.backendFailure);

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

const waveform = computeTraceWaveformDebug(session.getTraceSnapshot(300));
console.log(waveform.peaks);

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

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

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

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

await ensureVideoPlaying(video, { timeoutMs: 5000 });

​

Cuándo utilizar la plantilla rPPG en su lugar

• 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

​

Siguiente