> For the complete documentation index, see [llms.txt](https://docs.caf.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.caf.io/caf-sdk/caf-sdk-pt-br/web-javascript/getting-started/documentdetector-deprecated.md).

# DocumentDetector (Obsoleto)

## **Importando SDK** <a href="#aekkocn01unh" id="aekkocn01unh"></a>

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

## **Remotamente** <a href="#id-1lsejj1r80qd" id="id-1lsejj1r80qd"></a>

Inclua o **`.js`** arquivo diretamente da CDN:

```html
<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:

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

## **Localmente** <a href="#id-6cq4i9y5nrgt" id="id-6cq4i9y5nrgt"></a>

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

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

## **Construção** <a href="#xtquz7g7g6lm" id="xtquz7g7g6lm"></a>

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

```javascript
const sdk = new DocumentDetectorSdk(options);
```

### Parâmetros suportados <a href="#id-406kz8934mrz" id="id-406kz8934mrz"></a>

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

\* 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](https://developer.mozilla.org/pt-BR/docs/Web/API/ImageCapture))

#### &#x20;<a href="#gw3auh2c9d0" id="gw3auh2c9d0"></a>

#### **Exemplo** <a href="#id-9gtiu9rxgzn0" id="id-9gtiu9rxgzn0"></a>

```javascript
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: '',
        }
});
```

#### &#x20;<a href="#cltsgpblpz5x" id="cltsgpblpz5x"></a>

### **CaptureStage** <a href="#av30ro16qapb" id="av30ro16qapb"></a>

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**                                                                                                                                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong><code>mode</code></strong></p><p>Modo de captura desejado. Pode ser usado <code>manual</code>, <code>automático</code> ou <code>envio</code>. 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.</p>            |
| <p><strong><code>tentativas</code></strong></p><p>O número de tentativas do estágio atual. Se for o único estágio, o valor <code>0</code> deve ser passado.</p>                                                                                                                                                                       |
| <p><strong><code>duração</code></strong></p><p>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 <code>0</code> se você não quiser definir um tempo para o estágio.</p> |

#### **Exemplo de CaptureStage**

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

## **Inicialização** <a href="#id-1htcytapji7o" id="id-1htcytapji7o"></a>

#### `initialize(): Promise<void>` <a href="#tcfegfh5qva1" id="tcfegfh5qva1"></a>

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** <a href="#elaunum4nir7" id="elaunum4nir7"></a>

```javascript
await sdk.initialize();
```

## **Utilização** <a href="#q1lp2ulo8qkn" id="q1lp2ulo8qkn"></a>

## **Abertura e captura de documentos** <a href="#oj0dm4r8mjmf" id="oj0dm4r8mjmf"></a>

#### `capture(container: HTMLElement, stages, {type: SupportedDocumentType, side: DocumentSide, totalAttempts?: Number}): Promise<Result>` <a href="#igdklm242d81" id="igdklm242d81"></a>

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** <a href="#dnhfo3i45mlr" id="dnhfo3i45mlr"></a>

| **Parâmetro**                                                                       | **Tipo** | **Valores válidos**                                                |
| ----------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------ |
| <p><strong><code>tipo</code></strong></p><p>Tipo de documento a ser capturado.</p>  | `string` | `any`¹, `rg`, `cnh`, `crlv`, `rne`, `passaporte`, `ctps`, `outro`² |
| <p><strong><code>lado⁶</code></strong></p><p>Tipo de documento a ser capturado.</p> | `string` | `frente`, `verso`, `b`oth⁴, `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 b`oth` 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** <a href="#u8cwua14j6dx" id="u8cwua14j6dx"></a>

```javascript
// 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** <a href="#ihooxb712jt8" id="ihooxb712jt8"></a>

| **Tipo de documento** | **Lados aceitos**          |
| --------------------- | -------------------------- |
| `rg`                  | `frente`, `verso`, `ambos` |
| `cnh`                 | `frente`, `verso`, `ambos` |
| `rne`                 | `frente`, `verso`          |
| `rnm`                 | `frente`, `verso`          |
| `crl`v                | `not_applicable`           |
| `ctp`s                | `frente`, `verso`          |
| `passport`            | `ambos`                    |
| `any`                 | `not_applicable`           |
| `outro`               | `frente`, `verso`, `ambos` |

### **Retornar** <a href="#kljr8xjrhk7y" id="kljr8xjrhk7y"></a>

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`         | `Blo`b                  | Blob da imagem capturada                             |
| `documentType` | `SupportedDocumentType` | Tipo de documento capturado                          |
| `documentSide` | `DocumentSide`          | Lado do documento capturado                          |

### **Exemplo** <a href="#id-455coz4wwu1e" id="id-455coz4wwu1e"></a>

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

## **Fechar o SDK** <a href="#pv00sfpu3rlj" id="pv00sfpu3rlj"></a>

### `close(): Promise<void>` <a href="#uijycg1hntq7" id="uijycg1hntq7"></a>

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** <a href="#c5wlx96xzrju" id="c5wlx96xzrju"></a>

### `dispose(): Promise<void>` <a href="#id-4ctiwximmxh9" id="id-4ctiwximmxh9"></a>

Método usado para remover o SDK da tela.

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

### **Exemplo completo** <a href="#id-2zrcvrqvbcp0" id="id-2zrcvrqvbcp0"></a>

Em breve.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.caf.io/caf-sdk/caf-sdk-pt-br/web-javascript/getting-started/documentdetector-deprecated.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.