# FaceRecognition - React-Native

## Overview

The demo project demonstrates both Face Liveness Detection and Face Recognition Technology.

It stands for face recognition React-Native, facial recognition React-Native, face liveness check React-Native, spoofing prevention React-Native, face matching React-Native, face comparison React-Native, face search engine React-Native, face identification React-Native.

## Github

{% embed url="<https://github.com/kby-ai/FaceRecognition-React-Native>" %}

## Google Play

{% embed url="<https://play.google.com/store/apps/details?id=com.kbyai.facerecognition>" %}

## App Store

{% embed url="<https://apps.apple.com/us/app/kby-ai-face-recognition/id6448648922>" %}

## YouTube

{% embed url="<https://youtu.be/HpDggnWsG1c>" %}

## Screenshots

<div><figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FHt8DuxxyAaZZj98F6u4q%2Ff-menu.png?alt=media&#x26;token=f540f2e9-a982-46c8-a306-ac60d8eef747" alt=""><figcaption></figcaption></figure> <figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2Fp10zvNkemkp0nMSqyuhl%2Ff-result.png?alt=media&#x26;token=45674cf3-4fb9-42ea-add3-7157053cad81" alt=""><figcaption></figcaption></figure> <figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2F0BqoLRrbnEYFYsITysez%2Ff-settings.png?alt=media&#x26;token=35873e36-9479-479b-8bbb-6d2a61503ef5" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2Frl9CVUXISljp8KvxeNCE%2Ff-help.png?alt=media&#x26;token=8095c540-4a4d-43b6-b6e0-325d4e10c712" alt=""><figcaption></figcaption></figure> <figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FDKK5QdXAuimqH41uOgre%2Ff-spoof.png?alt=media&#x26;token=81f53fcd-1f85-4aca-9d83-b00849dff6eb" alt=""><figcaption></figcaption></figure> <figure><img src="https://2589216230-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1WwtQK0VFwKRGmIjGA3I%2Fuploads%2FoqrlJzIhky3KCCUVb6Im%2Ff-real.png?alt=media&#x26;token=2fd97521-726a-483b-802b-e1e07041fcf6" alt=""><figcaption></figcaption></figure></div>

## How to Run

### 1. React-Native Setup

Make sure you have `React-Native` installed.

If you don't have `React-Native` installed, please follow the instructions provided in the official `React-Native` documentation:&#x20;

{% embed url="<https://reactnative.dev/docs/environment-setup>" %}

### 2. Running the App

Run the following commands:

```bash
yarn
yarn example android
```

### About SDK

### 1. Setup

#### 1.1 Face SDK Setup

> Android

* Copy the SDK (`libfacesdk` folder) to the `android` folder of your project.
* Add SDK to the project in `settings.gradle`.

```gradle
include ':libfacesdk'
```

### 2. API Usage&#x20;

#### 2.1 **FaceSDKModule**

* Activate the `FaceSDKModule` by calling the `setActivation` method:

```tsx
      var ret = await FaceSDKModule.setActivation("...");
      console.log("set activation:", ret);
```

* Initialize the `FaceSDKModule` by calling the `initSDK` method:

```dart
    var ret = await FaceSDKModule.initSDK();
```

* Set parameters using the `setParam` method:

```tsx
  var ret = await FaceSDKModule.setParam(checkLivenessLevel);
```

* Extract faces using the `extractFaces` method:

```tsx
  var faceBoxes = await FaceSDKModule.extractFaces(uri);
```

* Calculate similarity between faces using the `similarityCalculation` method:

```tsx
  const similarity = await FaceSDKModule.similarityCalculation(
      face.templates,
      person.templates
  );
```

#### 2.2 **FaceRecognitionSdkView**

* To build the native camera screen and process face detection, please refer to the [example/src/FaceRecognitionPage.tsx](https://github.com/kby-ai/FaceRecognition-React-Native/blob/main/example/src/FaceRecognitionPage.tsx) file in the repository.

```tsx
  <FaceRecognitionSdkView style={styles.box} livenessLevel={1} cameraLens={1} />
```

* To obtain the face detection results, use the following code:

```tsx
      const eventEmitter = new NativeEventEmitter(FaceSDKModule);
      let eventListener = eventEmitter.addListener('onFaceDetected', (event) => {
          setFaces(event);
          if (recognized == false) {
              identifyPerson(event);
          }
      });
```

* To start and stop the camera, use the following code:

```tsx
    //Start Camera
    const startCamera = async () => {
        await FaceSDKModule.startCamera();
    }

    //Stop Camera
    const stopCamera = async () => {
        await FaceSDKModule.stopCamera();
    }
```