How to Build A Facial Recognition Mobile App with React Native, Expo, and Kairos
A short introduction and example of building a face-detecting mobile application.
Facial recognition — once the stuff of sci-fi novels — is now a widely used technology. In this post, I will I will show you how to develop a basic face-detecting mobile app with React Native and Expo.
React Native is a fast and easy tool to develop cross-platform mobile apps.
Expo makes React Native development even faster by providing a whole host of out-of-the-box features to get your app up and running quickly.
Lets get started!
Building with React Native? Scaffold and deploy React Native apps with quality-assured templates for free in the Crowdbotics app builder. Check it out.
First, you have to install Expo CLI (preferably as global) in your system. To do this, run the following command in the command prompt at the location where you want to save your project.
( You’ll need to have Node.js (version 6 or newer) installed on your computer to run this command. Download the latest version of Node.js.)
npm install -g expo-cliNow run this next command to start your project. Name it whatever you would like.
expo init <your-project-name>Start coding in your working file. By default it is App.js .
Import the things you want to use in your project.
import { Permissions, Camera, FaceDetector, } from ‘expo’;First, get permission from the use their camera when the app starts.
async componentWillMount() { const { status } =await Permissions.askAsync(Permissions.CAMERA); this.setState({hasCameraPermission:status==='granted'});}
Now, if the user gives permission to use the camera, use the camera component where you want to open the camera.
return (<View style={styles.container}><Camera style={styles.camera} type={'front'} onFacesDetected={this.handleFacesDetected} faceDetectorSettings={{ mode: FaceDetector.Constants.Mode.fast, detectLandmarks: FaceDetector.Constants.Mode.none, runClassifications: FaceDetector.Constants.Mode.none }}></Camera></View>);
If a face is detected, the ‘handleFacesDetected’ function will be triggered.
handleFacesDetected = ({ faces }) => { if(faces.length > 0){ this.setState({ faces }); }};
I am adding ‘ref’ attribute and a button to the camera component so that when we press the button it will send our image to the recognization process to evaluate whether to enroll or to recognize it.
<Camera
style={styles.camera}
type={'front'}
ref={ref => { this.camera = ref; }}
onFacesDetected={this.handleFacesDetected}
faceDetectorSettings={{
mode: FaceDetector.Constants.Mode.fast,
detectLandmarks: FaceDetector.Constants.Mode.none,
runClassifications: FaceDetector.Constants.Mode.none,
}}><TouchableOpacity
style={{
flex: 1,
flexDirection: 'row',
alignSelf: 'flex-end',
alignItems: 'flex-end',
}}
onPress={() => this.snap(false)}>
<Text
style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
{' '}Enroll{' '}
</Text>
</TouchableOpacity><TouchableOpacity
style={{
flex: 1,
flexDirection: 'row',
alignSelf: 'flex-end',
alignItems: 'flex-end',
}}
onPress={() => this.snap(true)}>
<Text
style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>
{' '}Recognize{' '}
</Text>
</TouchableOpacity></Camera></View>);
//where,snap = async (recognize) => {
try {
if (this.camera) {
let photo = await this.camera.takePictureAsync({ base64: true });
if(!faceDetected) {
alert('No face detected!');
return;
}
const userId = makeId();
const { base64 } = photo;
this[recognize ? 'recognize' : 'enroll']({ userId, base64 });
}
} catch (e) {
console.log('error on snap: ', e)
}
};
We are able to detect faces on camera.Our next objective is to recognize the faces.
To achieve this goal we will use Kairos. To use Kairos, you have to visit https://kairos.com and sign up as a developer.
Once you sign up, you will get your App Key and App ID. These are the two things that would make sure that you are able to access the server at Kairos in order to be able to process your images. It is the key to your face being recognized.
Next, configure your app with these credentials
const BASE_URL = 'https://api.kairos.com/';
const HEADERS = {
'Accept': 'application/json',
'Content-Type': 'application/json',
'app_id': '<your-app-id>',
'app_key': '<you-app-key>'
}You can use different APIs by using base URL like this:
(POST) https://api.kairos.com/enroll
(POST) https://api.kairos.com/recognize
(POST) https://api.kairos.com/detect
(POST) https://api.kairos.com/gallery/list_all
etc.
Create your functions by using these APIs.
Examples of the enrolling and recognizing functions are as follows:
//Enroll Method
const enroll = async ({userId, base64}) => {
const rawResponse = await fetch(`${BASE_URL}enroll`, {
method: 'POST',
headers: HEADERS,
body: JSON.stringify({
"image": base64,
"subject_id": `MySocial_${userId}`,
"gallery_name": "MyGallery"
})
}); const content = await rawResponse.json();
return content;
}//Recognize Method
const recognize = async (base64) => {
const rawResponse = await fetch(`${BASE_URL}recognize`, {
method: 'POST',
headers: HEADERS,
body: JSON.stringify({
"image": base64,
"gallery_name": "MyGallery"
})
}); const content = await rawResponse.json();
return content;
}
Where,
- image => Publicly accessible URL, file upload or Base64 encoded photo.
- subject_id => (can be a random) key for your image (defined by you) is used as an identifier for the face.
- gallery_name => is the folder name where your photos will be saved (defined by you) is used to identify the gallery.
A successful response of ‘recognize’ API should be like this:
And, here you go! In ‘images,’ you have candidate lists that include the matching face ids.
This is a brief introduction to face recognition. You can also check Kairos docs for more details.
Thanks for reading! :-)
If you make a cool facial recognition app with React Native, Kairos, or Expo, drop a link in the comments. I’d love to check it out.
Building A Web Or Mobile App?
Crowdbotics is the fastest way to build, launch and scale an application.
Developer? Try out the Crowdbotics App Builder to quickly scaffold and deploy apps with a variety of popular frameworks.
Busy or non-technical? Join hundreds of happy teams building software with Crowdbotics PMs and expert developers. Scope timeline and cost with Crowdbotics Managed App Development for free.
