建立 Vital Sign Camera

如 Vital Sign Camera 中所述，在 Vitals™ SDK 中，我們提供了一個名為 Vital Sign Camera 的特製相機組件。

目標 SDK

JavaScript

React

Vue

Flutter

ReactNative

Android

iOS

TIP 提示

您可以參考 範例程式碼 和 API 參考 以了解更多詳情。最相關的 API 包括：createVitalSignCamera、VitalSignCameraCreationProps 和 VitalSignEngineConfig。

若要設定 Vital Sign Camera，請宣告 video HTML 元素。例如：

<!-- Vital Sign Camera -->
<video id="video" autoplay="true" playsinline></video>

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

const { createVitalSignCamera, ServerId } = VitalSignCameraUMD;

否則，請使用以下程式碼導入模組：

TypeScript

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

JavaScript

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

請確保套件名稱與 package.json 檔案中所述的名稱一致。您可能還需要稍後在此行中自行新增其他匯入。

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

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);
}

JavaScript

/* 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);
}

在 TypeScript 中，您可能會收到一則錯誤訊息，提示缺少 userInfo。您可以按照 獲取用戶健康檔案 指南進行新增。

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

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

TIP 提示

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