Document capture

Capture of identity documents. The SDK presents a frame to assist the user in positioning the document; after positioning, the user clicks the button to capture the photo.

No content validation

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

Available document frames

Frame	Description
`DocumentCameraTypes.CPF`	Capture 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")`	Generic frame for any other document

Generic frame

If you need to capture a document for which there is no specific frame (e.g., RNE), use DocumentCameraTypes.OTHERS("description") — a generic, rectangular frame that can be used to guide any capture.

For the full list of supported document types, see API Reference > Enums.

Frame size

It is recommended to configure the size of the frame within your application to optimize the capture area.

CSS interference

Frame functionality can be affected by design systems with grid components (Bootstrap, Material-UI, etc.). To minimize this risk, position the frame (id="box-camera") where it does not inherit unwanted CSS rules.

Desktop
Mobile

Wrap the frame in a parent element to constrain its dimensions:

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

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

Maintain a proper height-to-width ratio to make framing the user's face easier.

Dev tools resizing

Tests involving resizing the screen through the browser's developer mode will not work as expected. Resize your browser window directly instead.

For Web Mobile views, the capture frame should occupy 100% of the device screen (100vw/100vh) to avoid issues with the computer vision algorithms. Avoid horizontal or vertical scrolling — using a modal helps minimize this.

Test on physical devices

Testing using browser developer mode does not work — the camera used by the browser is the same as the desktop camera, with very different resolution from a mobile device camera. Test directly on the device.

Starting a document capture

Step 1 — Implement the callback object

The Web SDK uses a callback object — passed to open() — to handle success and error events. Both handlers are mandatory:

Handler	When it's called
`on.success(obj)`	Capture completed successfully — receives an object with `base64` and `encrypted`
`on.error(error)`	An error occurred during the session — receives an `ErrorBio`

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

Mandatory callback

The callback object is mandatory. If not properly implemented (covering both success and error events), the SDK raises an exception that, if not handled, is displayed in the user's console.

Step 2 — Build the camera and prepare the document session

Build the camera instance and call prepareDocumentCamera passing the UnicoConfig and the desired DocumentCameraTypes:

const unicoCamera = unicoCameraBuilder.build();

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

unicoCamera.prepareDocumentCamera(
  config,
  DocumentCameraTypes.CNH
).then(cameraOpener => {
  cameraOpener.open(callback);
}).catch(error => {
  console.error(error);
});

For the full result handling, see Receiving the result.