Vue 快速入門指南
快速入門 Vue SDK 最簡單的方法是下載並試用我們的 範例程式碼。此外，您還可以按照本快速入門指南，快速建立您的首個 Vue 健康測評應用程式。
完成本指南後，我們強烈建議您遵循我們的 軟體開發指南，以確保 Vitals™ SDK 產生的健康測評結果準確可靠。
SDK Installation
請按照 下載 頁面中的說明安裝 Vue SDK 並將其整合到您的專案中。
設定相機
如 整合 Vitals™ 健康測評（VHA） 中所述，第一步是設定相機。首先，建立一個新專案並按照以下說明操作。
Vital Sign Camera
如 Vital Sign Camera 中所述，在 Vitals™ SDK 中，我們提供了一個名為 VitalSignCamera 的特製相機組件。要設定它，請在 App.vue 檔案中宣告 VitalSignCamera 元素。例如：
<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>如果相機預覽對您來說太大，您可以調整其大小：
<style scoped>
video {
width: 640px;
height: 480px;
}
</style>TIP 提示
在上述範例中，字串 __YOUR_API_KEY__ 應替換為您自己的 API 金鑰。請聯絡我們以取得您的 API 金鑰，它是存取 Vitals™ 雲端服務的憑證。
運行應用程式，您現在應該能夠看到相機預覽。有關系統和相機設定的更多詳細信息，請參閱 設定相機。
獲取用戶健康檔案
正如 整合 Vitals™ 健康測評（VHA） 中所述，我們必須收集用戶的健康檔案和病史數據，才能獲得個人化的健康測評結果並提高測評的準確性。
在 App.vue 檔案中，您可以將用戶健康檔案提供給 createVitalSignCamera 函數中的 userInfo 屬性。
<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：
<script setup lang="ts">
const camera = ref<InstanceType<typeof VitalSignCamera> | null>(null)
// ...
</script>
<template>
<VitalSignCamera
ref="camera"
...
/>
</template>之後，新增一個開始按鈕，設定點擊處理程序，並呼叫 startScanning() API：
<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 的頻率（此頻率取決於相機的幀率）傳回處理結果。
<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 回呼函數傳回健康測評結果。在下面的範例程式碼中，它會檢查心率是否已準備好，並在準備好後將其顯示在控制台中。
<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.9702850589393Vitals™ SDK 中提供了更多生命體徵測評結果，我們也提供了測評結果的解讀指南。更多信息，請參閱 取得並展示健康測評結果 頁面。
🎉🎉🎉 恭喜！ 🎉🎉🎉
您已完成您的第一個 Vitals™ 應用程式！