Comment on page

DocumentDetector

Importing SDK
To use DocumentDetector, you can either remotely import the .js file or download it locally.
Remotely
Include the .js file directly from the CDN:
<script
  src="https://repo.combateafraude.com/javascript/release/document-detector/<VERSION>.umd.js"
  type="text/javascript"
></script>
You can retrieve the class from the SDK using the following code:
const { DocumentDetectorSdk } = window["@combateafraude/document-detector"];
Locally
Download the .js file and import it as an ES6 module:
import { DocumentDetectorSdk } from "../assets/js/document-detector-<VERSION>.js";
Construction
In the builder, the SDK receives a single parameter with the settings:
const sdk = new DocumentDetectorSdk(options);
Supported parameters
Parameter
Required?
​token​
Authentication token for consuming the SDK.
Yes.
language
Default message language, valid values: en_US, en_BR, es_MX.
No. The default is pt_BR
analyticsSettings
Analytics Configuration Objects.
No.
analyticsSettings.disableAnalytics
Parameter responsible for enabling or disabling analytics.
No.
analyticsSettings.trackingId
Unique id that we are going to save the information from this SDK execution.
No.
analyticsSettings.trackingInfo
We accept an information object.
No.
environmentSettings.disableDesktopExecution
Flag indicating whether execution on desktops should be blocked.
No. The default is false
capturerSettings.disableAdvancedCapturing
Flag indicating whether advanced capture should be disabled*.
No. The default is false
appearenceSettings.captureButtonIcon
Customization of the capture icon accepts values such as image URL or base64 SVGs.
No
appearenceSettings.captureIconSize
Customization of the icon size for the captureButtonIcon field.
No
appearenceSettings.captureButtonColor
Customization of the default image capture button color.
No
appearenceSettings.switchButtonIcon
Customization of the camera switch icon accepts values such as image URL or base64 SVGs.
No
appearenceSettings.switchIconSize
Customization of the icon size for the switchButtonIcon field.
No
appearenceSettings.switchIconColor
Customization of the color of the default camera switching icon.
No
appearenceSettings.fontFamily
Changes the font for all elements contained in the SDK.
No. The pattern is inherited from the page
textSettings.messages.processMessage
Customization of the image processing message.
No. The default is "Processando sua foto, aguarde um momento"
textSettings.messages.wrongDocumentMessage
Customization of the invalid document message.
No. The default is "Este não é o documento esperado"
textSettings.messages.bothWrongSideMessage
Customization of the incorrect side message by selecting a front or back side and capturing both sides.
No. The default is "Por favor, realize a captura com o documento fechado e com o lado correto para a câmera"
textSettings.messages.wrongSideMessage
Customization of the incorrect side message.
No. The default is "Este não é o lado esperado para este documento"
textSettings.messages.lowQualityMessage
Customization of the API return message for poor image quality.
No. The default is "A qualidade da captura não ficou legal. Certifique-se que está em um ambiente iluminado e tente novamente"
textSettings.messages.captureFailedMessage
Customization of the capture failure message.
No. The default is "Ops! Tivemos um problema ao processar sua imagem."
* Advanced capture consists of using more complex and not-so-stable APIs in browsers that support them (e.g. ImageCapture)
​
Example
const sdk = new DocumentDetectorSdk({
    token: `my-sdk-token`,
​
    language: `pt_BR`,
​
    analyticsSettings: {
        disableAnalytics: false,
        trackingId: '',
        trackingInfo: '',
    },
​
    environmentSettings: {
        disableDesktopExecution: false,
    },
​
    appearenceSettings: {
        hideCaptureTitle: false,
        hideCaptureMask: false,
        hideCameraSwitchButton: false,
        useGenericMask: false,
    },
​
    capturerSettings: {
        disableAdvancedCapturing: false,
    },
​
    textSettings: {
        messages: {
            processMessage: '',
            wrongDocumentMessage: '',
            bothWrongSideMessage: '',
            wrongSideMessage: '',
            lowQualityMessage: '',
            captureFailedMessage: '',
        }
});
​
CaptureStage
CaptureStage allows the client to configure the stages. To do this, we offer the CaptureStage object, where you can set the following parameters:
Parameter
mode
Desired capture mode. It can be used manual, automatic or upload. In the manual capture, a button will be enabled for the user to do the capture, in the upload, the functionality of uploading documents will be displayed instead of capturing.
attempts
The number of attempts of the current stage. If it is the only stage, the value 0 must be passed.
duration
Duration time of the current stage. If more than one stage is set, the total time for each stage can be set, and when the total time is reached, the stage will move on to the next one. Set it to 0 if you don't want to set a time for the stage.
Example CaptureStage
const stages = [
  { mode: "automatic", attempts: 3, duration: 60 },
  { mode: "manual", attempts: 3, duration: 60 },
  { mode: "upload", attempts: 0, duration: 0 },
];
Initialization
initialize(): Promise<void>
The SDK has a separate method of initialization, to allow greater control over when it occurs.
During this initialization, the SDK will initialize its internal variables and download the resources it needs to run.
[!] You must call this method before using other SDK methods.
[!] The initialization of the SDK can take a few seconds. We recommend that you call this function as early as possible in your flow so that opening the SDK is smooth for the user.
Example
await sdk.initialize();
Utilization
Opening and capturing documents
capture(container: HTMLElement, stages, {type: SupportedDocumentType, side: DocumentSide, totalAttempts?: Number}): Promise<Result>
The method used to load the SDK onto the screen and perform document capture.
It will initialize the video stream (requesting permissions if needed) and load it into the container.
Parameters
Parameter
Type
Valid Values
type
Type of document to be captured.
string
any¹, rg, cnh, crlv, rne, passaporte, ctps, other²
side⁶
Type of document to be captured.
string
front, back, both⁴, not_applicable
¹ The type any does not have the validations for quality and document type, thus accepting any side or document - recommended for unsupported documents such as the OAB card.
² The type other corresponds to other documents (not including those already specified), such as vaccination cards, etc.
³ If not specified, a default value of 30 seconds is used
⁴ The side both correspond to the document showing both sides in the same photo (e.g. open CNH)
⁵ The side parameter depends on the type of document entered in type. See the table below.
Example
// div or another element on DOM
const sdkContainer = document.getElementById("sdk-displayer");
await sdk.capture(sdkContainer, stages, {
  documentType,
  documentSide,
  totalAttempts,
});
Accepted sides for each document type
Document type
Accepted sides
rg
front, back, both
cnh
front, back, both
rne
front, back
rnm
front, back
crlv
not_applicable
ctps
front, back
passport
both
any
not_applicable
other
front, back, both
Return
The return consists of an object with the following fields:
Field
Type
Description
imageUrl
string
Temporary link to the image, generated by our API
imageKey
string
Temporary key for the image
blob
Blob
Blob of the captured image
documentType
SupportedDocumentType
Type of captured document
documentSide
DocumentSide
Side of the captured document
Example
const result = sdk.capture(sdkContainer, stages, {
  documentType,
  documentSide,
  totalAttempts,
});
// { imageUrl: '[link of image]', blob: Blob, documentType: 'rg', documentSide: 'front' }
Close SDK
close(): Promise<void>
The method used to remove the SDK on the screen, removing the visual elements of the SDK from the DOM.
Will remove the visual elements of the SDK from the DOM.
De-initialize the SDK
dispose(): Promise<void>
The method used to remove the SDK on the screen.
Will de-initialize the video stream and clear the SDK's internal variables
Complete Example
Soon.

Last modified 4mo ago

Parameter	Required?
`token` Authentication token for consuming the SDK.	Yes.
`language` Default message language, valid values: en_US, en_BR, es_MX.	No. The default is `pt_BR`
`analyticsSettings` Analytics Configuration Objects.	No.
`analyticsSettings.disableAnalytics` Parameter responsible for enabling or disabling analytics.	No.
`analyticsSettings.trackingId` Unique id that we are going to save the information from this SDK execution.	No.
`analyticsSettings.trackingInfo` We accept an information object.	No.
`environmentSettings.disableDesktopExecution` Flag indicating whether execution on desktops should be blocked.	No. The default is `false`
`capturerSettings.disableAdvancedCapturing` Flag indicating whether advanced capture should be disabled*.	No. The default is `false`
`appearenceSettings.captureButtonIcon` Customization of the capture icon accepts values such as image URL or base64 SVGs.	No
`appearenceSettings.captureIconSize` Customization of the icon size for the captureButtonIcon field.	No
`appearenceSettings.captureButtonColor` Customization of the default image capture button color.	No
`appearenceSettings.switchButtonIcon` Customization of the camera switch icon accepts values such as image URL or base64 SVGs.	No
`appearenceSettings.switchIconSize` Customization of the icon size for the switchButtonIcon field.	No
`appearenceSettings.switchIconColor` Customization of the color of the default camera switching icon.	No
`appearenceSettings.fontFamily` Changes the font for all elements contained in the SDK.	No. The pattern is inherited from the page
`textSettings.messages.processMessage` Customization of the image processing message.	No. The default is `"Processando sua foto, aguarde um momento"`
`textSettings.messages.wrongDocumentMessage` Customization of the invalid document message.	No. The default is `"Este não é o documento esperado"`
`textSettings.messages.bothWrongSideMessage` Customization of the incorrect side message by selecting a front or back side and capturing both sides.	No. The default is `"Por favor, realize a captura com o documento fechado e com o lado correto para a câmera"`
`textSettings.messages.wrongSideMessage` Customization of the incorrect side message.	No. The default is `"Este não é o lado esperado para este documento`"
`textSettings.messages.lowQualityMessage` Customization of the API return message for poor image quality.	No. The default is `"A qualidade da captura não ficou legal. Certifique-se que está em um ambiente iluminado e tente novamente"`
`textSettings.messages.captureFailedMessage` Customization of the capture failure message.	No. The default is `"Ops! Tivemos um problema ao processar sua imagem."`

Parameter	Type	Valid Values
`type` Type of document to be captured.	`string`	`any`¹, `rg`, `cnh`, `crlv`, `rne`, `passaporte`, `ctps`, `other`²
`side⁶` Type of document to be captured.	`string`	`front`, `back`, `b`oth⁴, `not_applicable`

Document type	Accepted sides
`rg`	`front`, `back`, `both`
`cnh`	`front`, `back`, `both`
`rne`	`front`, `back`
`rnm`	`front`, `back`
`crl`v	`not_applicable`
`ctp`s	`front`, `back`
`passport`	`both`
`any`	`not_applicable`
`other`	`front`, `back`, `both`

Field	Type	Description
`imageUrl`	`string`	Temporary link to the image, generated by our API
`imageKey`	`string`	Temporary key for the image
`blob`	`Blo`b	Blob of the captured image
`documentType`	`SupportedDocumentType`	Type of captured document
`documentSide`	`DocumentSide`	Side of the captured document

DocumentDetector

Importing SDK

Remotely

Locally

Construction

Supported parameters

Example

CaptureStage

Example CaptureStage

Initialization

`initialize(): Promise<void>`

Example

Utilization

Opening and capturing documents

`capture(container: HTMLElement, stages, {type: SupportedDocumentType, side: DocumentSide, totalAttempts?: Number}): Promise<Result>`

Parameters

Example

Accepted sides for each document type

Return

Example

Close SDK

`close(): Promise<void>`

De-initialize the SDK

`dispose(): Promise<void>`

Complete Example

DocumentDetector

Importing SDK

Remotely

Locally

Construction

Supported parameters

​

Example

​

CaptureStage

Example CaptureStage

Initialization

initialize(): Promise<void>

Example

Utilization

Opening and capturing documents

capture(container: HTMLElement, stages, {type: SupportedDocumentType, side: DocumentSide, totalAttempts?: Number}): Promise<Result>

Parameters

Example

Accepted sides for each document type

Return

Example

Close SDK

close(): Promise<void>

De-initialize the SDK

dispose(): Promise<void>

Complete Example

`initialize(): Promise<void>`

`capture(container: HTMLElement, stages, {type: SupportedDocumentType, side: DocumentSide, totalAttempts?: Number}): Promise<Result>`

`close(): Promise<void>`

`dispose(): Promise<void>`