DocumentDetector (Descontinuado)

Importando SDK

Para usar o DocumentDetector, você pode importar remotamente o .js arquivo ou baixá-lo localmente.

Remotamente

Inclua o .js arquivo diretamente da CDN:

<script
  src="https://repo.combateafraude.com/javascript/release/document-detector/<VERSION>.umd.js"
  type="text/javascript"
></script>

Você pode obter a classe do SDK usando o seguinte código:

const { DocumentDetectorSdk } = window["@combateafraude/document-detector"];

Localmente

Baixe o .js arquivo e importe-o como um módulo ES6:

import { DocumentDetectorSdk } from "../assets/js/document-detector-<VERSION>.js";

Construção

No construtor, o SDK recebe um único parâmetro com as configurações:

const sdk = new DocumentDetectorSdk(options);

Parâmetros suportados

Parâmetro	Obrigatório?
token Token de autenticação para consumir o SDK.	Sim.
language Idioma padrão das mensagens, valores válidos: en_US, en_BR, es_MX.	Não. O padrão é pt_BR
analyticsSettings Objetos de configuração de análise.	Não.
analyticsSettings.disableAnalytics Parâmetro responsável por habilitar ou desabilitar a análise.	Não.
analyticsSettings.trackingId ID único no qual vamos salvar as informações desta execução do SDK.	Não.
analyticsSettings.trackingInfo Aceitamos um objeto de informações.	Não.
environmentSettings.disableDesktopExecution Indica se a execução em desktops deve ser bloqueada.	Não. O padrão é false
capturerSettings.disableAdvancedCapturing Indica se a captura avançada deve ser desativada*.	Não. O padrão é false
appearenceSettings.captureButtonIcon A personalização do ícone de captura aceita valores como URL de imagem ou SVGs em base64.	Não
appearenceSettings.captureIconSize Personalização do tamanho do ícone para o campo captureButtonIcon.	Não
appearenceSettings.captureButtonColor Personalização da cor padrão do botão de captura de imagem.	Não
appearenceSettings.switchButtonIcon A personalização do ícone de troca de câmera aceita valores como URL de imagem ou SVGs em base64.	Não
appearenceSettings.switchIconSize Personalização do tamanho do ícone para o campo switchButtonIcon.	Não
appearenceSettings.switchIconColor Personalização da cor do ícone padrão de troca de câmera.	Não
appearenceSettings.fontFamily Altera a fonte de todos os elementos contidos no SDK.	Não. O padrão é herdado da página
textSettings.messages.processMessage Personalização da mensagem de processamento da imagem.	Não. O padrão é "Processando sua foto, aguarde um momento"
textSettings.messages.wrongDocumentMessage Personalização da mensagem de documento inválido.	Não. O padrão é "Este não é o documento esperado"
textSettings.messages.bothWrongSideMessage Personalização da mensagem de lado incorreto, selecionando a frente ou o verso e capturando ambos os lados.	Não. O padrão é "Por favor, realize a captura com o documento fechado e com o lado correto para a câmera"
textSettings.messages.wrongSideMessage Personalização da mensagem de lado incorreto.	Não. O padrão é "Este não é o lado esperado para este documento"
textSettings.messages.lowQualityMessage Personalização da mensagem de retorno da API para baixa qualidade de imagem.	Não. O padrão é "A qualidade da captura não ficou legal. Certifique-se que está em um ambiente iluminado e tente novamente"
textSettings.messages.captureFailedMessage Personalização da mensagem de falha na captura.	Não. O padrão é "Ops! Tivemos um problema ao processar sua imagem."

* A captura avançada consiste em usar APIs mais complexas e não tão estáveis nos navegadores que oferecem suporte a elas (por exemplo, ImageCapture)

Exemplo

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 permite ao cliente configurar os estágios. Para isso, oferecemos o CaptureStage objeto, no qual você pode definir os seguintes parâmetros:

Parâmetro
mode Modo de captura desejado. Pode ser usado manual, automático ou envio. Na captura manual, um botão será habilitado para o usuário fazer a captura; no envio, a funcionalidade de envio de documentos será exibida em vez da captura.
tentativas O número de tentativas do estágio atual. Se for o único estágio, o valor 0 deve ser passado.
duração Tempo de duração do estágio atual. Se houver mais de um estágio definido, é possível definir o tempo total de cada estágio e, quando o tempo total for atingido, o estágio avançará para o próximo. Defina como 0 se você não quiser definir um tempo para o estágio.

Exemplo de CaptureStage

const stages = [
  { mode: "automatic", attempts: 3, duration: 60 },
  { mode: "manual", attempts: 3, duration: 60 },
  { mode: "upload", attempts: 0, duration: 0 },
];

Inicialização

initialize(): Promise<void>

O SDK possui um método separado de inicialização, para permitir maior controle sobre quando ela ocorre.

Durante essa inicialização, o SDK inicializará suas variáveis internas e baixará os recursos necessários para executar.

[!] Você deve chamar este método antes de usar outros métodos do SDK.

[!] A inicialização do SDK pode levar alguns segundos. Recomendamos que você chame essa função o mais cedo possível no seu fluxo para que a abertura do SDK seja tranquila para o usuário.

Exemplo

await sdk.initialize();

Utilização

Abertura e captura de documentos

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

O método usado para carregar o SDK na tela e realizar a captura do documento.

Ele inicializará o stream (solicitando permissões, se necessário) e o carregará no contêiner.

Parâmetros

Parâmetro	Tipo	Valores válidos
tipo Tipo de documento a ser capturado.	string	any¹, rg, cnh, crlv, rne, passaporte, ctps, outro²
lado⁶ Tipo de documento a ser capturado.	string	frente, verso, both⁴, not_applicable

¹ O tipo any não possui as validações de qualidade e tipo de documento, aceitando assim qualquer lado ou documento - recomendado para documentos não suportados, como a carteira da OAB.

² O tipo outro corresponde a outros documentos (não incluindo os já especificados), como carteiras de vacinação etc.

³ Se não for especificado, é usado um valor padrão de 30 segundos

⁴ O lado both corresponde ao documento exibindo os dois lados na mesma foto (ex.: CNH aberta)

⁵ O lado parâmetro depende do tipo de documento informado em tipo. Veja a tabela abaixo.

Exemplo

// div ou outro elemento no DOM
const sdkContainer = document.getElementById("sdk-displayer");
await sdk.capture(sdkContainer, stages, {
  documentType,
  documentSide,
  totalAttempts,
});

Lados aceitos para cada tipo de documento

Tipo de documento	Lados aceitos
rg	frente, verso, ambos
cnh	frente, verso, ambos
rne	frente, verso
rnm	frente, verso
crlv	not_applicable
ctps	frente, verso
passport	ambos
any	not_applicable
outro	frente, verso, ambos

Retornar

O retorno consiste em um objeto com os seguintes campos:

Campo	Tipo	Descrição
imageUrl	string	Link temporário para a imagem, gerado pela nossa API
imageKey	string	Chave temporária para a imagem
blob	Blob	Blob da imagem capturada
documentType	SupportedDocumentType	Tipo de documento capturado
documentSide	DocumentSide	Lado do documento capturado

Exemplo

const result = sdk.capture(sdkContainer, stages, {
  documentType,
  documentSide,
  totalAttempts,
});
// { imageUrl: '[link da imagem]', blob: Blob, documentType: 'rg', documentSide: 'front' }

Fechar o SDK

close(): Promise<void>

O método usado para remover o SDK da tela, removendo os elementos visuais do SDK do DOM.

Removerá os elementos visuais do SDK do DOM.

Desinicializar o SDK

dispose(): Promise<void>

Método usado para remover o SDK da tela.

Desinicializará o vídeo stream e limpará as variáveis internas do SDK

Exemplo completo

Em breve.