React 快速入门指南

快速入门 React SDK 最简单的方法是下载并试用我们的示例程式码。此外，您还可以按照本快速入门指南，快速建立您的首个 React 健康测评应用程式。

完成本指南后，我们强烈建议您遵循我们的软体开发指南，以确保 Vitals™ SDK 产生的健康测评结果准确可靠。

SDK Installation

请按照下载页面中的说明安装 React SDK 并将其整合到您的专案中。

设定相机

如整合 Vitals™ 健康测评（VHA）中所述，第一步是设定相机。首先，建立一个新专案并按照以下说明操作。

Vital Sign Camera

如 Vital Sign Camera 中所述，在 Vitals™ SDK 中，我们提供了一个名为 Vital Sign Camera 的特制相机组件。要设定它，请在App.tsx档案中，宣告元件 VitalSignCamera。例如：

tsx

import './App.css'
import { VitalSignCamera } from 'react-vital-sign-camera'

/* Vitals™ 云端服务配置 */
const CONFIG : VitalSignEngineConfig = {
  apiKey: "__YOUR_API_KEY__",
}

function App() {
  return (
    <div>
      <VitalSignCamera
        isActive={true}
        config={CONFIG}
      />
    </div>
  )
}

export default App

如果相机预览对您来说太大，请在 CSS 档案中调整其大小：

css

video {
    width: 640px;
    height: 480px;
}

TIP 提示

在上述范例中，字串 __YOUR_API_KEY__ 应替换为您自己的 API 金钥。请联络我们以取得您的 API 金钥，它是存取 Vitals™ 云端服务的凭证。

运行应用程式，您现在应该能够看到相机预览。有关系统和相机设定的更多详细信息，请参阅设定相机。

获取用户健康档案

正如整合 Vitals™ 健康测评（VHA）中所述，我们必须收集用户的健康档案和病史数据，才能获得个人化的健康测评结果并提高测评的准确性。

在 App.tsx 档案中，您可以将用户健康档案提供给 VitalSignCamera 元件中的 userInfo 属性。

tsx

import './App.css'
import { Gender, UserInfo, VitalSignCamera } from 'react-vital-sign-camera'

const USERINFO : UserInfo = {
  age: 30,
  gender: Gender.Male,
  userId: '__YOUR_USER_ID__',
}

function App() {
  return (
    <div>
      <VitalSignCamera
        // 向 Vitals™ SDK 提供用户健康档案
        userInfo={USERINFO}
        // ...
      />
    </div>
  )
}

export default App

TIP 提示

在上面的范例中，字串__YOUR_USER_ID__应替换为您自己的使用者 ID。请联络我们以取得您的使用者 ID，该 ID 指定了 Vitals™ 云端服务的订阅方案。扫描所获得的生命体征会因订阅方案而异，每个方案都提供一组独特的生命体征。

更多详细信息，请参阅获取用户健康档案页面。

扫描生命体征

要开始扫描，您只需呼叫 VitalSignCamera 元件的 startScanning() API 即可。

首先，建立一个相机引用，以便我们可以呼叫 startScanning() API：

tsx

const [camera, setCamera] = useState<VitalSignCameraInstance|undefined>(undefined);

使用 onCreated 函数设定相机控制器：

tsx

const onCameraCreated = (camera:VitalSignCameraInstance) => {
  setCamera(camera);
}

// ...

<VitalSignCamera
  // ...
  onCreated={onCameraCreated}
/>

然后，新增一个开始按钮，并呼叫 startScanning() API：

tsx

function App() {
  // ...

  const startScanning = () => {
    camera?.startScanning();
  }

  return (
    <div>
      <VitalSignCamera
        // ...
      />
      <button id="startButton" onClick={startScanning}>开始扫描</button>
    </div>
  )
}

呼叫 API 后，元件将开始透过相机扫描人脸，持续时间为 30 秒。扫描成功后，将传回生命体征讯息。您可以透过 onVideoFrameProcessed 回呼函数记录扫描进度并观察任何错误。此回调函数以每秒 30Hz 的频率（此频率取决于相机的帧率）传回处理结果。

tsx

const onVideoFrameProcessed = useCallback( (processedFrame:VideoFrameProcessedEvent)=> {
  const healthResult = processedFrame.healthResult;

  /* 如果扫描正在进行，则列印扫描阶段和剩余秒数。 */
  if (healthResult?.stage !== GetHealthStage.Idle) {
    console.log(`扫描阶段=${healthResult?.stage}, 剩余秒数=${healthResult?.remainingTime}`)
  }
  /* 若有错误则列印 */
  if (healthResult?.error) {
    console.log(healthResult.error)
  }
}, [])

// ...

<VitalSignCamera
  // ...
  onVideoFrameProcessed={onVideoFrameProcessed}
/>

运行应用程式，将你的脸部置于相机预览的中央，点击“开始扫描”按钮。将你的脸部移出相机预览范围，模拟「人脸遗失」错误。你应该在控制台中看到类似这样的内容：

扫描阶段=1, 剩余秒数=21.503
扫描阶段=1, 剩余秒数=21.47
扫描阶段=1, 剩余秒数=21.436
Error: face lost
Error: face lost

有关处理扫描过程的更多详细信息，请参阅扫描生命体征页面。

取得并显示健康测评结果

VitalSignCamera 组件会透过 onVideoFrameProcessed 回呼函数传回健康测评结果。在下面的示例程式码中，它会检查心率是否已准备好，并在准备好后将其显示在控制台中。

tsx

/* 更新了 onVideoFrameProcessed 回呼函数 */
const onVideoFrameProcessed = useCallback( (processedFrame:VideoFrameProcessedEvent)=> {
  const healthResult = processedFrame.healthResult;

  // ...

  /* 取得心率结果 */
  if (healthResult?.health) {
    console.log(`心率=${healthResult.health.vitalSigns.heartRate}`);
  }
}, [])

运行应用程式并进行扫描，30秒后，您将能够看到以下心率结果：

扫描阶段=2, 剩余秒数=0.06400000000000006
扫描阶段=2, 剩余秒数=0.03200000000000003
心率=78.9702850589393
心率=78.9702850589393

Vitals™ SDK 中提供了更多生命体征测评结果，我们也提供了测评结果的解读指南。更多信息，请参阅取得并显示健康测评结果页面。

🎉🎉🎉 恭喜！ 🎉🎉🎉

您已完成您的第一个 Vitals™ 应用程式！

WARNING 重要提示

本指南仅提供使用 React SDK 的最小可行产品 (MVP)，我们 Vitals™ 云端服务仍提供更多功能和更多操作，以确保测评结果准确可靠。例如：检查扫描条件、使用信号质量指标等等。更多详情，请参阅软体开发指南页面、示例程式码或 API 参考。

React 快速入门指南 ​

SDK Installation ​

设定相机 ​

Vital Sign Camera ​

获取用户健康档案 ​

扫描生命体征 ​