# 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="/files/XWkQB4XZ3VoJkD2fA8nc" alt=""><figcaption></figcaption></figure> <figure><img src="/files/0vaBlRJ6X4A51gGnK8BZ" alt=""><figcaption></figcaption></figure> <figure><img src="/files/dMMUQ5NEXZmiTVv5gLdA" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="/files/R4x9EmxkwTLCa7LHpHCe" alt=""><figcaption></figcaption></figure> <figure><img src="/files/WPp104Mwoa3Dxtb3XUNg" alt=""><figcaption></figcaption></figure> <figure><img src="/files/vrjAisC0piIsYNCEJp8W" 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();
    }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kby-ai.com/help/demo-projects/mobile-android-ios/facerecognition-react-native.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.