人臉偵測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 });
}

您也可以同時顯示邊界框和人臉網格。