Demystifying Huawei ML Kit — Face Detection with React Native (Cross Platform)
Huawei ML Kit is one of the most reliable framework which offers Face Detection API’s for the Mobile applications.
Overview
Face Detection is one of the used and popular framework of Machine Learning in many different user applications such as Camera apps, Verification Apps, surveillance and security apps.
But it is often underrated due to the complexity it brings for many researchers and Machine Learning experts.
This technology has engraved its path on the mobile devices as well where many researchers’ just focuses on the performance of Face Detection results only on the small hand held devices.
Face Detections works with Detection and Estimation algorithms to get us the approximate results.
Huawei ML Kit is one of the most reliable framework which offers Face Detection API’s for the Mobile applications.
Huawei ML Kit-Face Detection works in a below fashion to detect the Human face.
Huawei ML Kit — Face Detection detects few key points on the face and measure the results accordingly.
Supported key points are as follows:
0: centre of the right eye.
1: centre of the left eye.
2: nose tip.
3: right mouth corner where the lips meet.
4: left mouth corner where the lips meet.
Development Overview
We will be focusing on simple Object Detection service for an object using Huawei Object Detection API’s.
Prerequisite
1. Must have a Huawei Developer Account
2. Must have a Huawei phone with HMS 4.0.0.300 or later
3. React Native environment with Android Studio, Node Js and Visual Studio code.
Major Dependencies
1. React Native CLI : 2.0.1
2. Gradle Version: 6.0.1
3. Gradle Plugin Version: 4.0.1
4. React Native ML Kit SDK : 5.0.0
5. react-native-hms-ml kit gradle dependency
6. AGCP gradle dependency
Software Requirements
1. Java SDK 1.8 or later
2. Android 5.0 or later
Preparation
1. Create a react native project using React Native CLI and open android directory.
2. Download the React Native ML Kit SDK and paste it under Node modules directory of React Native project.
3. Create an app and project in the Huawei AppGallery Connect.
4. Provide the SHA Key and App Package name of the project.
5. Enable the ML API and download the agconnect-services.json file and paste to the app folder of your android folder.
Integration
· Add below to build.gradle (project) file, under buildscript/repositories and allprojects/repositories.
Maven {url ‘http://developer.huawei.com/repo/'}
· Add below to build.gradle (app) file, under dependencies to use the ML kit SDK in your React Native application.
dependencies{
// Import the SDK.
implementation project(“:react-native-hms-ml “)
…
…
implementation ‘com.huawei.agconnect:agconnect-core:1.2.1.301’
}
· Add below under settings.gradle file
include ‘:react-native-hms-ml
project(‘:react-native-hms-ml).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-hms-ml /android’)
· Add below under MainApplication,java file.
· Add below under AndroidManifest.xml file
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.CAMERA” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” />
<application
<meta-data android:name="com.huawei.hms.ml.DEPENDENCY" android:value="face"/>
</application>
Use case
Huawei ML kit’s Face Detection API can be integrated for many different applications and use cases ranging from Beauty apps to security and surveillance applications.
As of now ML Kit’s React Native API’s support Face detection using a gallery image and this article demonstrate and feature the same capability.
Face Detection from Static Images
face.js
face.js file is a JavaScript file responsible for creating and processing the analyzer for the face detection.
1. Creating Analyzer
Analyzer can be created with some optional settings parameters as below
2. Set the frame instance using HmsFrame module. Uri parameter is required.
uri (String): Image uri.
3. Analyze operation is available to create and start the analyzer.
4. Stop Analyzer
After analyze operation complete stop call is available to stop analyzer.
5. Image Picker
Function to choose image for object detection.
Results
Tips and Tricks
1. Face Detection provides asynchronous and synchronous functions.
2. These functions provides 3D and 2D face detection.
3. Images in PNG, JPG, JPEG, and BMP formats are supported. GIF images are not supported.
Conclusion
This article explains the integration of hms-ml -react-native API’s.
It demonstrate how to detect the Human face which is done using different analyzing and detection algorithms on the device and also shows the integration of the service on a mobile application.
References
