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");

Environment Configuration

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.

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

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:

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.

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.

This guide has been designed to help you implement the Web SDK quickly and easily. Below, you will find a step-by-step process for the entire integration. After that, if you wish to customize the experience, be sure to check the Web Customization section.

Available Document Frames

In this camera mode, there is a capture frame to assist the user in positioning the document correctly. Once the document is properly positioned, the user must click the button to take a photo of the document.

In this camera mode, it is possible to capture the following documents:

• CPF: Capture the front of the CPF;

• CNH: Capture the open CNH;

• CNH Front: Capture the front of the CNH;

• CNH Back: Capture the back of the CNH;

• RG Front: Capture the front of the RG;

• RG Back: Capture the back of the RG;

• Others: Capture any other document.

Initializing the SDK

To get started, you need to perform 2 simple steps in your project:

Instantiate a new Builder:

const unicoCameraBuilder = new UnicoCheckBuilder();

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

unicoCameraBuilder.setResourceDirectory("/resources");

Configure Frame Size

It is recommended that you configure the size of the frame within your application to optimize the capture area within your WebApp. Below is how to configure this for both Web Desktop and Mobile.

<div class="container">
  <div id="box-camera"></div>
</div>

.container {
  width: 800px;
  height: 600px;
  position: relative;
}

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 exemplified below:

  const callback = {
    on: {
      success: (obj) => {
        console.log(obj.base64);
        console.log(obj.encrypted);
      },
      error: (error) => {
        console.error(error)
      },
    }
  };

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

Configure and Start Camera

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

const unicoCamera = unicoCameraBuilder.build();

Next, with the camera "assembled," you need to configure the capture mode of the camera. The camera preparation is done using the prepareDocumentCamera() method, provided by the builder. This method takes 2 parameters:

• The UnicoConfig class obtained in this step;

• The type of document to be captured.

This method returns a promise that, when resolved, returns an object that is used to actually open the camera through the open method, which takes the callback functions configured in the step above as a parameter.

Below is an example using the capture of a driver's license (CNH): 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.prepareDocumentCamera(
    config, 
    DocumentCameraTypes.CNH
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
    // confira na aba "Referências" sobre os erros possíveis
  });

Making a POST Request to the Client API

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

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.