摄像头集成

如果你希望对浏览器应用中的摄像头心率测量进行更底层的控制，请阅读本指南。推荐的高层 API 请先参阅在浏览器应用中使用 rPPG。

本指南涵盖的内容

本指南展示如何：

在浏览器中采集网络摄像头画面
检测人脸并提取面部区域
将样本输入 rPPG 处理器
读取实时 BPM 和信号质量
在有 Muse PPG 时改进估算结果

开始之前

你需要：

@elata-biosciences/rppg-web
支持摄像头访问（getUserMedia）和 WebAssembly 的浏览器
https:// 或 localhost

npm install @elata-biosciences/rppg-web

pnpm add @elata-biosciences/rppg-web

当面部光线充足、基本保持静止并完整出现在画面中时，rPPG 效果最好。

大多数应用应使用 createRppgSession()，它封装了本页的所有内容（WASM 初始化、帧采集、ROI 选择、诊断、清理）。参见在浏览器应用中使用 rPPG。只有在需要自定义编排时，才使用下面的底层组件。

选择起点

从演示开始

如果想以最快速度获得参考实现，请创建一个可运行的浏览器应用。

rPPG Web 快速上手

了解包的入口和更高层的浏览器 API。

帧来源

查看本指南使用的底层摄像头和人脸检测组件。

校准与融合

需要更准确的估算时，添加基于 Muse 的校准。

使用 DemoRunner 快速集成

DemoRunner 在一个流程中处理帧采集、人脸检测、ROI 提取和处理，同时让你保留对处理器的控制。

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

仅当 metrics.confidence 高于应用的阈值时才显示 BPM。 0.5 左右的阈值是一个实用的起点。

手动流水线

当你需要更精细地控制人脸追踪、采样或中间结果的渲染方式时，使用手动路径。

加载人脸模型并创建帧来源

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

创建处理器

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

第三个参数将分析窗口设置为 10 秒。

从面部 ROI 输入样本

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

启动摄像头并读取指标

await source.start();

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

添加 Muse 校准

如果有 Muse 设备，你可以将其 PPG 作为参考信号来改进基于摄像头的估算。

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

更完整的融合流程（包括 MuseFusionCalibrator 和校准模型）请继续阅读校准。

质量检查清单

在调试流水线之前，请先检查：

保持面部光线均匀
减少头部移动
在信任早期 BPM 输出前等待 5 到 10 秒
确认确实检测到了面部 ROI
使用 DemoRunner 时启用 useSkinMask

下一步

rPPG Web 快速上手

了解包的接口和更高层的浏览器会话 API。

帧来源

更深入地了解摄像头和人脸检测组件。

校准与融合

通过基于 Muse 的校准和多源融合改进估算。

创建 elata 演示

如果想更快上手，从可运行的参考应用开始。

概览

EEG Web SDK

EEG BLE Web SDK

摄像头 Web SDK

PPG Web SDK

会话与分析

操作与维护

贡献者

本指南涵盖的内容

开始之前

选择起点

从演示开始

rPPG Web 快速上手

帧来源

校准与融合

使用 DemoRunner 快速集成

手动流水线

添加 Muse 校准

质量检查清单

下一步

rPPG Web 快速上手

帧来源

校准与融合

创建 elata 演示

​本指南涵盖的内容

​开始之前

​选择起点

从演示开始

rPPG Web 快速上手

帧来源

校准与融合

​使用 DemoRunner 快速集成

​手动流水线

​添加 Muse 校准

​质量检查清单

​下一步

rPPG Web 快速上手

帧来源

校准与融合

创建 elata 演示

本指南涵盖的内容

开始之前

选择起点

使用 DemoRunner 快速集成

手动流水线

添加 Muse 校准

质量检查清单

下一步