信号可视化器

信号可视化器在相机画面旁显示实时滚动的 PPG 和呼吸波形数据。它提供关于信号质量和测量稳定性的即时视觉反馈。

工作原理

在实时估算过程中，SDK 持续处理视频帧以提取生理信号。信号可视化器捕捉这些信号数据，并渲染出随每个处理帧更新的滚动波形图。多个信号通道可以同时显示，并可自定义颜色。

配置

信号可视化器作为独立组件创建，并连接到相机的帧处理回调。它会渲染到任何 HTML 容器元素中。

JavaScript

import { createVitalSignCamera, SignalVisualizer } from 'ts-vital-sign-camera';

const camera = createVitalSignCamera({
  userId: 'user-123',
  apiKey: 'your-api-key',
  enableRealtimeEstimation: true
});

// 使用容器元素创建可视化器
const visualizer = new SignalVisualizer(
  document.getElementById('signal-chart'),  // 容器元素
  {
    signalColors: ['#ff6b6b', '#4ecdc4'],  // 每个信号通道的颜色
    windowSeconds: 10,                      // 显示时间窗口（默认：10）
    pixelsPerSecond: 60,                    // 水平分辨率（默认：60）
    height: 200,                            // 图表高度（像素，默认：200）
    lineWidth: 2,                           // 线条宽度（默认：2）
    backgroundColor: '#1a1a2e',             // 背景颜色
    gridColor: '#16213e',                   // 网格线颜色
    enableAutoScale: true,                  // 自动调整 Y 轴（默认：true）
    yAxisMin: -1.5,                         // 固定 Y 轴最小值（autoScale: false）
    yAxisMax: 1.5,                          // 固定 Y 轴最大值（autoScale: false）
    showLegend: true,                       // 频道标签图例（默认：false）
    enableLowPassFilter: true,              // 降噪滤波器（默认：false）
    lowPassFilterCutoff: 5,                 // 滤波器截止频率（Hz，默认：5）
    showGrid: true,                         // 网格线（默认：true）
    label: 'PPG Waveform',                  // 图表标签
  }
);

// 将可视化器连接到帧处理
camera.visualizer = visualizer;

// 替代方案：通过回调手动连接
camera.onVideoFrameProcessed = (event) => {
  if (event.signalData) {
    visualizer.updateSignal(event.signalData, event.realtimeEstimation);
  }
};

React

import { VitalSignCamera, SignalVisualizer } from 'react-vital-sign-camera';
import { useEffect, useRef } from 'react';

const App = () => {
  const chartRef = useRef(null);
  const visualizerRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      visualizerRef.current = new SignalVisualizer(chartRef.current, {
        signalColors: ['#ff6b6b'],
        windowSeconds: 8,
        height: 180
      });
    }
    return () => visualizerRef.current?.destroy();
  }, []);

  return (
    <div>
      <VitalSignCamera
        enableRealtimeEstimation={true}
        visualizer={visualizerRef.current}
      />
      <div ref={chartRef} />
    </div>
  );
};

Vue

<template>
  <div>
    <VitalSignCamera
      :enableRealtimeEstimation="true"
      :visualizer="visualizer"
    />
    <div ref="chartContainer" class="signal-chart" />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { SignalVisualizer } from 'ts-vital-sign-camera';

const chartContainer = ref(null);
const visualizer = ref(null);

onMounted(() => {
  visualizer.value = new SignalVisualizer(chartContainer.value, {
    signalColors: ['#4ecdc4', '#ff6b6b'],
    windowSeconds: 10,
    height: 200,
    showLegend: true,
    enableLowPassFilter: true
  });
});

onUnmounted(() => {
  visualizer.value?.destroy();
});
</script>

<style scoped>
.signal-chart {
  width: 100%;
  max-width: 800px;
  margin-top: 16px;
}
</style>

SignalVisualizerConfig 接口

interface SignalVisualizerConfig {
  signalColors?: string[];          // 每个通道的 CSS 颜色字符串
  windowSeconds?: number;           // 时间窗口（秒，默认：10）
  pixelsPerSecond?: number;         // 水平像素/秒（默认：60）
  height?: number;                  // 图表高度（像素，默认：200）
  lineWidth?: number;               // 线条宽度（像素，默认：2）
  backgroundColor?: string;         // 背景 CSS 颜色
  gridColor?: string;               // 网格线 CSS 颜色
  enableAutoScale?: boolean;        // 自动 Y 轴缩放（默认：true）
  yAxisMin?: number;                // 固定 Y 轴最小值（autoScale: false）
  yAxisMax?: number;                // 固定 Y 轴最大值（autoScale: false）
  showLegend?: boolean;             // 显示频道图例（默认：false）
  enableLowPassFilter?: boolean;    // 启用信号平滑（默认：false）
  lowPassFilterCutoff?: number;     // 低通滤波器截止频率 Hz（默认：5）
  showGrid?: boolean;               // 显示网格线（默认：true）
  label?: string;                   // 图表标签
}

方法

方法	描述
updateSignal(data, estimation?)	推送新的信号数据点，可选附带估算上下文
destroy()	清理资源和 DOM 元素

VisualSignalType

enum VisualSignalType {
  PPG = 'PPG',
  Respiratory = 'Respiratory'
}

提示

• 为获得最佳布局，请将可视化器容器放置在相机元素下方或旁边
• 使用截止频率 3-5 Hz 的 enableLowPassFilter 可减少高频噪声，同时保留脉搏波形特征
• 多个信号通道会自动映射到 signalColors[] 中的颜色；为每个预期通道提供一种颜色