04-HarmonyOS5-FaceDetector-Case

Case Description

This is a face recognition case implemented based on AI basic vision services. After selecting an image from the device's photo album, it detects the face information in the image and displays the structured recognition results.

Implementation Steps:

1. Module Import

// Import functional modules
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo } from '@kit.CoreFileKit';
import { image } from '@kit.ImageKit';
import { faceDetector } from '@kit.CoreVisionKit';
import { promptAction } from '@kit.ArkUI';
import { JSON } from '@kit.ArkTS';

2. Photo Album Selection Function

// Create a photo album picker instance
const photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
// Set selection parameters
const photoResult = await photoPicker.select({
  MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
  maxSelectNumber: 1
})
// Get the URI of the selected image
const photoUri = photoResult.photoUris[0]

3. Image Processing Flow

// Open the image file handle
const fileSource = await fileIo.open(photoUri, fileIo.OpenMode.READ_ONLY);
// Create an image data source
const imageSource = image.createImageSource(fileSource.fd);
// Generate pixel map format data
const chooseImage = await imageSource.createPixelMap();

4. Core Implementation of Face Detection

// Initialize the face detector
faceDetector.init();
// Configure visual recognition parameters
const visionInfo: faceDetector.VisionInfo = {
  pixelMap: chooseImage
};
// Execute face detection
const visionResult = await faceDetector.detect(visionInfo)
// Check if the image contains faces
this.isFace = visionResult.length > 0

5. Display of Detection Results

// Show the structured detection results in a pop-up window
promptAction.showDialog({
  message: JSON.stringify(visionResult)
})

Implementation Code:

1. UI Component Definition

@Entry
@ComponentV2
struct FaceDetector {
  @Local isFace: boolean = false

2. Main Function Method

async checkFace() {
  // Integrate the complete logic of photo album selection, image processing, and face detection
}

3. Interface Construction

build() {
  Column() {
    Button('Select from Album and Perform Face Recognition')
      .onClick(() => {
        this.checkFace()
      })
  }
  .height('100%')
  .width('100%')
}

Summary:

Key Points

1. Accessing the photo album requires user authorization.
2. Image processing needs to be completed through the collaboration of MediaLibraryKit and ImageKit.
3. The detection results include structured data such as face positions and feature points.

Complete Code

import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo } from '@kit.CoreFileKit';
import { image } from '@kit.ImageKit';
import { faceDetector } from '@kit.CoreVisionKit';
import { promptAction } from '@kit.ArkUI';
import { JSON } from '@kit.ArkTS';

@Entry
@ComponentV2
struct FaceDetector {
  @Local isFace: boolean = false

  async checkFace() {
    const photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();
    const photoResult = await photoPicker.select({
      MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
      maxSelectNumber: 1
    })
    const photoUri = photoResult.photoUris[0]

    const fileSource = await fileIo.open(photoUri, fileIo.OpenMode.READ_ONLY);
    const imageSource = image.createImageSource(fileSource.fd);
    const chooseImage = await imageSource.createPixelMap();

    faceDetector.init();
    const visionInfo: faceDetector.VisionInfo = {
      pixelMap: chooseImage
    };
    const visionResult = await faceDetector.detect(visionInfo)
    this.isFace = visionResult.length > 0

    promptAction.showDialog({
      message: JSON.stringify(visionResult)
    })
  }

  build() {
    Column() {
      Button('Select from Album and Perform Face Recognition')
        .onClick(() => {
          this.checkFace()
        })
    }
    .height('100%')
    .width('100%')
  }
}