MobbScan Web: Introduction · Mobbeel for developers

Introduction

MobbScan uses a set of methods and listeners to allow flexibility during the integration of the library in a web application.

The basic workflow consists on:

Initialize the API
Add listeners
Start MobbScan
Wait to receive document detections
Process detections until you have enought data

Basic example

Let's explain it with an example: the scan of both sides of a Spanish ID.

First of all, once you have installed MobbScan, add a div element in your HTML code:

<div id="mobbscan-placeholder"></div>

In Javascript, create two variables to store the front and back document images:

let frontImage, backImage;

After that, initialize the SDK:

MobbScanAPI.initAPI('YOUR_LICENSE_HERE');
MobbScanAPI.setBaseURL("https://yourmobbscaninstance.yourcompany.com");
MobbScanAPI.setPlaceholder('mobbscan-placeholder');
MobbScanAPI.setDetectionListener(onDetection);

onDetection is a function that will be called everytime a video frame has been analyzed. In our example, let's implement it as follows (error handling is removed for the sake of clarity):

const onDetection = (result, data, error) => {
    // Check if some side has been detected
    if (result === MobbScanDetectionResult.DETECTED) {
        // Depending on the side, the image is saved in frontImage or backImage
        if (data.side === MobbScanDocumentSide.FRONT) {
            frontImage = data.image;
        } else if (data.side === MobbScanDocumentSide.BACK) {
            backImage = data.image;
        }

        // If both sides have been detected, it can be considered that the entire document has been detected
        if (frontImage && backImage) {
            console.log('Document detected!');
        }
    }
}

Once the onDetection listener is created, start MobbScan:

MobbScanAPI.start(
    MobbScanDocumentType.ESPIDCard,
    MobbScanOperationMode.SCAN_BOTH_SIDES,
    (result, resultData, error) => console.log('API has started with scan id: ', resultData.scanId));

With MobbScanAPI.start a new scan process is initialized, with a unique scanId associated to it. This function also renders two elements in the #mobbscan-placeholder HTML element, one per each document side. When clicked, those elements start the detection of a document using a camera, and onDetection will be called for each analyzed frame.

However, the example is not finished. Once both document sides have been detected, we should send them to MobbScan Server so it can perform additional checks about the document authenticity. Let's modify the onDetection function:

const onDetection = (result, data, error) => {
    if (result === MobbScanDetectionResult.DETECTED) {
        if (data.side === MobbScanDocumentSide.FRONT) {
            frontImage = data.image;
        } else if (data.side === MobbScanDocumentSide.BACK) {
            backImage = data.image;
        }

        if (frontImage && backImage) {
            console.log('Document detected!');
            // 👀 Here goes the new code
            MobbScanAPI.scan(frontImage, backImage, (result, data, error) => {
                if (result === MobbScanScanResult.OK) {
                    console.log('Document checked succesfully!');
                }
            });
        }
    }
}

A new method has been introduced: scan, that will send both detected images and call the callback passed as third argument when it finishes all the checks.

This is a simple example of how MobbScan can be integrated in your web application. Please, check the following documents for further details and how to enable features like: