人脸侦测UI

目标 SDK

JavaScript

React

Vue

Flutter

ReactNative

Android

iOS

TIP 提示

您可以参考 示例程式码 和 API 参考 以了解更多详情。最相关的 API 包括：VitalSignCameraCreationProps 和 VisualizationOptions。

绘制人脸边界框

大多数扫描条件都会因未侦测到人脸而失败。您可以将人脸边界框视觉化，让用户了解自己的人脸是否被侦测到。

JavaScript SDK 提供了内建的人脸边界框 UI。开发者还可以自订设计，例如线宽、颜色等。

例如，绘制一个红色的人脸边界框：

TypeScript

/* 视觉化选项 */
const visualizationOptions : VisualizationOptions = {
    boundingBox: {
        color: "red",
        enabled: true
    }
}

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

    /* 更新此行以提供边界框的可视化配置 */
    const cam = createVitalSignCamera({ isActive: true, config, userInfo, visualizationOptions });
}

JavaScript

/* 视觉化选项 */
const visualizationOptions = {
    boundingBox: {
        color: "red",
        enabled: true
    }
}

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

    /* 更新此行以提供边界框的可视化配置 */
    const cam = createVitalSignCamera({ isActive: true, config, userInfo, visualizationOptions });
}

绘制人脸网格

大多数扫描条件都会因未侦测到人脸而失败。除了人脸边界框外，您还可以将人脸网格视觉化，让用户知道他们的人脸是否被侦测到。

JavaScript SDK 提供了内建的人脸网格 UI。它还允许开发者自订设计，例如线宽、颜色等。

要绘制线宽 = 1 的非动画灰色人脸网格：

TypeScript

/* 视觉化选项 */
const visualizationOptions : VisualizationOptions = {
    faceMesh: {
        animate: false,
        color: "grey",
        enabled: true,
        lineWidth: 1
    }
}

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

    /* 更新此行以提供人脸网格的可视化配置 */
    const cam = createVitalSignCamera({ isActive: true, config, userInfo, visualizationOptions });
}

JavaScript

/* 视觉化选项 */
const visualizationOptions = {
    faceMesh: {
        animate: false,
        color: "grey",
        enabled: true,
        lineWidth: 1
    }
}

/* 更新 onload 事件处理函数 */
window.onload = () => {
    // ...
    
    /* 更新此行以提供人脸网格的可视化配置 */
    const cam = createVitalSignCamera({ isActive: true, config, userInfo, visualizationOptions });
}

您也可以同时显示边界框和人脸网格。