Vitals™ SDK 文件

中文（简体）

English
中文（繁體）

中文（简体）

English
中文（繁體）

Appearance

选择相机 ​

Vitals™ 旨在与大多数智慧型手机、平板电脑、笔记型电脑和自助服务终端中内建的 RGB 相机无缝协作，这些相机均符合最低参数要求。

Vitals™ SDK 提供易于使用的 API 来配置要使用的相机，您可以根据您的需要灵活选择不同的相机装置。

目标 SDK ​

JavaScript
React
Vue
Flutter
ReactNative
Android
iOS

TIP

您可以参考 示例程式码 和 API 参考 以了解更多详细资讯。最相关的 API 包括：VitalSignCameraInterface、CameraDevicesUpdatedEvent 和 CameraDevice。

取得可用的相机装置 ​

您可以透过设定 Vital Sign Camera 组件的 onCameraDevicesUpdated 监听器来取得所有可用相机装置的清单。此监听器会为您提供 CameraDevicesUpdatedEvent 对象，其中包含可用的 CameraDevice 清单。

typescript
/* 更新 onload 事件处理函数 */
window.onload = () => {
    /* 您应该已经创建的相机装置的引用。 */
    const cam = createVitalSignCamera({ isActive: true, config });

    /* 新增此代码，以便在更新后取得所有可用相机装置的清单 */
    cam.onCameraDevicesUpdated = (event: CameraDevicesUpdatedEvent) => {
        /* 将可用相机装置清单列印到控制台 */
        event.devices.map(device => {
            console.log(`Device ID = ${device.id}, Device Label = ${device.label}`);
        })
    };
}
js
/* 更新 onload 事件处理函数 */
window.onload = () => {
    /* 您应该已经创建的相机装置的引用。 */
    const cam = createVitalSignCamera({ isActive: true, config });

    /* 新增此代码，以便在更新后取得所有可用相机装置的清单 */
    cam.onCameraDevicesUpdated = (event) => {
        /* 将可用相机装置清单列印到控制台 */
        event.devices.map(device => {
            console.log(`Device ID = ${device.id}, Device Label = ${device.label}`);
        })
    };
}

选择相机 ​

WARNING 重要提示

您应避免在 30 秒的 Vitals™ 扫描期间变更相机装置。

您可以使用从 CameraDevicesUpdatedEvent API 中可用的 CameraDevice 检索到的 ID，设定 Vital Sign Camera 元件的 device 属性来指定相机装置。

typescript
/* 更新 onload 事件处理函数 */
window.onload = () => {
    /* 您应该已经创建的相机装置的引用。 */
    const cam = createVitalSignCamera({ isActive: true, config });
    /* 使用 device ID 选择相机装置 */
    cam.device = mDeviceId;
}
js
/* 更新 onload 事件处理函数 */
window.onload = () => {
    /* 您应该已经创建的相机装置的引用。 */
    const cam = createVitalSignCamera({ isActive: true, config });
    /* 使用 device ID 选择相机装置 */
    cam.device = mDeviceId;
}

TIP 提示

请将 mDeviceId 替换为您所需的相机装置的 device ID。您可以按照上述说明，从 onCameraDevicesUpdate 处理程序中取得 device ID。

相机选择器范例 ​

在此范例中，我们示范如何准备一个用于选择相机装置的相机选择器。

首先，在您的 HTML 档案中新增相机选择器：

html
<!-- 相机选择器 -->
<select id="cameraPicker" disabled>
    <option value="loading">Loading...</option>
</select>

在您的 TypeScript 或 JavaScript 档案中，设定 Vital Sign Camera 元件的 onCameraDevicesUpdated 监听器，以取得所有可用相机装置的资讯。您可以使用这些资讯在您的应用程式中建立相机选择器。

typescript
/* 更新 onload 事件处理函数 */
window.onload = () => {
    // ...

    /* 使用可用相机装置清单设定相机选择器元素 */
    const cameraPicker : HTMLSelectElement = document.querySelector("#cameraPicker")!;
    setupCameraPicker(cameraPicker, cam);
}

async function setupCameraPicker(cameraPicker: HTMLSelectElement, camera: VitalSignCameraInterface) {
    /* 监听相机装置事件并更新相机清单 */
    camera.onCameraDevicesUpdated = (event: CameraDevicesUpdatedEvent) => {
        /* 在 UI 上产生可用相机装置清单 */
        cameraPicker.innerHTML = event.devices.map(device => {
            const selected = camera.device === device.id ? 'selected' : ''
            return `<option value="${device.id}" ${selected}>${device.label}</option>`
        }).join('\n');

        /* 仅当有多个相机装置时才启用相机选择器 */
        if (event.devices.length > 1) {
            cameraPicker.removeAttribute('disabled');
        }
    };
}
js
/* 更新 onload 事件处理函数 */
window.onload = () => {
    // ...

   /* 使用可用相机装置清单设定相机选择器元素 */
    const cameraPicker = document.querySelector("#cameraPicker");
    setupCameraPicker(cameraPicker, cam);
}

async function setupCameraPicker(cameraPicker, camera) {
    /* 监听相机装置事件并更新相机清单 */
    camera.onCameraDevicesUpdated = (event) => {
        /* 在 UI 上产生可用相机装置清单 */
        cameraPicker.innerHTML = event.devices.map(device => {
            const selected = camera.device === device.id ? 'selected' : ''
            return `<option value="${device.id}" ${selected}>${device.label}</option>`
        }).join('\n');

        /* 仅当有多个相机装置时才启用相机选择器 */
        if (event.devices.length > 1) {
            cameraPicker.removeAttribute('disabled');
        }
    };
}

监听相机撷取事件，并设定 Vital Sign Camera 元件的 device 属性以使用特定的相机装置：

typescript
/* 更新 onload 事件处理函数 */
window.onload = () => {
    // ...

    /* 监听相机撷取事件，并将 Vital Sign Camera 设定为使用特定的相机装置 */
    cameraPicker.addEventListener('change', () => {
        cam.device = cameraPicker.value;
    })
}
js
/* 更新 onload 事件处理函数 */
window.onload = () => {
    // ...

    /* 监听相机撷取事件，并将 Vital Sign Camera 设定为使用特定的相机装置 */
    cameraPicker.addEventListener('change', () => {
        cam.device = cameraPicker.value;
    })
}

为避免使用者在 Vitals™ 扫描期间选择其他相机装置，请在 Vital Sign Camera 未处于 Idle 阶段时停用相机选择器。您可以使用 onVideoFrameProcessed 回呼检查 Vital Sign Camera 的状态，并在非 Idle 阶段停用相机选择器，例如：

typescript
/* 更新 onload 事件处理函数 */
window.onload = () => {
    // ...

    /* 处理 Vital Sign Camera 事件 */
    cam.onVideoFrameProcessed = (event: VideoFrameProcessedEvent) => {
        /* 如果 Vital Sign Camera 未处于 Idle 阶段，则停用相机选择器 */
        disableCameraPickerIfScanning(cameraPicker, event);
    }
}

function disableCameraPickerIfScanning(cameraPicker: HTMLSelectElement, event: VideoFrameProcessedEvent) {
    event.healthResult?.stage !== GetHealthStage.Idle ?
        cameraPicker.setAttribute('disabled', '') :
        cameraPicker.removeAttribute('disabled');
}
js
/* 更新 onload 事件处理函数 */
window.onload = () => {
    // ...

    /* 处理 Vital Sign Camera 事件 */
    cam.onVideoFrameProcessed = (event) => {
        /* 如果 Vital Sign Camera 未处于 Idle 阶段，则停用相机选择器 */
        disableCameraPickerIfScanning(cameraPicker, event);
    }
}

function disableCameraPickerIfScanning(cameraPicker, event) {
    event.healthResult?.stage !== GetHealthStage.Idle ?
        cameraPicker.setAttribute('disabled', '') :
        cameraPicker.removeAttribute('disabled');
}

onVideoFrameProcessed 回呼函数以每秒 30Hz 的频率提供处理结果（此频率取决于相机的帧速率）。在 整合 Vitals™ 健康测评（VHA） 流程的后续步骤中，我们将使用它来取得扫描状态、健康测评结果等。

版权所有 © 2021-至今 PanopticAl Ltd. 保留所有权利。