信號可視化器

信號可視化器在相機畫面旁顯示即時滾動的 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[] 中的顏色；為每個預期通道提供一種顏色