Face Detection UI

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: VitalSignCameraCreationProps and VisualizationOptions.

Draw a Face Bounding Box

Most scan conditions will fail without the face detected. You can visualize the face bounding box to let the users know whether their face is being detected or not.

The JavaScript SDK provides built-in face bounding box UI. It also allows developers to customize the design, e.g., line width, color, etc.

For example to draw a face bounding box red in color:

TypeScript

/* Visualization Options */
const visualizationOptions : VisualizationOptions = {
    boundingBox: {
        color: "red",
        enabled: true
    }
}

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

    /* Update this line to provide the visualization config of the bounding box */
    const cam = createVitalSignCamera({ isActive: true, config, userInfo, visualizationOptions });
}

JavaScript

/* Visualization Options */
const visualizationOptions = {
    boundingBox: {
        color: "red",
        enabled: true
    }
}

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

    /* Update this line to provide the visualization config of the bounding box */
    const cam = createVitalSignCamera({ isActive: true, config, userInfo, visualizationOptions });
}

Draw a Face Mesh

Most scan conditions will fail without the face detected. Apart from the face bounding box, you can visualize the face mesh to let user know whether their face is being detected or not.

The JavaScript SDK provides built-in face mesh UI. It also allows developers to customize the design, e.g., line width, color, etc.

To draw a non-animated face mesh in grey color with line width = 1:

TypeScript

/* Visualization Options */
const visualizationOptions : VisualizationOptions = {
    faceMesh: {
        animate: false,
        color: "grey",
        enabled: true,
        lineWidth: 1
    }
}

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

    /* Update this line to provide the visualization config of the face mesh */
    const cam = createVitalSignCamera({ isActive: true, config, userInfo, visualizationOptions });
}

JavaScript

/* Visualization Options */
const visualizationOptions = {
    faceMesh: {
        animate: false,
        color: "grey",
        enabled: true,
        lineWidth: 1
    }
}

/* Update the onload event handler function */
window.onload = () => {
    // ...
    
    /* Update this line to provide the visualization config of the face mesh */
    const cam = createVitalSignCamera({ isActive: true, config, userInfo, visualizationOptions });
}

You can have both the bounding box and the face mesh displaying together too.