Note: Some images in this blog post aren’t showing up, we are working on resolving it. You could view the same post with all images on medium here.
https://medium.com/zenofai/face-recognition-app-in-react-native-using-aws-rekognition-c10b188a6413
In this blog we are going to build an app for registering faces and verifying faces using Amazon Rekognition in React Native.
Installing dependencies:
Let’s go to React Native Docs, select React Native CLI Quickstart and select our appropriate Development OS and the Target OS as Android, as we are going to build an android application.
Follow the docs for installing dependencies, after installing create a new React Native Application. Use the command line interface to generate a new React Native project called FaceRegister.
react-native init FaceRegisterPreparing the Android device:
We shall need an Android device to run our React Native Android app. This can be either a physical Android device, or more commonly, we can use an Android Virtual Device (AVD) which allows us to emulate an Android device on our computer (using Android Studio).
Either way, we shall need to prepare the device to run Android apps for development.
If you have a physical Android device, you can use it for development in place of an AVD by connecting it to your computer using a USB cable and following the instructions here.
If you are using a virtual device follow this link. I shall be using physical android device.
Now go to the command line and run react-native run-android inside your React Native app directory:
cd FaceRegister
react-native run-androidIf everything is set up correctly, you should see your new app running in your physical device or Android emulator.
In your system, you should see a folder named FaceRegister created. Now open FaceRegister folder with your favorite code editor and create a file called Register.js. We need an input box for the username or id for referring the image and a placeholder to preview the captured image and a submit button to register.
Open your Register.js file and copy the below code:
import React from 'react';
import { StyleSheet, View, Text, TextInput, Image, ScrollView, TouchableHighlight } from 'react-native';
class LoginScreen extends React.Component {
constructor(props){
super(props);
this.state = {
username : '',
capturedImage : ''
};
}
render() {
return (
<View style={styles.MainContainer}>
<ScrollView>
<Text style= {{ fontSize: 20, color: "#000", textAlign: 'center', marginBottom: 15, marginTop: 10 }}>Register Face</Text>
<TextInput
placeholder="Enter Username"
onChangeText={UserName => this.setState({username: UserName})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
{this.state.capturedImage !== "" && <View style={styles.imageholder} >
<Image source={{uri : this.state.capturedImage}} style={styles.previewImage} />
</View>}
<TouchableHighlight style={[styles.buttonContainer, styles.captureButton]}>
<Text style={styles.buttonText}>Capture Image</Text>
</TouchableHighlight>
<TouchableHighlight style={[styles.buttonContainer, styles.submitButton]}>
<Text style={styles.buttonText}>Submit</Text>
</TouchableHighlight>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
marginTop: 60
},
TextInputStyleClass: {
textAlign: 'center',
marginBottom: 7,
height: 40,
borderWidth: 1,
margin: 10,
borderColor: '#D0D0D0',
borderRadius: 5 ,
},
inputContainer: {
borderBottomColor: '#F5FCFF',
backgroundColor: '#FFFFFF',
borderRadius:30,
borderBottomWidth: 1,
width:300,
height:45,
marginBottom:20,
flexDirection: 'row',
alignItems:'center'
},
buttonContainer: {
height:45,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginBottom:20,
width:"80%",
borderRadius:30,
marginTop: 20,
marginLeft: 5,
},
captureButton: {
backgroundColor: "#337ab7",
width: 350,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10
},
submitButton: {
backgroundColor: "#C0C0C0",
width: 350,
marginTop: 5,
},
imageholder: {
borderWidth: 1,
borderColor: "grey",
backgroundColor: "#eee",
width: "50%",
height: 150,
marginTop: 10,
marginLeft: 90,
flexDirection: 'row',
alignItems:'center'
},
previewImage: {
width: "100%",
height: "100%",
}
});
export default LoginScreen;Now import your Register file in your App.js file which is located in your project root folder. Open your App.js file and replace it with the below code:
import React, {Component} from 'react';
import {View} from 'react-native';
import LoginScreen from './LoginScreen';
class App extends Component {
render() {
return (
<View>
<LoginScreen />
</View>
);
}
}
export default App;Now run your app again. Run below command in the project directory:
react-native run-androidYou can see a Text input for username and two buttons one(Capture image) for capturing an image and another(Submit) for submitting the details as shown below:
Let’s add the functionality to preview the captured image. We have a package called react-native-image-picker that enables to capture a picture from the device’s camera or to upload an image from the gallery. Go to the command line, in the project directory run the below command to install react-native-image-picker library:
yarn add react-native-image-picker || npm install --save react-native-image-picker
react-native link react-native-image-pickerAdd the required permissions in the AndroidManifest.xml file which is located at android/app/src/main/:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>For more information about this package follow this link.
Now add the below code in your Register.js file.
import React from 'react';
...
...
import ImagePicker from "react-native-image-picker"; //import this
class LoginScreen extends React.Component {
constructor(props){
...
}
//Add the below method...
captureImageButtonHandler = () => {
ImagePicker.showImagePicker({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, (response) => {
console.log('Response = ', response);
// alert(response)
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
// You can also display the image using data:
const source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({capturedImage: response.uri, base64String: source.uri });
}
});
}
render() {
return (
<View style={styles.MainContainer}>
...
...
// Add onPress property to capture image button //
<TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={this.captureImageButtonHandler}>
<Text style={styles.loginText}>Capture Image</Text>
</TouchableHighlight>
...
...
</View>
);
}
}
const styles = StyleSheet.create({
...
...
...
});
export default LoginScreen;Add the captureImageButtonHandler() method in the file and add the onPress property to Capture Image button to call this method. After updating the code, reload your app. Now you can access your camera and gallery by clicking on the Capture Image button. Once you capture an image you can see the preview of that image on your screen as below:
Now we need to register the captured image by storing it in the S3 bucket.
I have created an API Endpoint in API Gateway from AWS console which invokes a lambda function (register-face). All I have to do is to send a POST request to the API URL endpoint from the client-side.
Creating API endpoint:
view Working with API Gateway paragraph in the following post:
https://medium.com/zenofai/serverless-web-application-architecture-using-react-with-amplify-part1-5b4d89f384f7
In the below image I created two resources one for adding faces and another for searching face:
This is the lambda function called register-face that is invoked when we click on the Submit button.
const AWS = require('aws-sdk')
var rekognition = new AWS.Rekognition()
var s3Bucket = new AWS.S3( { params: {Bucket: "<bucket-name>"} } );
var fs = require('fs');
exports.handler = (event, context, callback) => {
let parsedData = JSON.parse(event)
let encodedImage = parsedData.Image;
var filePath = "registered/" + parsedData.name;
console.log(filePath)
let decodedImage = new Buffer(encodedImage.replace(/^data:image\/\w+;base64,/, ""),'base64')
var data = {
Key: filePath,
Body: decodedImage,
ContentEncoding: 'base64',
ContentType: 'image/jpeg'
};
s3Bucket.putObject(data, function(err, data){
if (err) {
console.log('Error uploading data: ', data);
callback(err, null);
} else {
console.log('succesfully uploaded the image!');
callback(null, data);
}
});
};In the above code, I am storing the image in the registered folder (prefix) in the S3 bucket.
Just uploading faces in S3 bucket is not enough, we need to create a collection in an AWS region to store the registered faces from S3 bucket. Because we also need to add the verification or recognition process whether the face is registered or not. For that, we shall be using Amazon Rekognition to search faces in the collection. In Amazon Rekognition there is an operation called SearchFacesByImage which searches the image from the collection. Go through the Searching Faces in a Collection to know more.
Add the below code to the register-face lambda function.
var params ={
CollectionId: "<collection-id>",
DetectionAttributes: [],
ExternalImageId: parsedData.name,
Image: {
S3Object: {
Bucket: "<bucket-name>",
Name: filePath
}
}
}
setTimeout(function () {
rekognition.indexFaces(params, function(err, data) {
if (err){
console.log(err, err.stack); // an error occurred
callback(err)
}
else{
console.log(data); // successful response
callback(null,data);
}
});
}, 3000);So, the final lambda function looks as below:
const AWS = require('aws-sdk')
var rekognition = new AWS.Rekognition()
var s3Bucket = new AWS.S3( { params: {Bucket: "<bucket-name>"} } );
var fs = require('fs');
exports.handler = (event, context, callback) => {
console.log(event);
console.log(typeof event);
console.log(JSON.parse(event));
let parsedData = JSON.parse(event)
let encodedImage = parsedData.Image;
var filePath = "registered/" + parsedData.name;
console.log(filePath)
let buf = new Buffer(encodedImage.replace(/^data:image\/\w+;base64,/, ""),'base64')
var data = {
Key: filePath,
Body: buf,
ContentEncoding: 'base64',
ContentType: 'image/jpeg'
};
s3Bucket.putObject(data, function(err, data){
if (err) {
console.log('Error uploading data: ', data);
callback(err, null);
} else {
console.log('succesfully uploaded the image!');
// callback(null, data);
}
});
var params ={
CollectionId: "face-collection",
DetectionAttributes: [],
ExternalImageId: parsedData.name,
Image: {
S3Object: {
Bucket: "face-recognise-test",
Name: filePath
}
}
}
setTimeout(function () {
rekognition.indexFaces(params, function(err, data) {
if (err){
console.log(err, err.stack); // an error occurred
callback(err)
}
else{
console.log(data); // successful response
callback(null,data);
}
});
}, 3000);
};In this lambda function initially, I’m storing the image(face) in S3 bucket and then adding the same face to collection from S3 bucket.
Let’s get back to our client-side and install the aws-amplify library in our project root directory from the command line with below commands:
npm install --save aws-amplify
npm install --save aws-amplify-react-native
(or)
yarn add aws-amplify
yarn add aws-amplify-react-nativeNow add the below code in Register.js file:
import React from 'react';
...
...
import Amplify, {API} from "aws-amplify";
Amplify.configure({
API: {
endpoints: [
{
name: "<API-name>",
endpoint: "<your endpoint url>"
}
]
}
});
class Registration extends React.Component {
constructor(props){
...
...
}
submitButtonHandler = () => {
if (this.state.username == '' || this.state.username == undefined || this.state.username == null) {
alert("Please Enter the Username");
} else if (this.state.userId == '' || this.state.userId == undefined || this.state.userId == null) {
alert("Please Enter the UserId");
} else if(this.state.capturedImage == '' || this.state.capturedImage == undefined || this.state.capturedImage == null) {
alert("Please Capture the Image");
} else {
const apiName = "<API-name>";
const path = "<your path>";
const init = {
headers : {
'Accept': 'application/json',
"X-Amz-Target": "RekognitionService.IndexFaces",
"Content-Type": "application/x-amz-json-1.1"
},
body : JSON.stringify({
Image: this.state.base64String,
name: this.state.username
})
}
API.post(apiName, path, init).then(response => {
alert(JSON.stringify(response))
});
}
}
render() {
if(this.state.image!=="") {
// alert(this.state.image)
}
return (
<View style={styles.MainContainer}>
<ScrollView>
...
...
<TouchableHighlight style={[styles.buttonContainer, styles.signupButton]} onPress={this.submitButtonHandler}>
<Text style={styles.signupText}>Submit</Text>
</TouchableHighlight>
...
...
</ScrollView>
</View>
);
}
}In the above code, we added configuration to the API Gateway using amplify and created a method called submitButtonHandler() where we are going to do a POST request to the lambda function to register the face when the user clicks on the submit button. So, we have added the onPress property to submit button which calls the submitButtonHandler().
Here is the complete code for Register.js file:
import React, {Component} from 'react';
import { StyleSheet, View, Text, TextInput, Image, ScrollView, TouchableHighlight } from 'react-native';
import ImagePicker from "react-native-image-picker";
import Amplify, {API} from "aws-amplify";
Amplify.configure({
API: {
endpoints: [
{
name: "<api-name>",
Endpoint: "<your endpoint url>"
}
]
}
});
class Registration extends Component {
constructor(props){
super(props);
this.state = {
username : '',
capturedImage : ''
};
// this.submitButtonHandler = this.submitButtonHandler.bind(this);
}
captureImageButtonHandler = () => {
ImagePicker.showImagePicker({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, (response) => {
console.log('Response = ', response);
// alert(response)
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
// You can also display the image using data:
const source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({capturedImage: response.uri, base64String: source.uri });
}
});
}
submitButtonHandler = () => {
if (this.state.username == '' || this.state.username == undefined || this.state.username == null) {
alert("Please Enter the Username");
} else if(this.state.capturedImage == '' || this.state.capturedImage == undefined || this.state.capturedImage == null) {
alert("Please Capture the Image");
} else {
const apiName = "<api-name>";
const path = "<your path>";
const init = {
headers : {
'Accept': 'application/json',
"X-Amz-Target": "RekognitionService.IndexFaces",
"Content-Type": "application/x-amz-json-1.1"
},
body : JSON.stringify({
Image: this.state.base64String,
name: this.state.username
})
}
API.post(apiName, path, init).then(response => {
alert(response);
});
}
}
render() {
if(this.state.image!=="") {
// alert(this.state.image)
}
return (
<View style={styles.MainContainer}>
<ScrollView>
<Text style= {{ fontSize: 20, color: "#000", textAlign: 'center', marginBottom: 15, marginTop: 10 }}>Register Face</Text>
<TextInput
placeholder="Enter Username"
onChangeText={UserName => this.setState({username: UserName})}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
{this.state.capturedImage !== "" && <View style={styles.imageholder} >
<Image source={{uri : this.state.capturedImage}} style={styles.previewImage} />
</View>}
<TouchableHighlight style={[styles.buttonContainer, styles.captureButton]} onPress={this.captureImageButtonHandler}>
<Text style={styles.buttonText}>Capture Image</Text>
</TouchableHighlight>
<TouchableHighlight style={[styles.buttonContainer, styles.submitButton]} onPress={this.submitButtonHandler}>
<Text style={styles.buttonText}>Submit</Text>
</TouchableHighlight>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
TextInputStyleClass: {
textAlign: 'center',
marginBottom: 7,
height: 40,
borderWidth: 1,
margin: 10,
borderColor: '#D0D0D0',
borderRadius: 5 ,
},
inputContainer: {
borderBottomColor: '#F5FCFF',
backgroundColor: '#FFFFFF',
borderRadius:30,
borderBottomWidth: 1,
width:300,
height:45,
marginBottom:20,
flexDirection: 'row',
alignItems:'center'
},
buttonContainer: {
height:45,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginBottom:20,
width:"80%",
borderRadius:30,
marginTop: 20,
marginLeft: 5,
},
captureButton: {
backgroundColor: "#337ab7",
width: 350,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10
},
submitButton: {
backgroundColor: "#C0C0C0",
width: 350,
marginTop: 5,
},
imageholder: {
borderWidth: 1,
borderColor: "grey",
backgroundColor: "#eee",
width: "50%",
height: 150,
marginTop: 10,
marginLeft: 90,
flexDirection: 'row',
alignItems:'center'
},
previewImage: {
width: "100%",
height: "100%",
}
});
export default Registration;Now reload your application and register the image(face).
After registering successfully you will receive an alert message as below:
Now go to your S3 bucket and check if the image is stored as below:
And also check in your collection using below command from your command line:
aws rekognition list-faces --collection-id "<your collection id>"You will get a JSON data with list of faces that are registered as output. So, the registration process is working successfully. Now we need to add the verification/searchface process to our application. I created another lambda function (searchFace) for face verification. Here is the code for face verification lambda function.
const AWS = require('aws-sdk')
var rekognition = new AWS.Rekognition()
var s3Bucket = new AWS.S3( { params: {Bucket: "<bucket-name>"} } );
var fs = require('fs');
exports.handler = (event, context, callback) => {
let parsedData = JSON.parse(event)
let encodedImage = parsedData.Image;
var filePath = parsedData.name + ".jpg";
console.log(filePath)
let decodedImage = new Buffer(encodedImage.replace(/^data:image\/\w+;base64,/, ""),'base64')
var data = {
Key: filePath,
Body: decodedImage,
ContentEncoding: 'base64',
ContentType: 'image/jpeg'
};
s3Bucket.putObject(data, function(err, data){
if (err) {
console.log('Error uploading data: ', data);
callback(err);
} else {
console.log('succesfully uploaded the image!');
// callback(null, data);
}
});
var params2 ={
CollectionId: "<collectio-id>",
FaceMatchThreshold: 85,
Image: {
S3Object: {
Bucket: "<bucket-name>",
Name: filePath
}
},
MaxFaces: 5
}
setTimeout(function () {
rekognition.searchFacesByImage(params2, function(err, data) {
if (err){
console.log(err, err.stack); // an error occurred
callback(err)
}
else{
console.log(data); // successful response
callback(null,data);
}
});
}, 2000);
};In the above lambda function, we are using SearchFacesByImage. It searches the image from the collection. The response will be a JSON object. Now create a new file called Verification.js in your project root directory and copy the below code in it:
import React, {Component} from 'react';
import { StyleSheet, View, Text, TextInput, Image, ScrollView, TouchableHighlight } from 'react-native';
import ImagePicker from "react-native-image-picker";
import Amplify, {API} from "aws-amplify";
Amplify.configure({
API: {
endpoints: [
{
name: "<API-name>",
endpoint: "<your endpoint url>"
}
]
}
});
class Verification extends Component {
constructor(props){
super(props);
this.state = {
username: ''
capturedImage : ''
};
}
captureImageButtonHandler = () => {
ImagePicker.showImagePicker({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, (response) => {
console.log('Response = ', response);
// alert(response)
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
// You can also display the image using data:
const source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({capturedImage: response.uri, base64String: source.uri });
}
});
}
verification = () => {
if(this.state.capturedImage == '' || this.state.capturedImage == undefined || this.state.capturedImage == null) {
alert("Please Capture the Image");
} else {
const apiName = "<api-name>";
const path = "<your path>";
const init = {
headers : {
'Accept': 'application/json',
"X-Amz-Target": "RekognitionService.SearchFacesByImage",
"Content-Type": "application/x-amz-json-1.1"
},
body : JSON.stringify({
Image: this.state.base64String,
name: this.state.username
})
}
API.post(apiName, path, init).then(response => {
if(JSON.stringify(response.FaceMatches.length) > 0) {
alert(response.FaceMatches[0].Face.ExternalImageId)
} else {
alert("No matches found.")
}
});
}
}
render() {
if(this.state.image!=="") {
// alert(this.state.image)
}
return (
<View style={styles.MainContainer}>
<ScrollView>
<Text style= {{ fontSize: 20, color: "#000", textAlign: 'center', marginBottom: 15, marginTop: 10 }}>Verify Face</Text>
{this.state.capturedImage !== "" && <View style={styles.imageholder} >
<Image source={{uri : this.state.capturedImage}} style={styles.previewImage} />
</View>}
<TouchableHighlight style={[styles.buttonContainer, styles.captureButton]} onPress={this.captureImageButtonHandler}>
<Text style={styles.buttonText}>Capture Image</Text>
</TouchableHighlight>
<TouchableHighlight style={[styles.buttonContainer, styles.verifyButton]} onPress={this.verification}>
<Text style={styles.buttonText}>Verify</Text>
</TouchableHighlight>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {
height:45,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginBottom:20,
width:"80%",
borderRadius:30,
marginTop: 20,
marginLeft: 5,
},
captureButton: {
backgroundColor: "#337ab7",
width: 350,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
verifyButton: {
backgroundColor: "#C0C0C0",
width: 350,
marginTop: 5,
},
imageholder: {
borderWidth: 1,
borderColor: "grey",
backgroundColor: "#eee",
width: "50%",
height: 150,
marginTop: 10,
marginLeft: 90,
flexDirection: 'row',
alignItems:'center'
},
previewImage: {
width: "100%",
height: "100%",
}
});
export default Verification;In the above code there are two buttons one (Capture image) for capturing the face that needs to be verified and another (Verify) for verifying the captured face if it is registered or not. When a user clicks on Verify button verification() method will be called in which we make a POST request (invoking searchFace lambda function via API gateway).
Now we are having two screens one for Registration and another for Verification.Let’s add navigation between two screens using react-navigation. The first step is to install react-navigation in your project:
npm install --save react-navigationThe second step is to install react-native-gesture-handler:
yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handlerNow we need to link our react-native with react-native-gesture-handler:
react-native link react-native-gesture-handlerAfter that go back to your App.js file and replace it with the below code:
import React, {Component} from 'react';
import {View, Text, TouchableHighlight, StyleSheet} from 'react-native';
import Registration from './Registration';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Verification from './Verification';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center" }}>
<Text style= {{ fontSize: 30, color: "#000", marginBottom: 50, marginTop: 100 }}>Register Face ID</Text>
<TouchableHighlight style={[styles.buttonContainer, styles.button]} onPress={() => this.props.navigation.navigate('Registration')}>
<Text style={styles.buttonText}>Registration</Text>
</TouchableHighlight>
<TouchableHighlight style={[styles.buttonContainer, styles.button]} onPress={() => this.props.navigation.navigate('Verification')}>
<Text style={styles.buttonText}>Verification</Text>
</TouchableHighlight>
</View>
);
}
}
const MainNavigator = createStackNavigator(
{
Home: {screen: HomeScreen},
Registration: {screen: Registration},
Verification: {screen: Verification}
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(MainNavigator);
export default class App extends Component {
render() {
return <AppContainer />;
}
}
const styles = StyleSheet.create({
buttonContainer: {
height:45,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginBottom:20,
width:"80%",
borderRadius:30,
marginTop: 20,
marginLeft: 5,
},
button: {
backgroundColor: "#337ab7",
width: 350,
marginTop: 5,
},
buttonText: {
color: 'white',
fontWeight: 'bold',
},
})Now reload your app and you could see your home screen as below:
When user clicks on Registration button it navigates to Registration screen as below:
When user clicks on Verification button it navigates to Verification screen as below:
Now let’s check the verification process.
Step 1: Navigate to Verification screen.
Step 2: Capture the registered image(face).
Step 3: Click on the verify button.
If everything is fine then you will receive an alert message with the face name as below:
If there are no face matches with the captured face then the user receives an alert message as “No matches found”.
Thanks for the read, I hope it was useful.
This story is authored by Venu Vaka. Venu is a software engineer and machine learning enthusiast.
Comments
the part of creating api gateway has been lost you could upload it http://sebastianpatten.com/api-tutorial-amazon-api-gateway-part-2/#creating-api-gateway
Hi Alexis,
view ‘Working with API Gateway’ paragraph in the following post:
https://medium.com/zenofai/serverless-web-application-architecture-using-react-with-amplify-part1-5b4d89f384f7
Some images in this WordPress blog post aren’t showing up, we are working on resolving it. You could view the same post with all images again on medium here.
https://medium.com/zenofai/face-recognition-app-in-react-native-using-aws-rekognition-c10b188a6413