How To Scan US Driver’s License and Passport With Pixlab’s “Docscan” API | by Hrishikesh Pathak | Nov, 2022

Use AI in Your JavaScript Web Apps

photo by levi ventura Feather unsplash

If you are running a business where you need to check and record US driver’s licenses and passports, it is very tedious to manually enter their details into your system. This work requires a huge amount of human labor and for this you have to spend a lot of money.

What if I tell you that there is an AI service that you can use to automatically scan those driving license documents and extract the details in fraction of seconds? Yes, you are listening right. In the era of AI and Machine Learning, you no longer have to do manual labor and automate the entire repetitive process.

This document scanning facility is not limited to driving license only but expands its horizon to many other types of documents including e-KYC, face extraction etc.

In this blog, I will explain you step-by-step details on how to scan a US driver’s license and extract information from it.

Let me make one thing very clear that it is possible to build such an AI system in-house to meet your needs. But this would be extremely costly both in terms of money and time. So I suggest you to use AI service to use those advanced features from day one.

In this article, I’m going to use Pixlab To scan driving license. PixLab is a Software as a Service (SaaS) that provides easy-to-use AI services to individuals and businesses.

be sure to get a Pixlab API Key To follow along

Here I will use a Node.js server and create a simple Rest API to communicate Pixlab API Endpoints, Pixlab APIs are not accessible from your web browser environment due to CORS restrictions. So, to test any feature of Pixlab use Postman or simply make a curl request from your terminal.

If you are not very familiar with Node.js, don’t worry. I will be using very simple node.js functions. If you have any back-end development experience with any language, you can easily understand the back-end code.

It is also not advised to expose your API key to the user. In this case, they may misuse or overuse the API and you will have to bear the burden of those users. Therefore, always call the Pixlab API from the server environment.

Create a new Node.js application by running the `npm init` command inside an empty directory. Then fill all the prompts asked about your project. If you don’t want to answer all those questions, you can just run `npm run -y` to accept all the prompts and scaffold your project.

Now I install 3 required packages, express, axios and nodemon. I use Expressjs to build a Node.js server. Nodemon is a dev-dependency that restarts our server when some changes happen in our application. Whereas Axios simplifies the HTTP requests that we make to our servers.

npm i express axios
npm i -D nodemon

Now open this directory in your favorite code editor. Let’s scaffold our Node.js application and run it in port 3000.

const express = require("express");
const app = express();
app.use(express.json());
app.get("/", (req, res) =>
res.json( msg: "Hello" );
);
app.listen("3000", () =>
console.log("server started");
);

Call Pixlab API from your server

Before starting this section, make sure to get an API key from Pixlab to go along.

It is advised to always call Pixlab API from your server. Otherwise, your API key may be exposed to the user. Even if you try to call the Pixlab API from your browser, it gives you a CORS error.

In this tutorial, I am using this image as a demo driving license so that we can extract all the necessary details from it. This image is hosted in AWS storage. So you only need to provide the URL of the image for Pixlab AI to process it.

Now import Axios library in your Node.js project and get request for Pixlab docscan api endpoint, This endpoint supports both GET and POST requests.

If you have the driving license online URL, use a GET request. Instead, if you want to upload the image directly from your local server storage then you can use POST request.

Make a GET request to the Pixlab Docscan API

Let’s see an example of making a GET request using Axios in Node.js server.

const getRequestToDocscanAPI = async () => 
try
let response = await axios.get("
params:
img: "https://s3.us-east-1.amazonaws.com/pics.pixlab.xyz/sample-udl.jpg",
type: "usdl",
key: "PIXLAB_API_KEY",
,
);
return response;
catch (error)
console.log(error);

;

In this example, you can see that I am adding the image URL as a request parameter. In the type parameter, I’m using “usdl” because it’s a US driving license, and finally, I provide the Pixlab API key.

After you make a request, the Pixlab API processes your image and sends you a JSON response that includes all the details in the driving license. Demo response from API looks like this.


"type": "US Driving License",
"face_url": https://..amazonaws.comfinedia.pixiab.xyz
"fields":
"country": "USA",
"issuingState": "California",
"issuingStateCode": "CA",
"licenseNumber": "123456780",
"fullName": "DOE JOHN",
"address": "0123 ANYSTRECT, ANYTOWN, CA 01234",
"dateOfBirth": "1993-04-05",
"issuingDate": "2015-07-11",
"expiryDate": "2025-07-11",
"gender": "male",

status: 200,

Make POST request to Pixlab Docscan API

According to Pixlab’s Docscan API documentation, if you want to upload your local image directly, you have to use a multipart / form-data content type.

To make multipart/form-data requests, install the form-data package from npm. This package provides you with a uniform browser FormData API to work with and make your life easier.

npm i form-data

Now let’s see how to use this form-data package to make multipart/form-data requests to Pixlab Docscan API.

const form = new FormData();
form.append("file", image.data, image.name);
form.append("key", process.env.PIXLAB_KEY);
form.submit(

protocol: "https:",
host: "api.pixlab.io",
path: "/docscan",
method: "POST",
headers:
"Content-Type": `multipart/form-data; boundary=$form.getBoundary()`,
,
,
(err, resp) =>
if (err)
res.status(503).send("File server is currently unavailable");

resp.pipe(res);

);

In the above code sample, first, instantiate a `FormData` object. Then add the request data by adding it to this `FormData` object. Mainly I am adding two parameters. One is the image itself and the other is the Pixlab API key.

Then send POST request to Pixlab server using `form.submit()` function. Inside the ‘submit’ function, mention the protocol, method, host path, etc. so that your request reaches the destination server and has the most required information to process the request.

Upload user images directly to Pixlab servers

In the above example, you have seen how an image is sent to the Docscan API by making a POST request. But Pixlab has a better way of handling image uploads.

Pixlab has a Store API for storing user images directly inside cloud buckets. Therefore, you can accept image uploads from your users and then forward them to the Pixlab store. In response, you get the URL of the image. Now you can use this URL to do all kinds of processing in Pixlab.

The Store API accepts a POST request. The body of the request should be multipart/form-data which includes the user uploaded image and API key. If the request is successful, the API takes your image and uploads it to a storage bucket online, and gives you a link to that image.

In our server, we take user file input in `/upload` root. We access user uploaded image using express-fileupload package. After adding this package as middleware, we can access user upload file using req.files method only. To install this package, run the following command.

npm i express-fileupload;

Then we build our multipart/form-data request using the form-data package mentioned earlier. Append the user uploaded image and API key to the form data. You can use the dotenv package here to hide your API key and access it as an environment variable.

After creation of multipart/form-data, we submit request to Pixlab API. Then whatever response we get, if it’s 200, we pipe it as a response to the user.

app.post("/upload", (req, res) => {
try Object.keys(req.files).length === 0)
return res.status(400).send("No files were uploaded.");

let image = req.files.image;
const form = new FormData();
form.append("file", image.data, image.name);
form.append("key", process.env.PIXLAB_KEY);form.submit(

protocol: "https:",
host: "api.pixlab.io",
path: "/store",
method: "POST",
headers:
"Content-Type": `multipart/form-data; boundary=$form.getBoundary()`,
,
,
(err, resp) =>
if (err)
res.status(503).send("File server is currently unavailable");

resp.pipe(res);

);
catch (error)
res.status(500).send(error);

});

Do you want to know, what happens when you scan a driving license using DocScan API? Let us understand the process step by step. I’m summarizing the point here, but you can read more about official document,

1. First the detection is done using the user’s face Face Detection API,

2. After getting the coordinate of the face, you can crop and extract the image using image processing api From Pixlab.

3. Then using the Docscan API, Pixlab extracts information about the user.

4. After the processing is done, the image is removed from the server. Pixlab does not store any images for future reference. This is a very good step in terms of privacy.

5. Under the hood, PixLab uses PP-OCR which is a practical ultra-lightweight OCR system mainly composed of three parts: text detection, bounding box isolation and text recognition. Thus PixLab can generate accurate results by scanning driver’s licenses.

PixLab’s DocScan API isn’t limited to scanning US driver’s licenses. It is capable of extracting data from passports as well.

Once you upload your passport to the Docscan API, the first thing it does is extract the user’s image using the FaceDetect API. It then converts binary data such as a passport Machine Readable Zone (MRZ) into a stream of text payload. This includes full name, country of issue, document number, expiration date, etc. Finally, it responds with a simple and easy-to-use JSON string for you to consume in your application.

Let’s see in code how to scan passport using Pixlab API. I’m going to create a simple Node.js server and call the Docscan API. I have described in the previous section of this blog how to set up and setup a Node.js app. Please follow those steps as the process is very similar.

const express = require("express");

const app = express();

app.use(express.json());

app.get("/", (req, res) =>
res.json( msg: "Hello" );
);

app.listen("3000", () =>
console.log("server started");
);

This is a demo passport image. We are going to use this image to extract data using Pixlab Docscan API.

Now let’s make a request using the Axios library in our Node.js environment.

const getRequestToDocscanAPI = async () => 
try
let response = await axios.get("
params:
img: "https://s3.us-east-1.amazonaws.com/pics.pixlab.xyz/sample-udl.jpg",
type: "passport",
key: "PIXLAB_API_KEY",
,
);
return response;
catch (error)
console.log(error);

;

In the above code snippet, I am making a GET request to Pixlab Docscan API. In the request params, I have added the Image URL with Image Type as Passport and Pixlab API Key.

If the request is successful, it returns you a JSON object containing all the information extracted from the passport.


type: “PASSPORT”,
face_url: “nttps://s3.amazonaws.com/media.pixlab. xyz/24p5ba822a00df7F. png",
mrz_img_url: “nttps://s3.amazonaws.com/media.pixlab. xyz/24p5ba822a1e426d. png",
mrz_raw_text: “Pfields:
issuingCountry: “UTO",
fullName: “ERIKSSON ANNA MARIA”,
documentNumber : “L898962C3",
checkDigit: "6/2/9/1",
nationality: “UTO",
dateOfBirth: “1974-08-12”,
sex: “F",
dateOfExpiry: "2012-04-15",
personalNumber : “ZE184226B",
finalcheckDigit: "9",
,
status: 260,

PixLab is also capable of scanning ID cards using its DocScan API endpoint. As in the previous example, the docscan API can extract the user image from the ID card and extract all the necessary information. Then it processes all that information and responds with a simple plain JSON object for you to use in your application.

The process for making an API call from your server for scanning ID cards is similar to the previous process. But in the type parameter, use `idcard` as the value. This is a sample GET request for scanning ID card using Pixlab API.

const getRequestToDocscanAPI = async () => 
try
let response = await axios.get("
params:
img: "https://s3.us-east-1.amazonaws.com/pics.pixlab.xyz/sample-udl.jpg",
type: "idcard",
key: "PIXLAB_API_KEY",
,
);
return response;
catch (error)
console.log(error);

;

In this tutorial, you learned how to scan and extract official documents using Pixlab’s Docscan API. If you are working with PDF instead of images, you can use PDFtoImage API to first convert your PDF to an image and then apply the steps I mentioned in the article.

First, you learned how to scan a US driver’s license. I have shown how to make GET and POST requests by directly uploading a local image to the API. Then we move on to passport scan and finally briefly about ID card scan. If you liked this blog then share it with your friends. If you have any questions, you can find me on twitter @hrishab pathak,

Leave a Reply