建立 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™ 云端服务的凭证。