The initialize() function

To start the Web OCR SDK, after instantiating the WebOCR class, simply call the initialize() function passing a list of allowed documents as a parameter.

Below is the detail of each of the possible document types to be chosen:

Name	Type	Description
cnh	String	Capture of physical CNH (closed), in two steps, FRONT and BACK
rg	String	Capture of physical RG (closed), in two steps, FRONT and BACK
cin_digital	String	Submission of National Identity Card (CIN) digital (pdf) issued by an official application
rg_digital	String	Submission of digital RG (pdf) issued by an official application
national_registry_of_foreigners	String	Capture of physical RNE, in two steps, FRONT and BACK
national_migration_registry	String	Capture of physical CRNM, in two steps, FRONT and BACK
others	String	Should be used to allow sending other documents besides those listed above

Attention

Adding the others type to the allowed templates causes every document sent to be accepted. Thus, even non-official documents will be accepted.

Implementation Example

An implementation example of the Web OCR SDK can be seen below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="/public/favicon.ico">
    <link rel="stylesheet" href="./demo-styles.css">
    <title>Web OCR</title>
    <script src="https://ocr.caas.qitech.app/3-0-5/ocr.js"></script>
</head>
<body>
    <div id="webOCR"></div>
    <div class="demo-app-container">
        <p>
        Now we will collect images of your document.
        </p>
        <div class="personalDocumentTypesContainer">
            <div class="personalDocumentTypes" onclick="initOCR(['rg', 'cnh', 'rg_digital', 'cnh_digital']);">
                <p>Start document collection</p>
                <img src="./images/personal-document-icon.png" style="width: 100px;">
            </div>
        </div>
    </div>
</body>

<script>
    var htmlComponent = document.getElementById('webOCR')
    var webOCR = new QiTechWebOCR.WebOCR(
        htmlComponent,
        "<WEB_TOKEN>",
        "<SESSION_ID>"
    )
    .setThemeConfiguration(
        {
            "companyLogo": "https://my_company/logo.png",
            "backgroundColor": "#FF9900",
            "fontColor": "#FFFFFF",
            "buttonColor": "#146EB4",
            "fontFamily": "Verdana"
        }
    )
    .setShowInstructionScreen(true)
    .setShowSuccessScreen(true)
    .setShowAllowedTemplatesScreen(true)
    .setSandboxEnvironment()
    .build()

    function initOCR(document_type) {
        webOCR.initialize(document_type)
        .then((ocr_key) => {
            console.log(ocr_key)
        })
        .catch((error) => {
            console.log(error)
        })
    }
</script>
</html>

In the example above, we initially have the instantiation of the WebOCR class, where all mandatory and optional parameters are passed to customize the SDK appearance. With the SDK instantiated, a support function called initOCR() was created, which initializes the SDK with the initialize() function and at the end of the document capture flow, logs the returned ocr_keys or the error, if it occurs. This function is assigned to the onClick callback of a button, allowing the SDK initialization for the desired documents from a button click.

The initialize() function

Implementation Example​

Implementation Example