@bperel/face-mesh-detection

Unofficial Capacitor plugin for ML Kit Face Mesh Detection.[^1]

Installation

npm install @bperel/face-mesh-detection
npx cap sync

Android

Variables

This plugin will use the following project variables (defined in your app’s variables.gradle file):

• $mlkitFaceMeshDetectionVersion version of com.google.mlkit:face-mesh-detection (default: 16.0.0-beta1)

Configuration

No configuration required for this plugin.

Demo

A working example can be found here: robingenz/capacitor-mlkit-plugin-demo

Usage

import { FaceMeshDetection, UseCase } from '@bperel/face-mesh-detection';

const processImage = async () => {
  const { faceMeshs } = await FaceMeshDetection.processImage({
    path: 'path/to/image.jpg',
    useCase: UseCase.FaceMesh,
  });
  return faceMeshs;
};

API

• processImage(...)
• Interfaces
• Enums

processImage(...)

processImage(options: ProcessImageOptions) => Promise<ProcessImageResult>

Detects face mesh from the supplied image.

Only available on Android.

| Param | Type | | ------------- | ------------------------------------------------------------------- | | options | ProcessImageOptions |

Returns: Promise<ProcessImageResult>

Since: 5.3.0

Interfaces

ProcessImageResult

| Prop | Type | Description | Since | | --------------- | ----------------------- | ------------------------ | ----- | | faceMeshs | FaceMesh[] | The detected face meshs. | 5.3.0 |

FaceMesh

Represents a face mesh detected by FaceMeshDetector.

When BoundingBoxOnly is selected, FaceMesh only contains valid bounding box.

When FaceMesh is selected, FaceMesh also contains a group of 468 3D face mesh points and related triangle information. Each point is represented by FaceMeshPoint describing a specific position in detected face. The triangle information is a group of 3 FaceMeshPoints representing a valid surface on Face (e.g. a valid small surface on nose tip).

| Prop | Type | Description | Since | | -------------------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | | bounds | Rect | Returns the axis-aligned bounding rectangle of the detected face mesh. | 5.3.0 | | contours | Contours | Returns contours with a list of FaceMeshPoint representing the detected face. | 5.3.0 | | faceMeshPoints | FaceMeshPoint[] | Returns a list of FaceMeshPoint representing the whole detected face. | 5.3.0 | | triangles | Triangle[] | Returns a list of Triangle representing logical triangle surfaces of detected face. Each Triangle contains 3 FaceMeshPoint, representing 3 points of the triangle surface. The sequence of the 3 points are constant and always counter clockwise in face mesh. | 5.3.0 |

Rect

Rect holds four integer coordinates for a rectangle.

| Prop | Type | Description | Since | | ------------ | ------------------- | ---------------------------------------------------- | ----- | | left | number | The X coordinate of the left side of the rectangle. | 5.3.0 | | top | number | The Y coordinate of the top of the rectangle. | 5.3.0 | | right | number | The X coordinate of the right side of the rectangle. | 5.3.0 | | bottom | number | The Y coordinate of the bottom of the rectangle. | 5.3.0 |

Contours

Represents contours with their face mesh points.

| Prop | Type | Description | Since | | ------------------------ | ---------------------------- | -------------------------------------------------------- | ----- | | faceOval | FaceMeshPoint[] | Returns all points for the FaceOval contour. | 5.3.0 | | leftEyebrowTop | FaceMeshPoint[] | Returns all points for the LeftEyebrowTop contour. | 5.3.0 | | leftEyebrowBottom | FaceMeshPoint[] | Returns all points for the LeftEyebrowBottom contour. | 5.3.0 | | rightEyebrowTop | FaceMeshPoint[] | Returns all points for the RightEyebrowTop contour. | 5.3.0 | | rightEyebrowBottom | FaceMeshPoint[] | Returns all points for the RightEyebrowBottom contour. | 5.3.0 | | leftEye | FaceMeshPoint[] | Returns all points for the LeftEye contour. | 5.3.0 | | rightEye | FaceMeshPoint[] | Returns all points for the RightEye contour. | 5.3.0 | | upperLipTop | FaceMeshPoint[] | Returns all points for the UpperLipTop contour. | 5.3.0 | | upperLipBottom | FaceMeshPoint[] | Returns all points for the UpperLipBottom contour. | 5.3.0 | | lowerLipTop | FaceMeshPoint[] | Returns all points for the LowerLipTop contour. | 5.3.0 | | lowerLipBottom | FaceMeshPoint[] | Returns all points for the LowerLipBottom contour. | 5.3.0 | | noseBridge | FaceMeshPoint[] | Returns all points for the NoseBridge contour. | 5.3.0 |

FaceMeshPoint

Represents a 3D point in face mesh.

The index is an unique ID meaning a fixed position on face, ranging from 0 to 467.

In Point3D, x and y are pixel location of detected face in InputImage. z is also scaled to image size, while the origin will be somewhere in the center of all 468 face mesh points.

| Prop | Type | Description | Since | | ----------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | | index | number | Gets the index of the face mesh point, ranging from 0 to 467. For each specific point, the index is a constant value. | 5.3.0 | | point | Point3D | Gets a 3D point in face mesh. Inside Point3D, X and Y means a 2D position in original image. More information on the Z value: - The unit of measure for the Z value is the same as X and Y. - The smaller the Z value, the closer that landmark is to the camera. - The Z origin is approximately at the center of all 468 face mesh points. Z value will be negative if the point is close to camera and will be positive if the point is away from the camera. | 5.3.0 |

Point3D

Represents a 3D point.

| Prop | Type | Description | Since | | ------- | ------------------- | --------------------------------- | ----- | | x | number | Returns the X value of the point. | 5.3.0 | | y | number | Returns the Y value of the point. | 5.3.0 | | z | number | Returns the Z value of the point. | 5.3.0 |

Triangle

Represents a triangle with 3 generic points.

| Prop | Type | Description | Since | | ------------ | ---------------------------- | ----------------------------------------------------------------- | ----- | | points | FaceMeshPoint[] | Returns all points inside the Triangle. | 5.3.0 |

ProcessImageOptions

| Prop | Type | Description | Default | Since | | ------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | ----- | | path | string | The local path to the image file. | | 5.3.0 | | useCase | UseCase | Sets the use case. When BoundingBoxOnly is selected, the returned FaceMesh only contains bounding box. When FaceMesh is selected, the returned FaceMesh contains bounding box as well as 468 FaceMeshPoint and triangle information. It detects at most 2 faces in this case and it is slower than BoundingBoxOnly. | UseCase.FaceMesh | 5.3.0 |

Enums

UseCase

| Members | Value | Description | Since | | --------------------- | -------------- | ------------------------------------------------------------------------------------- | ----- | | BoundingBoxOnly | 0 | Return bounding box for detected face. | 5.3.0 | | FaceMesh | 1 | Return face mesh info for detected face. It detects at most 2 faces in this use case. | 5.3.0 |

Terms & Privacy

This plugin uses the Google ML Kit:

• Terms & Privacy
• Android Data Disclosure
• iOS Data Disclosure

Changelog

See CHANGELOG.md.

License

See LICENSE.

[^1]: This project is not affiliated with, endorsed by, sponsored by, or approved by Google LLC or any of their affiliates or subsidiaries.