JavaScript 快速入門指南

快速入門 JavaScript SDK 最簡單的方法是下載並試用我們的範例程式碼。此外，您還可以按照本快速入門指南，快速建立您的首個 JavaScript 健康測評應用程式。

完成本指南後，我們強烈建議您遵循我們的軟體開發指南，以確保 Vitals™ SDK 產生的健康測評結果準確可靠。

SDK 安裝

請按照下載頁面中的說明安裝 JavaScript SDK 並將其整合到您的專案中。

設定相機

如整合 Vitals™ 健康測評（VHA）中所述，第一步是設定相機。首先，建立一個新專案並按照以下說明操作。

Vital Sign Camera

如 Vital Sign Camera 中所述，在 Vitals™ SDK 中，我們提供了一個名為 Vital Sign Camera 的特製相機組件。要設定它，請在 index.html 檔案中宣告 video HTML 元素。例如：

html

<video id="video" autoplay="true" playsinline></video>

如果您使用 vital-sign-camera.umd-X.X.X.js 腳本進行 SDK 安裝（如下載中所述），請在 JavaScript 或 TypeScript 檔案中使用下列程式碼匯入模組元件：

const { createVitalSignCamera, ServerId, Gender, GetHealthStage } = VitalSignCameraUMD;

否則，請使用以下程式碼導入模組，確保套件名稱與package.json檔案中所述的相同：

TypeScriptJavaScript

typescript

import { createVitalSignCamera, VitalSignEngineConfig, UserInfo, Gender, ServerId, VideoFrameProcessedEvent, GetHealthStage } from "ts-vital-sign-camera";

import { createVitalSignCamera, Gender, ServerId, GetHealthStage } from "ts-vital-sign-camera";

創建 Vital Sign Camera 元件並將其綁定到 video 元素：

TypeScriptJavaScript

typescript

/* Vitals™ 雲端服務配置 */
const config : VitalSignEngineConfig = {
    serverId: ServerId.AwsProdEnterprise,
    apiKey: "__YOUR_API_KEY__",
}

window.onload = () => {
    /* 創建並初始化 Vital Sign Camera */
    const video = document.querySelector("video")!;
    const cam = createVitalSignCamera({ isActive: true, config })
    cam.bind(video)
}

/* Vitals™ 雲端服務配置 */
const config = {
    serverId: ServerId.AwsProdEnterprise,
    apiKey: "__YOUR_API_KEY__",
}

window.onload = () => {
    /* 創建並初始化 Vital Sign Camera */
    const video = document.querySelector("video");
    const cam = createVitalSignCamera({ isActive: true, config })
    cam.bind(video)
}

如果相機預覽對您來說太大，請在 CSS 檔案中調整其大小：

css

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

TIP 提示

在上述範例中，字串 __YOUR_API_KEY__ 應替換為您自己的 API 金鑰。請聯絡我們以取得您的 API 金鑰，它是存取 Vitals™ 雲端服務的憑證。

運行應用程式，您現在應該能夠看到相機預覽。有關系統和相機設定的更多詳細信息，請參閱設定相機。

獲取用戶健康檔案

正如整合 Vitals™ 健康測評（VHA）中所述，我們必須收集用戶的健康檔案和病史數據，才能獲得個人化的健康測評結果並提高測評的準確性。

在 JavaScript 或 TypeScript 檔案中，您可以將收集到的用戶健康檔案供給 createVitalSignCamera 函數中的 userInfo 屬性。

TypeScriptJavaScript

typescript

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

// ...

/* 更新了此行以向 Vitals™ SDK 提供用戶健康檔案 */
const cam = createVitalSignCamera({ isActive: true, config, userInfo })

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

// ...

/* 更新了此行以向 Vitals™ SDK 提供用戶健康檔案 */
const cam = createVitalSignCamera({ isActive: true, config, userInfo })

TIP 提示

在上面的範例中，字串__YOUR_USER_ID__應替換為您自己的使用者 ID。請聯絡我們以取得您的使用者 ID，該 ID 指定了 Vitals™ 雲端服務的訂閱方案。掃描所獲得的生命體徵會因訂閱方案而異，每個方案都提供一組獨特的生命體徵。

更多詳細信息，請參閱獲取用戶健康檔案頁面。

掃描生命體徵

要開始掃描，您只需呼叫 Vital Sign Camera 元件的 startScanning() API 即可。

首先，在您的 HTML 檔案中建立一個「開始」按鈕來啟動掃描：

html

<button id="startButton">開始掃描</button>

在您的 JavaScript 或 TypeScript 檔案中，設定點擊事件監聽器，並呼叫 startScanning() API：

TypeScriptJavaScript

typescript

/* 更新了 onload 事件處理函數 */
window.onload = () => {
    // ...

    /* 如果按下開始按鈕，則開始掃描 */
    const startButton = document.querySelector('#startButton')!;
    startButton.addEventListener('click', () => {
        cam.startScanning()
    })
}

/* 更新了 onload 事件處理函數 */
window.onload = () => {
    // ...

    /* 如果按下開始按鈕，則開始掃描 */
    const startButton = document.querySelector('#startButton');
    startButton.addEventListener('click', () => {
        cam.startScanning()
    })
}

呼叫 API 後，元件將開始透過相機掃描人臉，持續時間為 30 秒。掃描成功後，將傳回生命體徵訊息。您可以透過 onVideoFrameProcessed 回呼函數記錄掃描進度並觀察任何錯誤。此回調函數以每秒 30Hz 的頻率（此頻率取決於相機的幀率）傳回處理結果。

TypeScriptJavaScript

typescript

/* 更新了 onload 事件處理函數 */
window.onload = () => {
    // ...

    /* 處理 Vital Sign Camera 事件 */
    cam.onVideoFrameProcessed = (event : VideoFrameProcessedEvent) => {
        const healthResult = event.healthResult;
    
        /* 如果掃描正在進行，則列印掃描階段和剩餘秒數。 */
        if (healthResult?.stage != GetHealthStage.Idle) {
            console.log(`掃描階段=${healthResult?.stage}, 剩餘秒數=${healthResult?.remainingTime}`)
        }
        /* 若有錯誤則列印 */
        if (healthResult?.error) {
            console.log(healthResult.error)
        }
    }
}

/* 更新了 onload 事件處理函數 */
window.onload = () => {
    // ...

    /* 處理 Vital Sign Camera 事件 */
    cam.onVideoFrameProcessed = (event) => {
        const healthResult = event.healthResult;
    
        /* 如果掃描正在進行，則列印掃描階段和剩餘秒數。 */
        if (healthResult?.stage != GetHealthStage.Idle) {
            console.log(`掃描階段=${healthResult?.stage}, 剩餘秒數=${healthResult?.remainingTime}`)
        }
        /* 若有錯誤則列印 */
        if (healthResult?.error) {
            console.log(healthResult.error)
        }
    }
}

運行應用程式，將你的臉部置於相機預覽的中央，點擊“開始掃描”按鈕。將你的臉部移出相機預覽範圍，模擬「人臉遺失」錯誤。你應該在控制台中看到類似這樣的內容：

掃描階段=1, 剩餘秒數=22.115000000000002
掃描階段=1, 剩餘秒數=22.079
Error: face lost

有關處理掃描過程的更多詳細信息，請參閱掃描生命體徵頁面。

取得並展示健康測評結果

Vital Sign Camera 組件會透過 onVideoFrameProcessed 回呼函數傳回健康測評結果。在下面的範例程式碼中，它會檢查心率是否已準備好，並在準備好後將其顯示在控制台中。

TypeScriptJavaScript

typescript

/* 更新了 onload 事件處理函數 */
window.onload = () => {
    // ...

    /* 更新了 onVideoFrameProcessed 回呼函數 */
    cam.onVideoFrameProcessed = (event : VideoFrameProcessedEvent) => {
        const healthResult = event.healthResult;
    
        // ...

        /* 取得心率結果 */
        if (healthResult?.health?.vitalSigns.heartRate) {
            console.log(`心率=${healthResult?.health?.vitalSigns.heartRate}`)
        }
    }
}

/* 更新了 onload 事件處理函數 */
window.onload = () => {
    // ...

    /* 更新了 onVideoFrameProcessed 回呼函數 */
    cam.onVideoFrameProcessed = (event) => {
        const healthResult = event.healthResult;
    
        // ...

        /* 取得心率結果 */
        if (healthResult?.health?.vitalSigns.heartRate) {
            console.log(`心率=${healthResult?.health?.vitalSigns.heartRate}`)
        }
    }
}

運行應用程式並進行掃描，30秒後，您將能夠看到以下心率結果：

掃描階段=2, 剩餘秒數=0.49899999999999967
心率=78.83117164786404
掃描階段=2, 剩餘秒數=0.46799999999999997
心率=78.83117164786404

Vitals™ SDK 中提供了更多生命體徵測評結果，我們也提供了測評結果的解讀指南。更多信息，請參閱取得並展示健康測評結果頁面。

🎉🎉🎉 恭喜！ 🎉🎉🎉

您已完成您的第一個 Vitals™ 應用程式！

WARNING 重要提示

本指南僅提供使用 JavaScript SDK 的最小可行產品 (MVP)，我們 Vitals™ 雲端服務仍提供更多功能和更多操作，以確保測評結果準確可靠。例如：檢查掃描條件、使用訊號質量指標等等。更多詳情，請參閱軟體開發指南頁面、範例程式碼或 API 參考。

JavaScript 快速入門指南 ​

SDK 安裝 ​

設定相機 ​

Vital Sign Camera ​

獲取用戶健康檔案 ​

掃描生命體徵 ​

取得並展示健康測評結果 ​

JavaScript 快速入門指南

SDK 安裝

設定相機

Vital Sign Camera

獲取用戶健康檔案

掃描生命體徵

取得並展示健康測評結果