Cordova Integration with Veryfi Lens for Your Mobile App

April 27, 2023

5 mins read

Cordova Integration with Veryfi Lens for Your Mobile App

Test Drive It Now
Related Knowledge

An Easy Build with Cordova for Structured Data in Seconds

In 1935, LEGO’s first construction toy was created using a few pieces of wood assembled to form a duck. This simple toy laid the foundation for a building block idea that has become the hobby of millions and is present in countless homes worldwide. We’re applying this same concept to AI-driven OCR technology. Hold onto your bricks, we’re about to build some knowledge together (sorry, we had to)!

LEGO and OCR technology may seem like two very different things, but they actually have some similarities. Just as LEGO pieces can be assembled in countless ways to create different structures, OCR technology can extract and assemble data from various sources, such as receipts and invoices, to create organized and accurate records.

Both LEGO and OCR technology rely on small pieces coming together to form a larger whole. LEGO pieces allow for endless possibilities and creativity, while OCR technology’s data extraction and assembly abilities make it a valuable tool for businesses to streamline their processes and make better use of their resources. In short, both LEGO and OCR technology demonstrate the power of using small components to build something bigger and better.

Add the Best Data Extraction in Seconds

Veryfi is the valuable LEGO kit that enhances your project with cutting-edge image processing technology. This “kit” includes everything you need, including instructions, and can be used to build other projects like APIs. We provide what your project needs to create amazing things, just as LEGO did by assembling pieces together almost 100 years ago.

Wondering why Veryfi is beneficial for your project? Traditionally, companies invest time and money in data extraction from receipts, invoices, and bank checks. Large groups of people digitize information from each document, which then undergoes the accounting process. Veryfi reduces human effort and time in this task. Our advanced AI-driven OCR technology quickly extracts data with little effort and high certainty, making it available for processing.

Avoid Building from Scratch

When faced with adding OCR to your project, you may be faced with the question “do we build it ourselves or use a pre-built solution?” To answer that question, let’s first look at what building an AI solution entails. Think of it like trying to build the 7500+ piece Millenium Falcon without instructions. Sure, you may finish it eventually. It may not look perfect, there may be some leftover parts, it may have taken months, but it resembles the iconic starship. The result is a less than stellar outcome with no one making any bids for this on eBay.

Use Veryfi to Complete the Perfect Build the First Time

So what does implementing OCR data extraction look like using Veryfi? It’s as easy as following the instructions with the LEGO kit provided to you. There’s nothing included you don’t need, and with a fast and accurate execution, you can work on other tasks.

Let’s use our same analogy of building the LEGO Millennium Falcon. Rather than guessing where the bricks go, you could spend that same amount of time, building both the Millenium Falcon and Star Destroyer (which, by the way, took this person 70+ hours) along with learning how to make your own beer, and starting a band using only Otamatones (a Japanese musical instrument that’s shaped like a musical note and sounds like a theremin). Okay, now that you get the idea of how much time and effort Veryfi saves you, we’ll show you the “instruction guide” to the Veryfi Lens for Mobile build – Cordova edition.

Your Veryfi Lens Builder’s Instructions

Now that you understand how Veryfi Lens for Mobile works and its benefits, consider adding to integrate it into your project, let’s read the instructions on adding Veryfi Lens for Mobile to your app using Cordova.

Brick 1: Adding to Your Cordova Project

First, configure the npm registry location and credentials:

npm config set @veryfi:registry https://nexus.veryfi.com/repository/npm/
npm config set _auth $(echo -n '[NPM_USERNAME]:[NPM_PASSWORD]' | openssl base64 -A) --registry=https://nexus.veryfi.com/repository/npm

Then add the plugin to your Cordova project:

cordova plugin add @veryfi/cordova-plugin-veryfi-lens@[VERSION]

For iOS project specific configurations you should visit: https://hub.veryfi.com/lens/docs/cordova/#configuration-ios

For Android project specific configurations you should visit: https://hub.veryfi.com/lens/docs/cordova/#configuration-android

Brick 2: Authentication Credentials

Configure your authentication credentials.

var clientId = "XXX"; // replace XXX with your assigned Client Id
var username = "XXX"; // replace XXX with your assigned Username
var apiKey = "XXX";   // replace XXX with your assigned API Key
var url = "XXX";      // replace XXX with your assigned Endpoint URL

Brick 3: Configure

Configure your Veryfi Lens settings.

var settings = {
    blurDetectionIsOn: true,
    autoLightDetectionIsOn: false,
    backupDocsToGallery: true,
    autoDocDetectionAndCropIsOn: true,
    showDocumentTypes: true,
    documentTypes: ['long_receipt', 'receipt'],
    moreMenuIsOn: true,
    categories: ["Meals", "Entertainment", "Job supplies"],
    originalImageMaxSize: 2.0,
    stitchedPDFPixelDensityMultiplier: 2.0
};

Brick 4: Initialize

Initialize Veryfi Lens.

var isDebug = true;   // if true, will print detailed debug information to the console log
cordova.plugins.Veryfi.Lens.init(isDebug, url, clientId, username, apiKey, settings);

Brick 5: Communicate

Communicate with Veryfi Lens.

// Callback function for handling all Lens events
function lensEventCallback(data) {
    var jsonObject = JSON.parse(data);
    if (jsonObject.event === "veryfi_lens_close") {
        console.log("veryfi_lens_close data: " + data);
    }
    if (jsonObject.event === "veryfi_lens_update") {
        console.log("veryfi_lens_update data: " + data);
    }
    if (jsonObject.event === "veryfi_lens_error") {
        console.log("veryfi_lens_error data: " + data);
    }
    if (jsonObject.event === "veryfi_lens_success") {
        console.log("veryfi_lens_success data: " + data);
    }
}

// Callback function for capturing Veryfi Lens Camera errors
function lensErrorCallback(data) {
  console.log("showCamera error: " + data);
}

Brick 6: Launch

Launch Veryfi Lens

cordova.plugins.Veryfi.Lens.showCamera(lensEventCallback, lensErrorCallback);

If you want to check out more documentation on Veryfi Lens using Cordova, you can go here. After following along with our simple, six-brick build, now you have Veryfi Lens technology up and running to build amazing things! The limit is endless…

If you don’t have access to our Hub, please contact our sales team, sales@veryfi.com, to learn more about Veryfi’s awesome products.