# Selfie Capture

## Initializing the SDK

To get started, follow these 3 simple steps in your project:

Instantiate a new Builder:

```javascript
const unicoCameraBuilder = new UnicoCheckBuilder();
```

Specify the path of the additional files (if added to your project):

```javascript
unicoCameraBuilder.setResourceDirectory("/resources");
```

Specify the path of the AI model files, if using the Intelligent Camera feature.

```javascript
unicoCameraBuilder.setModelsPath("https://meusite.com.br/models");
```

{% hint style="info" %}
Starting from version 3.18.0, for the SDK to automatically fetch the additional resources, simply do not implement the `setResourceDirectory` method and ensure that the [CSP configurations for using the SDK](https://devcenter.unico.io/idcloud-v2/by-client-integration/sdk/available-sdks/web-sdk/installation-guide#content-security-policy-csp-setting) are applied correctly.
{% endhint %}

Configure CSS Reset (optional):\
 By default, the SDK applies a CSS Reset to ensure visual consistency across components. If you want to keep your application's CSS styles intact, you can disable this feature:

```json
unicoCameraBuilder.disableCssReset();
```

## Environment Configuration

{% hint style="info" %}
If not configured, by default, the Web SDK uses the production environment.
{% endhint %}

It is possible to configure the environment to be used when running the SDK. Use the enumerated `SDKEnvironmentTypes`, which contains the following enumerations:

* `SDKEnvironmentTypes.PROD`: for the Production environment;
* `SDKEnvironmentTypes.UAT`: for the Staging environment.

Here is an example of how to implement it:

```javascript
import {
  ...
  UnicoCheckBuilder,
  SDKEnvironmentTypes
  ...
} from "unico-webframe"

unicoCameraBuilder.setEnvironment(SDKEnvironmentTypes.UAT);
```

## Implementing the Callback Functions

One of the objects that should be passed as a parameter to the method responsible for rendering the capture frame is the **callback** object. This object should contain callback functions for success and error cases, as exemplified below.

```javascript
  const callback = {
    on: {
      success: (obj) => {
        console.log(obj.base64);
        console.log(obj.encrypted);        
      },
      error: (error) => {
        console.error(error)
        //confira na aba "Referências" sobre os erros possíveis
      }
    }
  };

```

This object is mandatory, and if it is not correctly implemented (covering all success or error events), it will generate an exception, which, if not handled, will be displayed in the user's console.

{% hint style="danger" %}

* The `encrypted` attribute is strictly intended for sending the image through the by Client APIs. This attribute should not be opened or serialized, as its characteristics may be altered without prior notice. Its use should be exclusive in interactions with the APIs to ensure the integrity and security of the data. Unico is not responsible for any damage resulting from this practice, as modifications may occur unexpectedly.
* The `base64/encrypted` files may vary in size depending on several variables, including the quality of the devices and the photos generated by them, and Unico's business rules. To avoid issues in your application, do not limit the size of the string generated by the SDK for these files in your programming logic or infrastructure.
  {% endhint %}

## Configure and Start

To start the camera with the settings made so far, you need to create an instance of the builder using the `build()` method.

```javascript
const unicoCamera = unicoCameraBuilder.build();
```

Then, with the camera "assembled", you need to configure the camera's capture mode.

The camera preparation will be done using the `prepareSelfieCamera()` method, provided by the builder. This method takes 2 parameters:

* The UnicoConfig class obtained in [this step](https://devcenter.unico.io/idcloud-v2/by-client-integration/sdk/available-sdks/web-sdk/installation-guide#obtaining-credentials);
* The desired camera mode, which can be one of the following:
  * `SelfieCameraTypes.NORMAL` for the normal camera mode;
  * `SelfieCameraTypes.SMART` for the smart camera mode.

This method returns a promise, which, when resolved, returns an object used to effectively `open` the camera via the open method. The open method takes as parameters the `callback` functions configured in the previous step.

{% hint style="info" %}
To optimize camera startup, you can separate the calls to the methods prepareSelfieCamera() and open().
{% endhint %}

If you wish to use automatic capture, pass the parameter Unico.SelfieCameraTypes.SMART to the `prepareSelfieCamera` method.

For smart capture, the computer vision models should also be loaded through the `setModelsPath` method, as explained in the first step of this guide.

Using the UnicoConfig class:

```javascript
const config = new UnicoConfig()
  .setHostname("<YOUR_HOSTNAME>")
  .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareSelfieCamera(
    config, 
    SelfieCameraTypes.SMART
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });
```

### Configure Capture Mode in iFrames

It is possible to use the Web SDK with embedded Interactive Liveness in an iFrame. To do this, you need to implement a process similar to the previous section when preparing the camera.

The camera preparation will be done through the method `prepareSelfieCameraForIFrame()`, also provided by the builder. This method takes the same parameters as `prepareSelfieCamera()`:

```javascript
const unicoCamera = unicoCameraBuilder.build();

const config = new UnicoConfig()
  .setHostname("<YOUR_HOSTNAME>")
  .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareSelfieCameraForIFrame(
    config, 
    SelfieCameraTypes.SMART
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });
```

{% hint style="warning" %}
TThe method `prepareSelfieCameraForIFrame()` only works if the implementation is inside an iFrame. Using it outside of an iFrame will result in error `73724`. Similarly, using the method `prepareSelfieCamera()` inside an iFrame will also result in error `73724`.
{% endhint %}

### **I**mplementing the iFrame Element

For the capture to work correctly, it is necessary to implement the `<iframe>` element as shown in the example below:

{% code overflow="wrap" %}

```javascript
<iframe allow="fullscreen;camera;geolocation" allowFullScreen src="your_app_url"></iframe>
```

{% endcode %}

### Fullscreen Behavior

To perform the capture, it is required to be in full-screen mode in the browser so that the SDK can resize automatically. Therefore, when performing the capture, the SDK will display a screen requesting that the frame be opened in full-screen mode. See the following example:

<figure><img src="/files/TkYg71ZFmIWQnAbeCNEl" alt=""><figcaption></figcaption></figure>

After allowing fullscreen usage, the capture frame will open normally:

<figure><img src="/files/wQltEXNzMaj2C2U6cYP5" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Apple restricts the use of full-screen APIs specifically on iPhones (iPads are acceptable). Therefore, for captures on iPhones, it is necessary to manually configure the positioning of the iFrame.
{% endhint %}

## Making a POST Request to the Client API

Capturing the images is only the first part of the journey. After capturing the image, it is necessary to send the `encrypted` data generated by the SDK to the by Client REST APIs.

{% hint style="danger" %}
For security reasons, the interval between generating the encrypted data and sending it via one of the available flows should be no more than 10 minutes. Submissions made beyond this period will be automatically rejected by the API.
{% endhint %}


---

# 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:

```
GET https://devcenter.unico.io/unico-idcloud/by-client-integration/sdk/available-sdks/web-sdk/usage-and-integration-guide/selfie-capture.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.