Confirm All Conditions Passed

To ensure measurement accuracies, it is important to ensure all scan conditions are passed before initiating a scan. For example, if we have a start button, we should enable the start button only if all the scan conditions return true (i.e., all the conditions check passed).

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: VideoFrameProcessedEvent and ScanConditions.

First, add a start button in the HTML file, disable it by default:

HTML

<!-- Start Button -->
<button id="startButton" disabled>Start Scanning</button>

Enable and disable the start button based on the conditions check result:

TypeScript

/* Update the onload event handler function */
window.onload = () => {
    /* A reference of the camera that should have been created in the "Camera Setup" step. */
    const cam = createVitalSignCamera({ isActive: true, config, userInfo })

    /* Get the references of the start button HTML element */
    const startButton = document.querySelector('#startButton')!;
    
    // ...

    /* Update the onVideoFrameProcessed callback function */
    cam.onVideoFrameProcessed = (event: VideoFrameProcessedEvent) => {
        // ...
        
        /* A reference of the conditions check result which you should have it already for visualizing the results on your UI */
        const conditions = event.scanConditions;

        /* Enable the start button if all conditions are fulfilled, else disable it */
        const allConditionsPassed = allConditionsCheckPassed(conditions);
        allConditionsPassed ? startButton.removeAttribute('disabled') : startButton.setAttribute('disabled', '');
    }
}

function allConditionsCheckPassed(conditions: ScanConditions | undefined) {
    if (conditions === undefined)
        return false;
    if (!conditions.centered)
        return false;
    if (!conditions.distance)
        return false;
    if (!conditions.lighting)
        return false;
    if (!conditions.movement)
        return false;
    if (!conditions.frameRate)
        return false;
    if (!conditions.serverReady)
        return false;
    return true;
}

JavaScript

/* Update the onload event handler function */
window.onload = () => {
    /* A reference of the camera that should have been created in the "Camera Setup" step. */
    const cam = createVitalSignCamera({ isActive: true, config, userInfo })

    /* Get the references of the start button HTML element */
    const startButton = document.querySelector('#startButton');
    
    // ...

    /* Update the onVideoFrameProcessed callback function */
    cam.onVideoFrameProcessed = (event) => {
        // ...

        /* A reference of the conditions check result which you should have it already for visualizing the results on your UI */
        const conditions = event.scanConditions;

        /* Enable the start button if all conditions are fulfilled, else disable it */
        const allConditionsPassed = allConditionsCheckPassed(conditions);
        allConditionsPassed ? startButton.removeAttribute('disabled') : startButton.setAttribute('disabled', '');
    }
}

function allConditionsCheckPassed(conditions) {
    if (conditions === undefined)
        return false;
    if (!conditions.centered)
        return false;
    if (!conditions.distance)
        return false;
    if (!conditions.lighting)
        return false;
    if (!conditions.movement)
        return false;
    if (!conditions.frameRate)
        return false;
    if (!conditions.serverReady)
        return false;
    return true;
}