Implementação

A função startOcr abre o fluxo nativo de captura de documento, envia as imagens para a API de OCR da QI Tech e devolve as chaves das imagens processadas.

Mobile Token

Utilizamos um Mobile Token para permitir o acesso autenticado do seu aplicativo à nossa API. Ele provavelmente já foi enviado por e-mail para você. Caso ainda não tenha recebido o seu token, envie um e-mail para suporte.caas@qitech.com.br.

Atenção

Cada ambiente (SANDBOX e PRODUCTION) exige um Mobile Token diferente.

Assinatura da função

const result = await startOcr(
  environment,   // CAAS_ENVIRONMENT
  mobile_token,  // string
  document,      // CAAS_DOCUMENT_TYPE
  options        // OcrOptions (opcional)
);

As customizações são opcionais e passadas pelo objeto options, descrito em O objeto OcrOptions.

Exemplo mínimo

import { CAAS_ENVIRONMENT, CAAS_DOCUMENT_TYPE, startOcr } from '@qitech/react-native-caas';

const response = await startOcr(
  CAAS_ENVIRONMENT.SANDBOX,
  '<YOUR_MOBILE_TOKEN_SENT_BY_QITECH>',
  CAAS_DOCUMENT_TYPE.CNH
);

const { DocumentRecognitionResponse } = JSON.parse(response);
console.log(DocumentRecognitionResponse);

Atenção

A Promise de startOcr resolve com uma string JSON, não com um objeto. É necessário chamar JSON.parse() no retorno. Veja Coletando os Retornos.

Exemplo completo

import * as React from 'react';
import { View, Button } from 'react-native';
import {
  CAAS_ENVIRONMENT,
  CAAS_DOCUMENT_TYPE,
  CAAS_FONT_FAMILY,
  CAAS_LOG_LEVEL,
  startOcr,
} from '@qitech/react-native-caas';

const config = {
  ocrMobileToken: '<YOUR_MOBILE_TOKEN_SENT_BY_QITECH>',
  environment: CAAS_ENVIRONMENT.SANDBOX,
  sessionId: '<SESSION_ID>',
  fontColor: '#5dcfe3',
  backgroundColor: '#f5f3f0',
  fontFamily: CAAS_FONT_FAMILY.VERDANA,
  showIntroductionScreens: true,
  showSuccessScreen: true,
  logLevel: CAAS_LOG_LEVEL.DEBUG,
};

export default function App() {
  const [documentType] = React.useState<CAAS_DOCUMENT_TYPE>(CAAS_DOCUMENT_TYPE.CNH);

  const startDocumentOcr = () => {
    startOcr(config.environment, config.ocrMobileToken, documentType, {
      session_id: config.sessionId,
      font_color: config.fontColor,
      background_color: config.backgroundColor,
      font_family: config.fontFamily,
      show_introduction_screens: config.showIntroductionScreens,
      show_success_screen: config.showSuccessScreen,
      onboarding_text_configuration: {
        onboarding_title: 'Dicas Importantes',
        onboarding_first_label: 'Vá para um local iluminado',
        onboarding_second_label: 'Retire o documento do plástico',
        onboarding_third_label: 'Garanta que o documento está corretamente enquadrado',
      },
      log_level: config.logLevel,
    })
      .then((response) => {
        const { DocumentRecognitionResponse } = JSON.parse(response as string);

        if (DocumentRecognitionResponse.length === 1) {
          const { ocr_key, document_type } = DocumentRecognitionResponse[0];
          console.log('Ocr key: ' + ocr_key + ' document type: ' + document_type);
        } else if (DocumentRecognitionResponse.length === 2) {
          // Fluxos de frente e verso retornam duas chaves, uma para cada foto
          const { ocr_front_key } = DocumentRecognitionResponse[0];
          const { ocr_back_key } = DocumentRecognitionResponse[1];
          console.log('Ocr front key: ' + ocr_front_key + ' / Ocr back key: ' + ocr_back_key);
        }
      })
      .catch((error) => {
        console.log('Error executing Ocr. Error: ' + error);
      });
  };

  return (
    <View>
      <Button title="Start OCR" onPress={startDocumentOcr} />
    </View>
  );
}

Fluxo de captura por tipo de documento

O parâmetro document define quantas capturas o usuário realizará e, consequentemente, quantos itens o retorno conterá.

Tipo de documento	Capturas	Retorno
CAAS_DOCUMENT_TYPE.CNH_FULL	1 (CNH aberta)	1 item com ocr_key
CAAS_DOCUMENT_TYPE.CNH_DIGITAL	1 (PDF da CNH digital)	1 item com ocr_key
CAAS_DOCUMENT_TYPE.ADDRESS	1 (comprovante de residência)	1 item com ocr_key
CAAS_DOCUMENT_TYPE.RG_CIN_DIGITAL	1 (PDF do RG/CIN digital)	1 item com ocr_key
CAAS_DOCUMENT_TYPE.CNH	2 (frente e verso)	2 itens: ocr_front_key e ocr_back_key
CAAS_DOCUMENT_TYPE.RG	2 (frente e verso)	2 itens: ocr_front_key e ocr_back_key
CAAS_DOCUMENT_TYPE.RNE	2 (frente e verso)	2 itens: ocr_front_key e ocr_back_key
CAAS_DOCUMENT_TYPE.CRNM	2 (frente e verso)	2 itens: ocr_front_key e ocr_back_key

Aplicativos de exemplo

O repositório do módulo contém dois aplicativos prontos para execução, na pasta examples:

• QITechReactNativeExample — React Native puro
• QITechExpoExample — Expo

Em ambos, o arquivo App.tsx demonstra o uso completo (Reconhecimento facial + OCR + Scan de dispositivo) com o @qitech/react-native-caas, e o App_ds.tsx demonstra o uso apenas do Scan de dispositivo com o @qitech/react-native-device-scan. Substitua os tokens e API Keys de exemplo pelas suas credenciais. Caso ainda não as tenha recebido, entre em contato com o suporte.caas@qitech.com.br.