> 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/document-detector/documentdetector.md). # Primeiros passos ## **Requisitos** Antes de começar a usar o SDK Document Detector, você precisará ter o seguinte: * Um token de acesso Caf válido para autenticar o SDK (consulte [esta documentação](https://docs.caf.io/sdks/sdk_integration_documentation) para mais informações). * Um arquivo HTML com uma `` tag. O SDK renderizará a interface de detecção de documentos nessa tag. ## **Importando o SDK** 1. Baixe o **`.umd.js`** arquivo: [document-detector-7.0.0.umd.js](https://repo.combateafraude.com/javascript/release/document-detector/7.0.0/document-detector-7.0.0.umd.js) 2. Baixe o **`.wasm`** arquivo: [dd-validator.wasm](https://repo.combateafraude.com/javascript/release/document-detector/7.0.0/dd-validator.wasm) 3. Coloque ambos os arquivos no mesmo diretório (por exemplo, **`public/sdks/caf-dd/`**). 4. Importe o **`.umd.js`** arquivo no seu arquivo HTML. Por exemplo (assumindo um **`public/index.html`** arquivo): ```html ``` 5. Importe o SDK como um módulo JavaScript em uma tag script: ```html ``` ## Construção e uso Para usar o SDK Document Detector, você precisará criar uma instância da classe DocumentDetector. Essa classe permitirá inicializar o SDK, capturar documentos e fechar o SDK. Você também pode passar opções para o SDK para personalizar seu comportamento. No construtor, o SDK recebe um único parâmetro com as configurações: ```javascript const sdk = new DocumentDetector(options); ``` Esse parâmetro é um objeto que contém as opções de configuração do SDK. Essas opções personalizam o comportamento do SDK de acordo com os requisitos da sua aplicação. A tabela a seguir lista as opções disponíveis:
ParâmetroTipoObrigatório?Valor padrão

token

Token de autenticação para consumir o SDK.

StringSim.-

language

Idioma padrão das mensagens, valores válidos: en_US, pt_BR, es_MX.

StringNão.pt_BR

blockExecutionOnDesktops

Sinalizador indicando se a execução em desktops deve ser bloqueada ou não

booleanNão.false

enableVisibilityChangeSecurity

Ativa a melhoria de segurança responsável por fechar o SDK quando o usuário alterna entre abas do navegador.

booleanNão.false

enableFramingAnalyzer

Ativa ou desativa a análise de enquadramento guiada por IA.

Quando ativado, o SDK usa um modelo de IA para analisar o fluxo da câmera e fornecer feedback em tempo real ao usuário, orientando-o a ajustar a posição e a orientação do documento para uma captura ideal.

Quando desativado, o SDK força o modo de captura para "manual" e não realiza nenhuma análise de enquadramento guiada por IA. O frame é capturado e enviado diretamente ao nosso backend para processamento. Essa abordagem pode reduzir a qualidade da imagem, mas melhora significativamente o desempenho.

Considere desativar esta opção se precisar otimizar o desempenho do SDK em dispositivos com recursos limitados e o caso de uso da sua aplicação priorizar a quantidade de capturas em vez da qualidade.

booleanNão.true

analytics

Especifica as configurações de analytics do SDK. Este parâmetro permite configurar o rastreamento analítico dentro do SDK.

ObjetoNão.ver tabela

appearance

Especifica as configurações de aparência da interface do usuário (UI) do SDK. Este parâmetro permite personalizar a aparência visual dos componentes do SDK para combinar com o visual da sua aplicação.

Aprimorado na v6.8.3: Agora usa um formato de objeto aninhado para melhor organização e legibilidade.

ObjetoNão.ver tabela

messages

Personaliza as mensagens exibidas no SDK para otimizar a experiência do usuário.

Aprimorado na v6.8.3: Agora usa um formato de objeto aninhado para melhor organização e legibilidade.

ObjetoNão.ver tabela
### **Formato de configuração** A partir da versão 6.8.3, o SDK usa um **formato de objeto aninhado** para configurar as opções de aparência e mensagens, o que proporciona melhor organização e legibilidade: ```javascript appearance: { general: { fontFamily: "arial", closeButtonIconColor: "#FFFFFF", }, capture: { captureButtonIconSize: "100%", captureButtonColor: "#FFFFFF", hideCaptureTitle: false, }, upload: { backgroundColor: "#BDBDBD", card: { backgroundColor: "#FFFFFF", }, startScreen: { title: { color: "#323232" }, details: { color: "#828282" }, allowButton: { backgroundColor: "#323232", label: { color: "#FFFFFF" } } }, loadingScreen: { icon: { color: "#000000" }, text: { color: "#323232" } }, failureScreen: { icon: { color: "#E21B45", shadowColor: "#FFE4E6" }, title: { color: "#323232" }, details: { color: "#828282" }, retryButton: { backgroundColor: "#E21B45", label: { color: "#FFFFFF" } } }, successScreen: { icon: { color: "#0BAA43", shadowColor: "#DAFEE5" }, text: { color: "#0BAA43" } } } } ``` {% hint style="info" %} Se você estiver atualizando a partir de uma versão anterior, suas configurações existentes com notação de ponto (por exemplo, `"general.fontFamily": "arial"`) continuarão funcionando. No entanto, recomendamos migrar para o formato de objeto aninhado para uma melhor organização do código. {% endhint %} ### **Exemplo** **index.html** ```html Detector de Documentos ``` **index.js** ```javascript const options = { token: "Meu token de acesso", language: "pt_BR", blockExecutionOnDesktops: false, enableVisibilityChangeSecurity: false, enableFramingAnalyzer: true, analytics: { enabled: true, trackingId: "Meu ID de rastreamento", trackingInfo: { myProp: "Minhas informações de rastreamento", }, enableDebugMode: false, }, appearance: { general: { fontFamily: "arial", closeButtonIconColor: "#FFFFFF", }, capture: { captureButtonIconSize: "100%", captureButtonColor: "#FFFFFF", hideCaptureTitle: false, }, upload: { backgroundColor: "#BDBDBD", card: { backgroundColor: "#FFFFFF", }, startScreen: { title: { color: "#323232" }, details: { color: "#828282" }, allowButton: { backgroundColor: "#323232", label: { color: "#FFFFFF" }, }, }, loadingScreen: { icon: { color: "#000000" }, text: { color: "#323232" }, }, failureScreen: { icon: { color: "#E21B45", shadowColor: "#FFE4E6" }, title: { color: "#323232" }, details: { color: "#828282" }, retryButton: { backgroundColor: "#E21B45", label: { color: "#FFFFFF" }, }, }, successScreen: { icon: { color: "#0BAA43", shadowColor: "#DAFEE5" }, text: { color: "#0BAA43" }, }, }, }, }; const documentDetector = new DocumentDetector(options); // Este método é opcional, mas pode melhorar significativamente a // experiência de carregamento do SDK. Recomendamos usá-lo o mais cedo possível em seu // fluxo, até mesmo antes de chegar à tela de carregamento do SDK. No entanto, se isso // não for viável ou não estiver alinhado com a natureza do seu fluxo ao // integrar o SDK, o método initialize cuidará de tudo // necessário para garantir que o SDK funcione corretamente sem a necessidade deste método. await documentDetector.loadAiModel(); // Agora que a câmera foi permitida, podemos inicializar o SDK await documentDetector.initialize(); // Agora que o SDK foi inicializado, podemos iniciar o processo de captura // Este é o momento em que o SDK será exibido ao usuário por meio de um modal // O processo de captura será iniciado e o usuário poderá capturar o documento // O método de captura retorna uma promise que é resolvida quando o processo de captura termina const captureResult = await documentDetector.capture({ expectedDocument: "cnh_front", mode: "automatic", automaticCaptureMaxDuration: 30, personID: "my-person-id", }); // Agora podemos fechar o SDK para parar de exibi-lo await documentDetector.close(); // E descarte o SDK para liberar recursos await documentDetector.dispose(); ``` ### **Tratamento de erros de construção** | Nome do erro | Descrição | | ---------------------- | --------------------------------------------------------------------------------- | | CafSdkBuildError | Ocorreu um erro durante a construção do SDK. | | CafSdkBlockedError | A construção do SDK foi bloqueada. | | CafInvalidOptionsError | As opções de construção do SDK são inválidas. Revise as opções fornecidas ao SDK. | | CafUnsupportedError | O SDK não é suportado neste dispositivo, navegador ou sistema operacional. | **Exemplo** ```javascript try { const sdk = new DocumentDetector(options); } catch (error) { switch (error.name) { case "CafSdkBuildError": console.error("Erro na construção do SDK:", error.message); break; case "CafSdkBlockedError": console.error("Erro de bloqueio do SDK:", error.message); break; case "CafInvalidOptionsError": console.error("Erro de opções inválidas:", error.message); break; case "CafUnsupportedError": console.error("Erro não suportado:", error.message); break; default: console.error("Erro inesperado de construção:", error.name, error.message); } } ``` Para mais informações sobre os métodos e propriedades do SDK, confira os [métodos do SDK](/caf-sdk/caf-sdk-pt-br/web-javascript/getting-started/document-detector/methods.md) . --- # 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/document-detector/documentdetector.md?ask=&goal= ``` `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.