Flutter人脸活体检测插件biopassid_face_liveness_sdk的使用

BioPass ID Face Liveness SDK Flutter

快速开始指南 • 前提条件 • 安装 • 如何使用 • 许可证密钥 • 获取人脸捕获 • FaceLivenessConfig • 更改字体家族 • 更改图标 • 其他 • 更新日志 • 支持

快速开始指南

首先，您需要一个许可证密钥才能使用biopassid_face_liveness_sdk。要获取您的许可证密钥，请通过我们的网站 BioPass ID 联系我们。

检查我们的 官方文档 以获取更多有关BioPass ID的信息。

前提条件

- 一个带有摄像头的设备
- 许可证密钥
- 需要互联网连接来验证许可证

安装

首先，在您的 pubspec.yaml 文件中添加 biopassid_face_liveness_sdk 作为依赖项。

Android

在您的 android/app/build.gradle 文件中将最低 Android SDK 版本更改为 24（或更高）。

minSdkVersion 24

iOS

需要 iOS 15.0 或更高版本。

在 ios/Info.plist 中添加以下内容：

<key>NSCameraUsageDescription</key>
<string>Your camera usage description</string>

然后进入项目 ios 文件夹并运行 pod install。

# 进入 ios 文件夹
$ cd ios

# 安装依赖项
$ pod install

隐私清单文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>NSPrivacyCollectedDataTypes</key>
	<array>
		<dict>
			<key>NSPrivacyCollectedDataType</key>
			<string>NSPrivacyCollectedDataTypeOtherUserContent</string>
			<key>NSPrivacyCollectedDataTypeLinked</key>
			<false/>
			<key>NSPrivacyCollectedDataTypeTracking</key>
			<false/>
			<key>NSPrivacyCollectedDataTypePurposes</key>
			<array>
				<string>NSPrivacyCollectedDataTypePurposeAppFunctionality</string>
			</array>
		</dict>
		<dict>
			<key>NSPrivacyCollectedDataType</key>
			<string>NSPrivacyCollectedDataTypeDeviceID</string>
			<key>NSPrivacyCollectedDataTypeLinked</key>
			<false/>
			<key>NSPrivacyCollectedDataTypeTracking</key>
			<false/>
			<key>NSPrivacyCollectedDataTypePurposes</key>
			<array>
				<string>NSPrivacyCollectedDataTypePurposeAppFunctionality</string>
			</array>
		</dict>
	</array>
	<key>NSPrivacyTracking</key>
	<false/>
	<key>NSPrivacyAccessedAPITypes</key>
	<array>
		<dict>
			<key>NSPrivacyAccessedAPITypeReasons</key>
			<array>
				<string>CA92.1</string>
			</array>
			<key>NSPrivacyAccessedAPIType</key>
			<string>NSPrivacyAccessedAPICategoryUserDefaults</string>
		</dict>
	</array>
</dict>
</plist>

如何使用

基本示例

要在您的 Flutter 项目中调用 Face Liveness，只需按如下步骤操作：

import 'package:biopassid_face_liveness_sdk/biopassid_face_liveness_sdk.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Face Liveness Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FaceLivenessController controller;

  @override
  void initState() {
    super.initState();
    final config = FaceLivenessConfig(licenseKey: 'your-license-key');
    controller = FaceLivenessController(
      config: config,
      onFaceCapture: (image, faceAttributes) {
        print('onFaceCapture: ${image.first}');
        print('onFaceCapture: $faceAttributes');
      },
      onFaceDetected: (faceAttributes) {
        print('onFaceDetected: $faceAttributes');
      },
      debug: false,
    );
  }

  void takeFace() async {
    await controller.takeFace();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Face Liveness Demo')),
      body: Center(
        child: ElevatedButton(
          onPressed: takeFace,
          child: const Text('Capture Face'),
        ),
      ),
    );
  }
}

使用 http 包调用 BioPass ID API 的示例

在这个示例中，我们使用了 Liveness 来自 Multibiometrics 计划。

首先，添加 http 包。在 pubspec.yaml 文件的依赖部分添加它。您可以在 pub.dev 上找到最新版本的 http 包。

dependencies:
  http: <latest_version>

此外，在您的 AndroidManifest.xml 文件中添加互联网权限。

<!-- Required to fetch data from the internet. -->
<uses-permission android:name="android.permission.INTERNET" />

在这里，您需要一个 API 密钥才能向 BioPass ID API 发送请求。要获取您的 API 密钥，请通过我们的网站 BioPass ID 联系我们。

import 'dart:convert';

import 'package:biopassid_face_liveness_sdk/biopassid_face_liveness_sdk.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Face Liveness Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FaceLivenessController controller;

  @override
  void initState() {
    super.initState();
    final config = FaceLivenessConfig(licenseKey: 'your-license-key');
    controller = FaceLivenessController(
      config: config,
      onFaceCapture: (image, faceAttributes) async {
        // 编码图像为 base64 字符串
        final imageBase64 = base64Encode(image);

        // 创建 URL
        final url = Uri.https('api.biopassid.com', 'multibiometrics/v2/liveness');

        // 创建包含 API 密钥的头部
        final headers = {
          'Content-Type': 'application/json',
          'Ocp-Apim-Subscription-Key': 'your-api-key'
        };

        // 创建 JSON 请求体
        final body = json.encode({
          'Spoof': {'Image': imageBase64}
        });

        // 执行向 BioPass ID API 的请求
        final response = await http.post(
          url,
          headers: headers,
          body: body,
        );

        // 处理 API 响应
        print('Response status: ${response.statusCode}');
        print('Response body: ${response.body}');
      },
      onFaceDetected: (faceAttributes) {
        print('onFaceDetected: $faceAttributes');
      },
      debug: false,
    );
  }

  void takeFace() async {
    await controller.takeFace();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Face Liveness Demo')),
      body: Center(
        child: ElevatedButton(
          onPressed: takeFace,
          child: const Text('Capture Face'),
        ),
      ),
    );
  }
}

许可证密钥

首先，您需要一个许可证密钥才能使用 biopassid_face_liveness_sdk。要获取您的许可证密钥，请通过我们的网站 BioPass ID 联系我们。

要使用 biopassid_face_liveness_sdk，您需要一个许可证密钥。设置所需的许可证密钥非常简单，只需设置另一个属性即可。只需这样做：

final config = FaceLivenessConfig(licenseKey: 'your-license-key');

获取人脸捕获

您可以传递一个回调函数来接收捕获的图像。您可以按照此示例编写自己的回调：

final config = FaceLivenessConfig(licenseKey: 'your-license-key');
final controller = FaceLivenessController(
    config: config,
    onFaceCapture: (image, faceAttributes) {
      print('onFaceCapture: ${image.first}');
      print('onFaceCapture: $faceAttributes');
    },
    onFaceDetected: (faceAttributes) {
      print('onFaceDetected: $faceAttributes');
    },
    debug: false,
);
await controller.takeFace();

LivenessFaceAttributes

FaceLivenessConfig

您还可以在应用程序中使用预构建的配置，以便您可以自动开始使用多个更适合您的应用的服务和功能。您可以实例化每个配置并使用其默认属性，或者如果您愿意，可以更改所有可用的配置。目前支持的类型有：

FaceLivenessConfig

默认配置：

final defaultConfig = FaceLivenessConfig(
  licenseKey: '',
  resolutionPreset: FaceLivenessResolutionPreset.veryHigh,
  fontFamily: 'facelivenesssdk_ic_close',
  faceDetection: FaceLivenessDetectionOptions(
    timeToCapture: 3000,
    maxFaceDetectionTime: 60000,
    minFaceProp: 0.1,
    maxFaceProp: 0.4,
    minFaceWidth: 150,
    minFaceHeight: 150,
    ied: 90,
    bboxPad: 20,
    faceDetectionThresh: 0.5,
    rollThresh: 4.0,
    pitchThresh: 4.0,
    yawThresh: 4.0,
    closedEyesThresh: 0.7, // Android only
    smilingThresh: 0.7, // Android only
    tooDarkThresh: 50,
    tooLightThresh: 170,
    faceCentralizationThresh: 0.05,
  ),
  mask: FaceLivenessMaskOptions(
    enabled: true,
    backgroundColor: const Color(0xCC000000),
    frameColor: const Color(0xFFFFFFFF),
    frameEnabledColor: const Color(0xFF16AC81),
    frameErrorColor: const Color(0xFFE25353),
  ),
  titleText: FaceLivenessTextOptions(
    enabled: true,
    content: 'Capturing Face',
    textColor: const Color(0xFFFFFFFF),
    textSize: 20,
  ),
  loadingText: FaceLivenessTextOptions(
    enabled: true,
    content: 'Processing...',
    textColor: const Color(0xFFFFFFFF),
    textSize: 14,
  ),
  helpText: FaceLivenessTextOptions(
    enabled: true,
    content: 'Fit your face into the shape below',
    textColor: const Color(0xFFFFFFFF),
    textSize: 14,
  ),
  feedbackText: FaceLivenessFeedbackTextOptions(
    enabled: true,
    messages: FaceLivenessFeedbackTextMessages(
      noDetection: 'No faces detected',
      multipleFaces: 'Multiple faces detected',
      faceCentered: 'Face centered. Do not move',
      tooClose: 'Turn your face away',
      tooFar: 'Bring your face closer',
      tooLeft: 'Move your face to the right',
      tooRight: 'Move your face to the left',
      tooUp: 'Move your face down',
      tooDown: 'Move your face up',
      invalidIED: 'Invalid inter-eye distance',
      faceAngleMisaligned: 'Misaligned face angle',
      closedEyes: 'Open your eyes', // Android only
      smiling: 'Do not smile', // Android only
      tooDark: 'Too dark',
      tooLight: 'Too light',
    ),
    textColor: const Color(0xFFFFFFFF),
    textSize: 14,
  ),
  backButton: FaceLivenessButtonOptions(
    enabled: true,
    backgroundColor: const Color(0x00000000),
    buttonPadding: 0,
    buttonSize: const Size(56, 56),
    iconOptions: FaceLivenessIconOptions(
      enabled: true,
      iconFile: 'facelivenesssdk_ic_close',
      iconColor: const Color(0xFFFFFFFF),
      iconSize: const Size(32, 32),
    ),
    labelOptions: FaceLivenessTextOptions(
      enabled: false,
      content: 'Back',
      textColor: const Color(0xFFFFFFFF),
      textSize: 14,
    ),
  ),
);

FaceLivenessDetectionOptions

FaceLivenessMaskOptions

FaceLivenessFeedbackTextOptions

FaceLivenessFeedbackTextMessages

FaceLivenessButtonOptions

FaceLivenessIconOptions

FaceLivenessTextOptions

FaceLivenessResolutionPreset (枚举)

如何更改字体家族

在 Android 端

您可以使用默认字体家族或设置自己的字体家族。要设置字体家族，请在 android/app/src/main/res 目录下创建一个名为 font 的文件夹。下载您想要的字体，并将其粘贴到字体文件夹中。所有字体文件名必须仅包含：小写 a-z、0-9 或下划线。结构应该类似于下面的样子。

在 iOS 端

要将字体文件添加到您的 Xcode 项目中：

1. 在 Xcode 中，选择项目导航器。
2. 从 Finder 窗口中拖动您的字体到您的项目中。这会将字体复制到您的项目中。
3. 选择字体或包含字体的文件夹，并确认文件显示它们的目标成员资格已选中您的应用程序的目标。

然后，将 “Fonts provided by application” 键添加到您的应用程序的 Info.plist 文件中。对于键的值，提供一个包含任何添加字体文件相对路径的字符串数组。

在下面的示例中，字体文件位于 fonts 目录中，因此您在 Info.plist 文件中使用 fonts/roboto_mono_bold_italic.ttf 作为字符串值。

在 Dart 端

最后，只需在初始化 FaceLivenessConfig 时传递字体文件名即可。

final config = FaceLivenessConfig(
  licenseKey: 'your-license-key',
  fontFamily: 'roboto_mono_bold_italic',
);

如何更改图标

在 Android 端

您可以使用默认图标或定义自己的图标。要设置图标，下载您想要的图标并将其粘贴到 android/app/src/main/res 下的 drawable 文件夹中。所有图标文件名必须仅包含：小写 a-z、0-9 或下划线。结构应该类似于下面的样子。

在 iOS 端

要将图标文件添加到您的 Xcode 项目中：

1. 在项目导航器中，选择一个资产目录：一个扩展名为 .xcassets 的文件。
2. 将图像从 Finder 拖放到轮廓视图中。一个新的图像集出现在轮廓视图中，而图像资产出现在详细区域中的一个框中。

在 Dart 端

最后，只需在初始化 FaceLivenessConfig 时传递图标文件名即可。

final config = FaceLivenessConfig(licenseKey: 'your-license-key');
// 更改后退按钮图标
config.backButton.iconOptions.iconFile = 'ic_baseline_camera';