Vitals™ SDK Documentation

Appearance

Select a Camera Device ​

Vitals™ is camera-agnostic, designed to work seamlessly with the built-in RGB cameras found in most smartphones, tablets, laptops, and kiosks with plugin cameras that meet minimum parameter requirements.

Vitals™ SDK offers easy to use API for configuring which camera device to use, you can flexibly select different camera devices for your intended use cases.

Target SDK ​

JavaScript
React
Vue
Flutter
ReactNative
Android
iOS

TIP

You can refer to the sample code and the API Reference for more details. Most related API(s) include: VitalSignCameraInterface, CameraDevicesUpdatedEvent, and CameraDevice.

Get Available Camera Devices ​

You can get the list of all available camera devices by setting up the onCameraDevicesUpdated listener of the Vital Sign Camera component. The listener provides you the CameraDevicesUpdatedEvent object, where it has a list of CameraDevice available.

typescript
/* Update the onload event handler function */
window.onload = () => {
    /* A reference of the camera that should have been created already. */
    const cam = createVitalSignCamera({ isActive: true, config });
    
    /* Add this to get the list of all available camera devices once it is updated */
    cam.onCameraDevicesUpdated = (event: CameraDevicesUpdatedEvent) => {
        /* Log the list of available camera devices to console */
        event.devices.map(device => {
            console.log(`Device ID = ${device.id}, Device Label = ${device.label}`);
        })
    };
}
js
/* Update the onload event handler function */
window.onload = () => {
    /* A reference of the camera that should have been created already. */
    const cam = createVitalSignCamera({ isActive: true, config });
    
    /* Add this to get the list of all available camera devices once it is updated */
    cam.onCameraDevicesUpdated = (event) => {
        /* Log the list of available camera devices to console */
        event.devices.map(device => {
            console.log(`Device ID = ${device.id}, Device Label = ${device.label}`);
        })
    };
}

Select a Camera Device ​

WARNING

You should avoid changing the camera device during the 30-second Vitals™ scan.

You can specify a camera device by setting the device property of the Vital Sign Camera component using the ID retrieved from the CameraDevice available in the CameraDevicesUpdatedEvent API.

typescript
/* Update the onload event handler function */
window.onload = () => {
    /* A reference of the camera that should have been created already. */
    const cam = createVitalSignCamera({ isActive: true, config });
    /* Select a camera device with the device ID */
    cam.device = mDeviceId;
}
js
/* Update the onload event handler function */
window.onload = () => {
    /* A reference of the camera that should have been created already. */
    const cam = createVitalSignCamera({ isActive: true, config });
    /* Select a camera device with the device ID */
    cam.device = mDeviceId;
}

TIP

Please replace mDeviceId to your desired camera device's ID. You can obtain the device ID from the onCameraDevicesUpdate handler as described above.

Example with Camera Picker ​

In this example, we demonstrate how to prepare a camera picker for selecting a camera device.

First, in your HTML file, add the camera picker:

html
<!-- Vital Sign Camera Picker -->
<select id="cameraPicker" disabled>
    <option value="loading">Loading...</option>
</select>

In your TypeScript or JavaScript file, setup the onCameraDevicesUpdated listener of the Vital Sign Camera component to get the information of all available camera devices. You can use this information to construct the camera picker in your app.

typescript
/* Update the onload event handler function */
window.onload = () => {
    // ...

    /* Setup the camera picker element with the list of available camera devices */
    const cameraPicker : HTMLSelectElement = document.querySelector("#cameraPicker")!;
    setupCameraPicker(cameraPicker, cam);
}

async function setupCameraPicker(cameraPicker: HTMLSelectElement, camera: VitalSignCameraInterface) {
    /* Listens camera devices event and update the camera list */
    camera.onCameraDevicesUpdated = (event: CameraDevicesUpdatedEvent) => {
        /* Generate the list of available camera devices on 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');

        /* Only enable the camera picker when there are more than 1 camera device */
        if (event.devices.length > 1) {
            cameraPicker.removeAttribute('disabled');
        }
    };
}
js
/* Update the onload event handler function */
window.onload = () => {
    // ...

    /* Setup the camera picker element with the list of available camera devices */
    const cameraPicker = document.querySelector("#cameraPicker");
    setupCameraPicker(cameraPicker, cam);
}

async function setupCameraPicker(cameraPicker, camera) {
    /* Listens camera devices event and update the camera list */
    camera.onCameraDevicesUpdated = (event) => {
        /* Generate the list of available camera devices on 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');

        /* Only enable the camera picker when there are more than 1 camera device */
        if (event.devices.length > 1) {
            cameraPicker.removeAttribute('disabled');
        }
    };
}

Listen to the camera picking event, and set the device property of the Vital Sign Camera component to use a specific camera device:

typescript
/* Update the onload event handler function */
window.onload = () => {
    // ...

    /* Listen to camera picking events, and set the Vital Sign Camera to use a specific camera device */
    cameraPicker.addEventListener('change', () => {
        cam.device = cameraPicker.value;
    })
}
js
/* Update the onload event handler function */
window.onload = () => {
    // ...

    /* Listen to camera picking events, and set the Vital Sign Camera to use a specific camera device */
    cameraPicker.addEventListener('change', () => {
        cam.device = cameraPicker.value;
    })
}

To avoid users selecting a different camera device during the Vitals™ Scan, disable the camera picker when Vital Sign Camera is not in the Idle stage. You can check the Vital Sign Camera state using the onVideoFrameProcessed callback, and disable the camera picker during the Idle stage, for example:

typescript
/* Update the onload event handler function */
window.onload = () => {
    // ...

    /* Handles the Vital Sign Camera events */
    cam.onVideoFrameProcessed = (event: VideoFrameProcessedEvent) => {
        /* Disable camera picker if Vital Sign Camera is not in Idle stage */
        disableCameraPickerIfScanning(cameraPicker, event);
    }
}

function disableCameraPickerIfScanning(cameraPicker: HTMLSelectElement, event: VideoFrameProcessedEvent) {
    event.healthResult?.stage !== GetHealthStage.Idle ?
        cameraPicker.setAttribute('disabled', '') :
        cameraPicker.removeAttribute('disabled');
}
js
/* Update the onload event handler function */
window.onload = () => {
    // ...

    /* Handles the Vital Sign Camera events */
    cam.onVideoFrameProcessed = (event) => {
        /* Disable camera picker if Vital Sign Camera is not in Idle stage */
        disableCameraPickerIfScanning(cameraPicker, event);
    }
}

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

The onVideoFrameProcessed callback function delivers processing results at a rate of 30Hz per second (The rate depends on the frame rate of the camera). In later steps of the Integrating Vitals™ Health Assessment process, we will use it to get the scan conditions, health results, and more.

Copyright © 2021-present PanopticAl Ltd. All Rights Reserved.