Vue 快速入门指南

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

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

SDK Installation

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

设定相机

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

Vital Sign Camera

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

vue

<script setup lang="ts">
import { ref } from 'vue';
import { VitalSignCamera, type VitalSignEngineConfig, ServerId } from 'vue-vital-sign-camera'

/* Vitals™ 云端服务配置 */
const config = ref<VitalSignEngineConfig>({
  serverId: ServerId.AwsProdEnterprise,
  apiKey: "__YOUR_API_KEY__",
})
</script>

<template>
  <VitalSignCamera 
      :isActive="true"
      :config="config"
  />
</template>

如果相机预览对您来说太大，您可以调整其大小：

vue

<style scoped>
video {
  width: 640px;
  height: 480px;
}
</style>

TIP 提示

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

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

获取用户健康档案

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

在 App.vue 档案中，您可以将用户健康档案提供给 createVitalSignCamera 函数中的 userInfo 属性。

vue

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { VitalSignCamera, Gender, type UserInfo, type VitalSignEngineConfig, ServerId } from 'vue-vital-sign-camera'

const userInfo = reactive<UserInfo>({
  age: 30,
  gender: Gender.Male,
  userId: '__YOUR_USER_ID__',
})

// ...
</script>

<template>
  <!-- 向 Vitals™ SDK 提供用户健康档案 -->
  <VitalSignCamera 
      :userInfo="userInfo" 
      ...
  />
</template>

<!-- ... -->

TIP 提示

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

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

扫描生命体征

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

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

vue

<script setup lang="ts">
const camera = ref<InstanceType<typeof VitalSignCamera> | null>(null)

// ...

</script>

<template>
  <VitalSignCamera 
    ref="camera"
    ...
  />
</template>

之后，新增一个开始按钮，设定点击处理程序，并呼叫 startScanning() API：

vue

<script setup lang="ts">
// ...

const startScanning = () => {
  if (camera.value === null) {
    return
  }
  camera.value.startScanning();
}
</script>

<template>
  <button @click="startScanning">开始扫描</button>
  ...
</template>

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

vue

<script setup lang="ts">

// ...

function onVideoFrameProcessed(event: VideoFrameProcessedEvent) {
  const { healthResult } = event;

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

<template>
  <VitalSignCamera
    ...
    @onVideoFrameProcessed="onVideoFrameProcessed"
  />
</template>

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

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

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

取得并显示健康测评结果

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

vue

<script setup lang="ts">

// ...

/* 更新了 onVideoFrameProcessed 回呼函数 */
function onVideoFrameProcessed(event: VideoFrameProcessedEvent) {
  const { healthResult } = event;

  // ...

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

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

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

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

🎉🎉🎉 恭喜！ 🎉🎉🎉

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

WARNING 重要提示

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

Vue 快速入门指南 ​

SDK Installation ​

设定相机 ​

Vital Sign Camera ​

获取用户健康档案 ​

扫描生命体征 ​