Selfie Capture

In this section, you will find all the necessary information for using and integrating the Unico IDCloud platform SDK into your Web applications for selfie capture

---

This guide has been designed to help you quickly and easily implement the Web SDK. Below, you'll find the step-by-step process for the complete integration. If you wish to customize the experience further, check out the Web Customization section.

Initializing the SDK

---

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

Instantiate a new Builder:

const unicoCameraBuilder = new UnicoCheckBuilder();

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

unicoCameraBuilder.setResourceDirectory("/resources");

Specify the path of the AI model files if you are using the Smart Camera functionality:

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

Starting from version 3.18.0, to have the SDK automatically fetch additional resources, simply omit the setResourceDirectory method and ensure the CSP settings are correctly applied for SDK usage.

Environment Configuration

---

By default, the SDK Web uses the production environment.

It is possible to configure which environment will be used during SDK execution. Use the SDKEnvironmentTypes enumeration, which includes the following options:

• SDKEnvironmentTypes.PROD: for the Production environment;

• SDKEnvironmentTypes.UAT: for the Staging environment.

Here is an example of how to implement it:

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

unicoCameraBuilder.setEnvironment(SDKEnvironmentTypes.UAT);

Implementing the Callback Functions

---

One of the objects that must 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 shown below:

  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
      }
    }
  };

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

• The encrypted attribute is strictly intended for sending the image through the by Client APIs. It should not be opened or serialized, as its characteristics may change without prior notice. Its use must be exclusive to interactions with the APIs to ensure the integrity and security of the data. Unico is not responsible for any damages arising from this practice, as modifications may occur unexpectedly.

• The base64 and encrypted files can vary in size due to several factors, including the quality of the devices and the photos generated, as well as Unico's business rules. To avoid issues in your application, do not restrict the size of the string generated by the SDK for these files in your programming logic or infrastructure.

If it is necessary to convert the base64 string to a bitmap, the standard method does not work for Android. You need to perform a split at the comma (,) for it to function correctly. If you want to learn more, read the article:How to convert a Base64 string into a Bitmap image to show it in a ImageView?.

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.

const unicoCamera = unicoCameraBuilder.build();

Then, once the camera is "built", you need to configure the camera capture mode. The camera setup will be done through the prepareSelfieCamera() method available from the builder. This method takes 2 parameters:

• The UnicoConfig class obtained in this step;

• The desired camera mode, which can be:

  • SelfieCameraTypes.NORMAL for normal camera mode;

  • SelfieCameraTypes.SMART for smart camera mode.

This method returns a promise that, when resolved, provides an object used to actually open the camera through the open method, which takes the callback functions as parameters.

To optimize camera startup, you can separate the calls to the prepareSelfieCamera() and open() methods.

To use automatic capture, pass the Unico.SelfieCameraTypes.SMART parameter to the prepareSelfieCamera method. For smart capture, the computer vision models must also be loaded through the setModelsPath method, as explained in the first step of this guide.

Using the UnicoConfig class:

const config = new UnicoConfig()
  .setProjectNumber("<YOUR_PROJECT_NUMBER>")
  .setProjectId("<YOUR_PROJECT_ID>")
  .setMobileSdkAppId("<YOUR_MOBILE_SDK_APP_ID>")
  .setHostname("<YOUR_HOSTNAME>")
  .setHostInfo("<YOUR_HOST_INFO>")
  .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 SDK Web with Interactive Liveness embedded in an iFrame. To do this, follow a similar implementation to the previous section in preparing the camera. The camera setup will be done through the prepareSelfieCameraForIFrame() method, also available from the builder. This method takes the same parameters as prepareSelfieCamera():

const unicoCamera = unicoCameraBuilder.build();

const config = new UnicoConfig()
  .setProjectNumber("<YOUR_PROJECT_NUMBER>")
  .setProjectId("<YOUR_PROJECT_ID>")
  .setMobileSdkAppId("<YOUR_MOBILE_SDK_APP_ID>")
  .setHostname("<YOUR_HOSTNAME>")
  .setHostInfo("<YOUR_HOST_INFO>")
  .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
  });

The prepareSelfieCameraForIFrame() method only works if the implementation is within an iFrame. Using it outside of an iFrame results in error 73724. Similarly, using prepareSelfieCamera() within an iFrame also results in error 73724.

Implementing the iFrame Element

---

For the capture to work correctly, the <iframe> element must be implemented as shown below:

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

Fullscreen Behavior

To execute the capture, the browser must be in fullscreen mode so that the SDK can automatically resize itself. Therefore, when starting the capture, the SDK will display a screen requesting the frame to open in fullscreen mode. See the following example:

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

Apple restricts the use of fullscreen APIs specifically on iPhones (iPads are acceptable). Therefore, for captures on iPhones, it is necessary to configure the positioning of the iFrame manually.

Making a POST Request to the Client API

---

After capturing images, the next step is to send the generated encrypted image from the SDK to the Client APIs.

For security reasons, the interval between the generation of the encrypted data and the sending through one of the available flows must be no more than 10 minutes. Submissions made beyond this period will be automatically rejected by the API.

---

Still need help?​

Didn't find something or still need help? If you're already a client or partner, you can reach out through our Help Center.