Document Capture

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

---

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.

The SDK does not perform any validation of what is being captured.

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.

The functionality of the frame can often be affected by certain design systems that have some type of grid system, such as Bootstrap or Material-UI. To minimize this risk, make sure to position the frame (id="box-camera") in a part of the code that does not inherit unwanted CSS rules.

Desktop

For Web Desktop versions, it is possible to restrict the size of the frame so that it does not take up the entire dimension of your WebApp. To do this, simply wrap the frame (id="box-camera") in another HTML tag, as shown below:

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

Ideally, you should try to maintain an appropriate aspect ratio between height and width, which will make it easier to frame the user's face. Here’s an example:

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

Following the example above, the frame respects the size of the parent element, represented here by the container. This way, you have the flexibility to implement the frame in the most convenient manner for your application (such as in a modal, for example).

Testing by resizing the screen through your browser's developer mode does not work. It is recommended that this type of testing be done by resizing the window of your browser.

Mobile

For a Web Mobile view, it is recommended that the capture frame occupies 100% of the screen to avoid issues with computer vision algorithms. If the capture area is distorted, the automatic capture functionality (Smart Camera) may experience problems with face tracking calculations.

Therefore, it is recommended that in the Web Mobile view:

• The capture frame occupies 100% of the device screen (100vw/vh);

• Avoid horizontal or vertical scrolling (this can be minimized with a modal);

Testing devices using your browser's developer mode does not work, as the camera used by your browser is the same as that of your desktop, which has a completely different resolution than a mobile device's camera. We recommend that this type of testing be conducted directly on the device.

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.

Parameter	Description
DocumentCameraTypes.CPF	Capture the front of the CPF
DocumentCameraTypes.CNH	Capture the open CNH
DocumentCameraTypes.CNH_FRENTE	Capture the front of the CNH
DocumentCameraTypes.CNH_VERSO	Capture the back of the CNH
DocumentCameraTypes.RG_FRENTE	Capture the front of the RG
DocumentCameraTypes.RG_VERSO	Capture the back of the RG
DocumentCameraTypes.RG_FRENTE_NOVO	Capture the front of the new RG
DocumentCameraTypes.RG_VERSO_NOVO	Capture the back of the new RG
DocumentCameraTypes.OTHERS("descrição")	Capture any other document

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

If you need to capture a document for which there is no specific frame (e.g., RNE, among others), use the DocumentCameraType.None frame, which will allow you to use a generic rectangular frame to guide any capture.

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.