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

获取用户健康档案

扫描生命体征

取得并显示健康测评结果