在现有浏览器应用中添加摄像头 rPPG

<video id="camera" autoplay playsinline muted></video>

const videoEl = document.getElementById("camera") as HTMLVideoElement;

const stream = await navigator.mediaDevices.getUserMedia({
  video: { facingMode: "user" },
  audio: false,
});

videoEl.srcObject = stream;
await videoEl.play();

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

import { useEffect, useRef, useState } from "react";
import { createRppgSession, type RppgSession } from "@elata-biosciences/rppg-web";

export default function App() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const sessionRef = useRef<RppgSession | null>(null);
  const streamRef = useRef<MediaStream | null>(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 (
    <main style={{ padding: "1.5rem", maxWidth: 720 }}>
      <p>{line}</p>
      <video ref={videoRef} autoPlay playsInline muted style={{ width: "100%", borderRadius: 12 }} />
    </main>
  );
}