How To Scan US Driver’s License and Passport With Pixlab’s “Docscan” API
Use AI in your JavaScript web apps
If you are running a business where you have to check and keep records of US driver’s licenses and passports, then it is very tedious to manually enter their details in your system. This task needs a huge amount of human labor and costs you a fortune.
What if I tell you that there is an AI service you can use to automatically scan those driving license documents and extract the details in a fraction of a second? Yes, you are hearing right. In the age of AI and machine learning, you should no longer do manual labor and automate the whole repetitive process.
This document scanning feature is not only limited to driving licenses but extends its horizon to many other types of documents including e-KYC, face extraction, etc.
What you will learn in this blog
In this blog, I will explain to you step-by-step details on how to scan and extract information from a US driver’s license.
Let me make a thing very clear it is possible to make such an AI system in-house to meet your needs. But it will be extremely costly in terms of both money and time. Therefore I recommend you use an AI service to use those advanced features from day one.
In this article, I am going to use Pixlab to scan the driving licenses. Pixlab is a software as a service(SaaS) that provides very easy-to-use AI services to individuals and businesses.
Make sure to acquire a Pixlab API key to follow along.
Here I will use a Node.js server and make a simple rest API to communicate to Pixlab API endpoints. Pixlab APIs are not accessible from your web browser environment due to CORS restrictions. Therefore, use Postman or simply make a curl request from your terminal to test any feature of Pixlab.
If you are not very familiar with Node.js, then don’t worry. I will use very simple Node.js functions. If you have any experience in back-end development with any language, you can easily understand the back-end code.
It is also not advisable to expose your API key to the user. In this case, they may misuse or overuse the API and you have to bear the burden of those users. Therefore, always call the Pixlab API from the server environment.
Scan US driver’s license using Pixlab
Create a new Node.js application by running the `npm init` command inside an empty directory. Then fill in all the prompts it asked you regarding your project. If you don’t want to answer all those questions, you can simply 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 make a Node.js server. Nodemon is a Dev-dependency that restarts our server when something has changed in our application. While Axios simplify the HTTP request we make from our server.
npm i express axios
npm i -D nodemonNow 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 follow along.
It is advisable to always call the Pixlab API from your server. Otherwise, your API key can 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 to extract all the details we need from it. This is image is hosted in an AWS storage. Therefore you only need to provide the URL of the image to get it processed by Pixlab AI.
Now import the Axios library in your Node.js project and make a get request to Pixlab’s Docscan API endpoint. This endpoint support both GET and POST requests.
If you have an online URL of the driving license, then use the GET request. instead, you can use POST request if you want to upload the image directly from your local server storage.
Make a GET request to Pixlab Docscan API
Let’s see an example of how to build a GET request using Axios in Node.js server.
const getRequestToDocscanAPI = async () => {
try {
let response = await axios.get("https://api.pixlab.io/docscan", {
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 I am adding the image URL as a request parameter. In the type parameter, I am using “usdl” as this is a US driving license, and last, I provide the Pixlab API key.
After you make the request, the Pixlab API process your image and send you a JSON response that includes all the details in the driving license. The demo response from the 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 a POST request to Pixlab Docscan API
According to Pixlab’s Docscan API documentation, if you want to directly upload your local image, you have to use a multipart/form-data content type.
To make a multipart/form-data request, install the form-data package from npm. This package provides you with a similar browser FormData API to work with and make your life easier.
npm i form-dataNow let’s see how to use this form-data package to make a multipart/form-data request to the 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, at first, instantiate a `FormData` object. Then add request data by appending it to this `FormData` object. Primarily I am adding two parameters. One is the image itself and the other is the Pixlab API key.
Then send the POST request to the Pixlab server using `form.submit()` function. Inside the `submit` function, mention protocol, method, host path, etc so that your request reaches the destination server and carries the most needed information to process the request.
Upload user images directly to the Pixlab server
In the above example, you have seen how to send an image to the Docscan API by making a POST request. But there is a better way to deal with image uploads in Pixlab.
Pixlab has a store API to store user images directly inside a cloud bucket. Therefore, you can accept image uploads from your user and then forward them to the Pixlab store. In the response, you get the URL of the image. Now you can use this URL to do all types of processing in Pixlab.
The store API accepts a POST request. The body of the request should be multipart/form-data which contains the user-uploaded image and the API key. If the request is successful, API takes your image and uploads it to a storage bucket online, and gives you the link to that image.
In our server, we take the user file input in `/upload` route. We access the user-uploaded image using the express-fileupload package. After adding this package as a middleware, we can access the user upload file using just req.files method. To install this package, run the following command.
npm i express-fileupload;Then we construct our multipart/form-data request using the form-data package I mentioned earlier. Append the user-uploaded image and the API key in form data. You can use the dotenv package here to hide your API key and access it as an environment variable.
After the construction of multipart/form-data, we submit the request to Pixlab API. Then Whatever response we get, if it is 200, we pipe it as a response to the user.
app.post("/upload", (req, res) => {
try {
if (!req.files || 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);
}
});What happens under the hood
Do you want to know, what happens when you scan a driving license using the Docscan API? Let’s understand the process step by step. I am summarizing the point here, but you can read more about it in their official documentation.
1. At first the user’s face is detected using the face detect API.
2. After getting the face coordinate, you can crop and extract the image using image processing API from Pixlab.
3. Then using Docscan API, Pixlab extracts the information about the user.
4. After the processing is done, the image is deleted from the server. Pixlab doesn’t store any of the images for future reference. This is a very good move for privacy.
5. Under the hood, Pixlab uses PP-OCR which is a practical ultra-lightweight OCR system that is mainly composed of three parts: Text Detection, Bounding Box Isolation, & Text Recognition. Thus Pixlab can generate accurate results by scanning a driver’s license.
Scan Passport using Pixlab
The Docscan API of Pixlab is not limited to scanning US driving licenses. It is capable to extract data from passports as well.
Once you upload your passport to Docscan API, first It extracts the user image using the facedetect API. Then it transforms binary data such as Passport Machine Readable Zone (MRZ) into a stream of text payload. This includes full name, issuing country, document number, date of expiry, etc. Finally, it responds with a simple and easy-to-use JSON string to consume in your application.
Let’s see in the code how to scan a passport using Pixlab API. I am going to make a simple Node.js server and call the Docscan API. I have described how to set up and Node.js app in the previous section of this blog. 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 the request using the Axios library in our Node.js environment.
const getRequestToDocscanAPI = async () => {
try {
let response = await axios.get("https://api.pixlab.io/docscan", {
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 the Pixlab Docscan API. In the request params, I have added the image URL along with the image type as passport and with the Pixlab API key.
If the request is successful, it returns you a JSON object containing all the information it extracts 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: “P<UTOERIKSSON< <ANNAXMARIAK << <<< <<< <<< <<< << <\NLB98982C36UTO 7468122F 12641592 E 184226B<<<<<16",
fields: {
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,
}Bonus: Scan UAE residence cards using Pixlab
Pixlab is also capable of scanning ID cards using its Docscan API endpoint. Like the previous example, Docscan API can extract the user image from the ID card and extract all the required information. Then it processes all those information and responds with a simple plain JSON object to use in your application.
The process of calling the API from your server for a scanning ID card is similar to the previous process. But in the type parameter, use `idcard` as a value. This is the sample GET request for scanning ID cards using Pixlab API.
const getRequestToDocscanAPI = async () => {
try {
let response = await axios.get("https://api.pixlab.io/docscan", {
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);
}
};Conclusion
In this tutorial, You have learned how to scan and extract information from official documents using Pixlab’s Docscan API. If you are dealing with PDFs instead of images, you can use PdftoImage API to first convert your PDF to an image and then apply the steps I have mentioned in the article.
At first, you have learned how to scan a US driver’s license. I have demonstrated how to make GET and POST requests by directly uploading a local image to the API. Then we proceed to passport scan and at last briefly about ID card scan. If you like this blog, do share it with your peers. If you have any questions, you can find me on Twitter at @hrishikshpathak.
