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. 保留所有權利。