> For the complete documentation index, see [llms.txt](https://docs.caf.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.caf.io/caf-sdk/web-javascript/getting-started/faceliveness-deprecated.md).

# Face Liveness (DEPRECATED)

## **Importing SDK** <a href="#ec6hruocgdfc" id="ec6hruocgdfc"></a>

To use Sdk, you can either remotely import the `.js` file or download it locally.

## **Remotely** <a href="#vbdis2v796qu" id="vbdis2v796qu"></a>

Include the `.js` file directly from the CDN:

```html
<script src="https://repo.combateafraude.com/javascript/release/face-liveness/<VERSION>.js" type="text/javascript"></script>
```

You can retrieve the class from the SDK using the following code:

```javascript
const sdk = window['FacesSDK'];
```

### **Initialization** <a href="#e8bl0o5hv2i4" id="e8bl0o5hv2i4"></a>

### `initializeSdk(token: string, sdkContainer: string, useFaceAuthenticator: boolean, personId: string, options: any)` <a href="#tdlbz5hosfd" id="tdlbz5hosfd"></a>

The SDK has an isolated initialization method, to allow greater control over when it occurs.

During this process, the SDK will initialize its internal variables and download the resources it needs to run.

\[!]You must call this method before using other SDK methods.

## Supported Parameters <a href="#m3han9t9fipv" id="m3han9t9fipv"></a>

| Parameter                                                                                                                                                                                                                           | Required?                                                                       |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| <p><a href="https://github.com/combateafraude/public-docs/blob/docs-sdks/sdk_integration_documentation.md#2-generating-access-tokens"><strong><code>token</code></strong></a></p><p>Authentication token for consuming the SDK.</p> | Yes.                                                                            |
| <p><strong><code>sdkContainer</code></strong></p><p>Id of the container where the SDK will be inserted.</p>                                                                                                                         | Yes.                                                                            |
| <p><strong><code>useFaceAuthenticator</code></strong></p><p>Flag indicating whether to use FaceAuthenticator.</p>                                                                                                                   | No. The default is **`false`**                                                  |
| <p><strong><code>personId</code></strong></p><p>Document number used as a unique identifier for each user.</p>                                                                                                                      | Yes.                                                                            |
| <p><strong><code>options.timeExpiresUrl</code></strong></p><p>Customizing the expiration time of the image Url returned by Sdk.</p>                                                                                                 | No. The default is 30 minutes, the accepted values ​​are **`3H`** or **`30D`**. |
| <p><strong><code>options.</code></strong><a href="#_av30ro16qapb"><strong><code>filter</code></strong></a></p><p>Image capture filter customization.</p>                                                                            | No. The default is **`shaded`**                                                 |
| <p><strong><code>options.settings.</code></strong><a href="#_av30ro16xcbvd"><strong><code>language</code></strong></a></p><p>Language customization.</p>                                                                            | No. The default is **`pt_BR`**                                                  |
| <p><strong><code>options.startButton.label</code></strong></p><p>Customize sdk start button text.</p>                                                                                                                               | No.                                                                             |
| <p><strong><code>options.startButton.color</code></strong></p><p>Customize sdk start button text color.</p>                                                                                                                         | No.                                                                             |
| <p><strong><code>options.startButton.backgroundColor</code></strong></p><p>Customize sdk start button background color.</p>                                                                                                         | No.                                                                             |
| <p><strong><code>options.startButton.borderRadius</code></strong></p><p>Customize sdk start button border radius.</p>                                                                                                               | No.                                                                             |
| <p><strong><code>options.startButton.border</code></strong></p><p>Customize sdk start button border.</p>                                                                                                                            | No.                                                                             |
| <p><strong><code>options.reverseProxy</code></strong></p><p>See more details in the <a href="#reverse-proxy-configuration">Reverse proxy configuration</a> section.</p>                                                             | No.                                                                             |

#### **Example** <a href="#j4h8eo4ng95u" id="j4h8eo4ng95u"></a>

```javascript
const options = {
  timeExpiresUrl: '30D',
  settings: {
    filter: 'classic',
    language: 'pt_BR'
  },
  startButton: {
    label: 'Escanear rosto',
    color: '#F9F9F9',
    backgroundColor: 'blue',
    borderRadius: '0.25rem',
    border: '1px solid #2D994B'
  }
}

const facesSdk = await sdk.initializeSdk(token, sdkContainer, useFaceAuthenticator, personId, options);
```

### **Filter** <a href="#av30ro16qapb" id="av30ro16qapb"></a>

Filter configuration for camera preview. It can be `classic`, `shaded` (additional detail, the default), `vibrant` (full color), `clear` (no filter) and `blur` (starts blurred).

### **Language** <a href="#av30ro16xcbvd" id="av30ro16xcbvd"></a>

Through the `language` parameter, the application language can be changed, the default value is `pt_BR`, check the availability below:

| **Parameter** | **Language** |
| ------------- | ------------ |
| `cy_GB`       | Welsh.       |
| `de`          | German.      |
| `en`          | English.     |
| `es`          | Spanish.     |
| `fr`          | French.      |
| `it`          | Italian.     |
| `nl`          | Dutch.       |
| `pt_BR`       | Portuguese.  |

### **Iframe** <a href="#id-1zo6vxxf782" id="id-1zo6vxxf782"></a>

To perform integration through an iframe, camera and fullscreen permissions must be provided.

```javascript
<iframe
  src="https://caf.example"
  allow="camera;fullscreen;accelerometer;gyroscope;magnetometer;"
></iframe>
```

### **Reverse proxy configuration**

If you choose to use a reverse proxy, you must configure it to properly forward requests to the appropriate endpoints. Below is the mapping for redirection:

* `/v1/` → `https://api.public.caf.io/v1/sdks/faces/`
  * Consider using `https://api.public.beta.caf.io/v1/sdks/faces/` for homologation.
* `/std/` → `https://us.rp.secure.iproov.me/`
* `/std/ws/` → `wss://us.rp.secure.iproov.me/ws/`
* `/assets/` → `https://cdn.iproov.app/`

#### **SDK configuration example**

Supposing your domain is `my.proxy.io`, your SDK configuration would look like this:

```javascript
reverseProxy: {
    authBaseUrl: "https://my.proxy.io/v1/",
    livenessBaseUrl: "https://my.proxy.io/std/",
    assetsBaseUrl: "https://my.proxy.io/assets/"
}
```

**Note:** The paths provided in this example are just for reference. You can configure your proxy and paths according to your best practice standards.

## **Webview** <a href="#d6tsn0954bw8" id="d6tsn0954bw8"></a>

To use the SDK through a Webview, camera permission must be granted in your native application.

Example implementation on Android.

`AndroidManifest.xml`

```java
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-feature
      android:name="android.hardware.camera"
      android:required="true" />
```

`MainActivity`

```java
  @Override
  public void onPermissionRequest(final PermissionRequest request) {
      request.grant(request.getResources());
  }
```

Sample [android](https://github.com/combateafraude/android-webview-example) project for webview implementation, in addition it is necessary to be able to open the application in full screen, the example shows how to configure it correctly.

On IOS, camera and notion permissions must be granted with `NSCameraUsageDescription` and `NSMotionUsageDescription` according to the [example](https://github.com/combateafraude/ios-webview-example) project.

## **Opening and taking selfies** <a href="#s3y7w2l7a01m" id="s3y7w2l7a01m"></a>

### `execute()` <a href="#id-1l7spulz52hu" id="id-1l7spulz52hu"></a>

The method used to load the SDK onto the screen and perform selfie capture.

It will initialize the video *stream* (requesting permissions if needed) and load it into the container.

### **Example** <a href="#rb9d2o76lxbw" id="rb9d2o76lxbw"></a>

```javascript
await facesSdk.execute();
```

### **Return** <a href="#exv8broymq71" id="exv8broymq71"></a>

| **Field**        | **Type** | **Description**                                                                                                                                                                                                                                                                                                         |
| ---------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `signedResponse` | `string` | Signed response from the CAF server confirming that the captured selfie has a real face. This parameter is used to get an extra layer of security, checking that the signature of the response is not broken, or caused by request interception. If it is broken, there is a strong indication of request interception. |

### **Example** <a href="#li5quwhp57l9" id="li5quwhp57l9"></a>

```javascript
{
   "signedResponse": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXF1ZXN0SWQiOiIyY2QwMTkxZS1jNzc0LTRjZWEtYjliNC1hOGJhYjRiODEzNGQiLCJpc0FsaXZlIjp0cnVlLCJ0b2tlbiI6ImYyOWFhNmM0YjczMmYyYWNhZTJjOGMxZWYxZDUyN2FhMDY0ZTI1YTg1OWMyNWU2MzZhMzQ0MTAzMTgwMXZ1MDEiLCJ1c2VySWQiOiJlZmI1NTg5NS1lMmY0LTRkMjQtOGE4OS04NGI0Nzg3ZjViM2EiLCJpbWFnZVVybCI6ImltYWdlVXJsIiwicGVyc29uSWQiOiJwZXJzb25JZCIsInNka1ZlcnNpb24iOiIxLjAuNCIsImF0dGVtcHRJZCI6IjY1M2ZmYjg2ZmViZTZhMzJiZWMyOWM1ZSIsImlhdCI6MTY5ODY5MTk3NH0.BKCtQUbPRBMchHX30_fqf6vSWVN__K4nsOecKLoybGs"
}
```

### **Signed response params** <a href="#exv8broymq72" id="exv8broymq72"></a>

| **Event**    | **Description**                                                                        |
| ------------ | -------------------------------------------------------------------------------------- |
| `requestId`  | Request identifier.                                                                    |
| `isAlive`    | Validation of a living person, identifies whether the user passed successfully or not. |
| `token`      | Request token.                                                                         |
| `userId`     | User identifier provided for the request.                                              |
| `imageUrl`   | Temporary link to the image, generated by our API.                                     |
| `personId`   | User identifier provided for the SDK.                                                  |
| `sdkVersion` | Sdk version in use.                                                                    |
| `iat`        | Token expiration. \`                                                                   |

{% hint style="warning" %} The **isAlive** parameter is **VERY IMPORTANT**, based on it validation must be carried out to continue with the flow or not, in case of `isAlive: true`, your user is able to continue with the journey, in case of `isAlive: false`, this user is not is valid and should be barred from the remainder of the journey. {% endhint %}

## **Events** <a href="#d6tsn2342fax" id="d6tsn2342fax"></a>

Currently the SDK emits three types of events:

| **Event**          | **Description**                                   |
| ------------------ | ------------------------------------------------- |
| `started`          | Capture stream initialization.                    |
| `sdk-button-ready` | SDK components have been loaded and ready to use. |
| `passed`           | Image capture was successful.                     |
| `failed`           | Image capture failed.                             |
| `error`            | An error occurred during the capture process.     |
| `streaming`        | streaming started, full screen start.             |
| `streamed`         | End of streaming, closing full screen.            |
| `canceled`         | Capture flow cancellation.                        |
| `unsupported`      | Browser does not support Sdk.                     |

## **Failed event details**

The failed event is of [customEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) type, therefore, if you wish to obtain details regarding the reason for the failure, you can consume the `event.detail` where you will find the following descriptions.

| Feedback            | Reason                                                | LA | GPA |
| ------------------- | ----------------------------------------------------- | -- | --- |
| eyes\_closed        | Keep your eyes open                                   | ✅  | ✅   |
| face\_too\_far      | Move your face closer to the screen                   | ❌  | ✅   |
| face\_too\_close    | Move your face farther from the screen                | ❌  | ✅   |
| misaligned\_face    | Keep your face in the oval                            | ❌  | ✅   |
| multiple\_faces     | Ensure only one person is visible                     | ✅  | ✅   |
| obscured\_face      | Remove any face coverings                             | ✅  | ✅   |
| sunglasses          | Remove sunglasses                                     | ✅  | ✅   |
| too\_bright         | Ambient light too strong or screen brightness too low | ✅  | ✅   |
| too\_dark           | Your environment appears too dark                     | ✅  | ✅   |
| too\_much\_movement | Please keep still                                     | ❌  | ✅   |
| unknown             | Try again                                             | ✅  | ✅   |

### **Example failed event listener**

```javascript
document.addEventListener(
  "failed",
  (event) => {
    console.log(event.detail.feedback);
    console.log(event.detail.reason);
  }
);
```

## **Error event details**

The error event is of [customEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) type, therefore, if you wish to obtain details regarding the reason for the error, you can consume the event.detail where you will find the following descriptions.

| Feedback                           | Reason                                                     |
| ---------------------------------- | ---------------------------------------------------------- |
| unknown                            | Try again                                                  |
| client\_camera                     | There was an error getting video from the camera           |
| client\_error                      | An unknown error occurred                                  |
| error\_asset\_fetch                | Unable to fetch assets                                     |
| error\_camera                      | The camera cannot be started for unknown reasons           |
| error\_camera\_in\_use             | The camera is already in use and cannot be accessed        |
| error\_camera\_not\_supported      | The camera resolution is too small                         |
| error\_camera\_permission\_denied  | The user denied our camera permission request              |
| error\_device\_motion\_denied      | The user denied our device motion permission request       |
| error\_device\_motion\_unsupported | Your device does not seem to fully report device motion    |
| error\_fullscreen\_change          | Exited fullscreen without completing iProov                |
| error\_invalid\_token              | The sdk internal token is invalid                          |
| error\_network                     | Network error                                              |
| error\_no\_face\_found             | No face could be found                                     |
| error\_not\_supported              | The device or integration isn't able to run the Web SDK    |
| error\_server                      | An error occurred when communicating with iProov's servers |
| error\_token\_timeout              | The token was claimed too long after being created         |
| error\_too\_many\_requests         | The service is under high load and the user must try again |
| error\_user\_timeout               | The user started the claim but did not stream in time      |
| integration\_unloaded              | The SDK was unmounted from the DOM before it finished      |
| sdk\_unsupported                   | The SDK has passed end of life and is no longer supported  |

### **Example error event listener**

```javascript
document.addEventListener(
  "error",
  (event) => {
    console.log(event.detail.feedback);
    console.log(event.detail.reason);
  }
);
```

## **Errors**

All errors are instances of the [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) object. To understand the cause of an error, you can access the `error.name` and `error.message` properties, which provide the following details:

| Name                        | Message                                      | Method        |
| --------------------------- | -------------------------------------------- | ------------- |
| CameraPermissionDeniedError | Error camera permission denied by user.      | initializeSdk |
| CameraPermissionError       | Error getting camera permission.             | initializeSdk |
| CameraUnsupportedError      | Camera is not supported by this browser.     | initializeSdk |
| RequestTokenError           | Error while requesting a token.              | initializeSdk |
| RenderCaptureWindowError    | Error while rendering the capture window.    | initializeSdk |
| CaptureError                | Error while capturing an image.              | execute       |
| FaceLivenessError           | Error during face liveness detection.        | execute       |
| FaceLivenessError           | No face could be found in the selfie sent.   | execute       |
| FaceLivenessError           | Too many requests in a short period of time. | execute       |

### **Example handling an `initializeSdk` error**

```javascript
  try {
    const facesSdk = await sdk.initializeSdk(token, sdkContainer, useFaceAuthenticator, personId, options);
  } catch (error) {
    console.log("Error name:", error.name); // RequestTokenError 
    console.log("Error message:", error.message); // Error while requesting a token.
  }
```

### **Example handling `execute` error**

```javascript
  try {
    await facesSdk.execute();
  } catch (error) {
    console.log("Error name:", error.name); // CaptureError 
    console.log("Error message:", error.message); // Error while capturing an image.
  }
```

> **Note:**\
> The **error event details** capture specific errors that occur during the liveness detection process,\
> while the **errors** section refers to more general and fundamental SDK functionalities.\
> Depending on the implementation, you may need to handle both types of errors to ensure a robust integration.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.caf.io/caf-sdk/web-javascript/getting-started/faceliveness-deprecated.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.