|
| 1 | +# Integrating ID Scanning and Extraction In Web Apps With BlinkID SDK |
| 2 | + |
| 3 | +## How to run this repo? |
| 4 | +Test this repo out in under a minute on your machine (if you have Node and Git installed) by doing the following steps: |
| 5 | +- in your terminal, clone [this](https://github.com/Hitman666/BlinkID-InBrowserSDK-GettingStarted) repo with `git clone https://github.com/Hitman666/BlinkID-InBrowserSDK-GettingStarted.git` |
| 6 | +- get the license at [Microblink DevHub](https://developer.microblink.com/) and add it to the `LICENSE` variable in the `main.js` file |
| 7 | +- run `cd BlinkID-InBrowserSDK-GettingStarted && npm install && npm run dev` |
| 8 | +- open [http://localhost:5173/](http://localhost:5173/) and point your ID towards the camera |
| 9 | + |
| 10 | +If you prefer a short video for running this project, feel free to check it out [here](https://www.youtube.com/watch?v=c0ZA8af9oBc). |
| 11 | + |
| 12 | +If you want to recreate this project from scratch, here's the step by step guide... |
| 13 | + |
| 14 | +## TL;DR |
| 15 | +In this step-by-step tutorial, we'll show you how to start scanning and extracting the data from a driver's license using Microblink's BlinkID SDK. |
| 16 | + |
| 17 | +If you're pressed for time, and want to see this work in action right away, check out the demo: [https://microblink.com/demo/](https://microblink.com/demo/). Or, as mentioned above, run it by yourself locally. |
| 18 | + |
| 19 | +## The Problem |
| 20 | +Let's set the stage: you're running a car rental business, and your customers have to enter their driver license information in a web form on your website. This process is usually error prone, and often takes a while, and you observe a steep dropoff rate on this particular screen. |
| 21 | + |
| 22 | +You dig deeper with your product and user research teams and find out that people often make mistakes entering the information and that they, in general, find the process cumbersome. |
| 23 | + |
| 24 | +Now, imagine this: you implement a library that enables you to offer customers the ability to just scan their ID with their camera, and woila: you automatically fill out all the details from their ID. |
| 25 | + |
| 26 | +Seamless, errorless, and fast! |
| 27 | + |
| 28 | +Intrigued? OK, let's go through a step by step process in getting started with this. |
| 29 | + |
| 30 | +> In general, integrating advanced document scanning and OCR capabilities into your web application can significantly enhance user experience and streamline processes no matter the industry. Microblink's BlinkID SDK offers robust and reliable solutions for scanning not only driver's licenses, but also IDs, passports, and other documents. In this blog post, I'll guide you through the steps to integrate BlinkID into your web app for extracting data from a driver's license, and we'll dig deeper in other solutions in some other posts. |
| 31 | +
|
| 32 | +## Prerequisites |
| 33 | +Make sure that you have the following tools installed: |
| 34 | +- Node.js – go to the [main website](https://nodejs.org/en) and download the executable for your machine |
| 35 | +- Git – go to the [main website](https://git-scm.com/downloads) and download the executable for your machine |
| 36 | + |
| 37 | +## Starting a new project with Vite |
| 38 | +As you can see in the latest [State of JS report](https://2023.stateofjs.com/en-US/libraries/build_tools/), [Vite](https://vitejs.dev/) has become one of the most belowed build tools, so we'll use it here. |
| 39 | + |
| 40 | +In case you're wondering why that is even important, then a very long explanation is [here](https://vitejs.dev/guide/why.html#the-problems), and a very quick, but mouthfull, answer is that: |
| 41 | +>Vite leverages native ES modules to provide a fast development server with instant Hot Module Replacement (HMR), making development smoother and more efficient, and produces optimized, production-ready builds. |
| 42 | +
|
| 43 | +To put it bluntly, you shouldn't use Vite because the cool kids are using it, but because it'll actually make your dev experience way better. |
| 44 | + |
| 45 | +OK, with theory out of the way, let's run the following command in your terminal: `npm create vite@latest`. This will run the latest version of Vite. |
| 46 | + |
| 47 | +When prompted, use `blinkid-integration` as the Project name, select `Vanilla` as framework (meaning, no framework) and `Javascript` as the variant (meaning, the language; other option is TypeScript). The output you should see is similar to this: |
| 48 | + |
| 49 | +``` |
| 50 | +✔ Project name: … blinkid-integration |
| 51 | +✔ Select a framework: › Vanilla |
| 52 | +✔ Select a variant: › JavaScript |
| 53 | +
|
| 54 | +Scaffolding project in /Users/nikola/DEV/test-vite/blinkid-integration... |
| 55 | +
|
| 56 | +Done. Now run: |
| 57 | +
|
| 58 | + cd blinkid-integration |
| 59 | + npm install |
| 60 | + npm run dev |
| 61 | +``` |
| 62 | + |
| 63 | +## Running our scaffolded project |
| 64 | +Let’s run the commands (in terminal) noted at the end of the previous output: |
| 65 | + |
| 66 | +```bash |
| 67 | +cd blinkid-integration |
| 68 | +npm install |
| 69 | +npm run dev |
| 70 | +``` |
| 71 | + |
| 72 | +Once this finishes, you should get an output similar to this: |
| 73 | + |
| 74 | +```bash |
| 75 | +added 10 packages, and audited 11 packages in 10s |
| 76 | + |
| 77 | +3 packages are looking for funding |
| 78 | + run `npm fund` for details |
| 79 | + |
| 80 | +found 0 vulnerabilities |
| 81 | + |
| 82 | +> blinkid-integration@0.0.0 dev |
| 83 | +> vite |
| 84 | + |
| 85 | +Port 5173 is in use, trying another one... |
| 86 | + |
| 87 | + VITE v5.3.2 ready in 209 ms |
| 88 | + |
| 89 | + ➜ Local: http://localhost:5174/ |
| 90 | + ➜ Network: use --host to expose |
| 91 | + ➜ press h + enter to show help |
| 92 | +``` |
| 93 | + |
| 94 | +You should see the following page in your browser if you open http://localhost:5174: |
| 95 | + |
| 96 | + |
| 97 | + |
| 98 | +As expected, if you click on the `count is 0` button, the number will increase. |
| 99 | + |
| 100 | +## Adding BlinkID SDK |
| 101 | + |
| 102 | +Next, let's install the BlinkID SDK by running the following code in the terminal: |
| 103 | + |
| 104 | +`npm install --save @microblink/blinkid-in-browser-sdk` |
| 105 | + |
| 106 | +## Copying the resources folder |
| 107 | +This is a **very important step**, that often gets overlooked! So, please make sure to copy the `resources` folder (`found in node_modules/@microblink/blinkid-in-browser-sdk/resources`) into the `public` folder. |
| 108 | + |
| 109 | +## Creating a basic HTML Structure |
| 110 | +If you open the scafolded project in your favorite editor (I'm using VSCode), you'll see this folder structure: |
| 111 | + |
| 112 | + |
| 113 | + |
| 114 | +If you're interested and haven't used Vite before, I encourage you to check out the code. It showcases the ability to use the `import` command. |
| 115 | + |
| 116 | +Now, let's replace the current contents of the `index.html` file with the following: |
| 117 | + |
| 118 | +```html |
| 119 | +<!doctype html> |
| 120 | +<html lang="en"> |
| 121 | + <head> |
| 122 | + <meta charset="UTF-8" /> |
| 123 | + <link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
| 124 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 125 | + <title>BlinkID Test</title> |
| 126 | + </head> |
| 127 | + <body> |
| 128 | + <video id="myCameraVideoElement"></video> |
| 129 | + <script type="module" src="/main.js"></script> |
| 130 | + </body> |
| 131 | +</html> |
| 132 | +``` |
| 133 | + |
| 134 | +You will notice that we only changed the `title`, and instead of `<div id="app"></div>` added `<video id="myCameraVideoElement"></video>`. |
| 135 | + |
| 136 | +## Adding JavaScript for document scanning and extraction |
| 137 | +Replace all the contents of `main.js` file with the following code: |
| 138 | + |
| 139 | +```javascript |
| 140 | +const LICENSE = ''; |
| 141 | +import * as BlinkIDSDK from "@microblink/blinkid-in-browser-sdk"; |
| 142 | + |
| 143 | +if (BlinkIDSDK.isBrowserSupported()) { |
| 144 | + const loadSettings = new BlinkIDSDK.WasmSDKLoadSettings(LICENSE); |
| 145 | + loadSettings.engineLocation = window.location.origin + "/resources/"; |
| 146 | + |
| 147 | + BlinkIDSDK.loadWasmModule(loadSettings).then |
| 148 | + ( |
| 149 | + async (wasmSDK) => { |
| 150 | + const recognizer = await BlinkIDSDK.createBlinkIdSingleSideRecognizer(wasmSDK); |
| 151 | + |
| 152 | + const recognizerRunner = await BlinkIDSDK.createRecognizerRunner( |
| 153 | + wasmSDK, |
| 154 | + [recognizer], |
| 155 | + true |
| 156 | + ); |
| 157 | + |
| 158 | + const cameraFeed = document.getElementById("myCameraVideoElement"); |
| 159 | + try { |
| 160 | + const videoRecognizer = await BlinkIDSDK.VideoRecognizer.createVideoRecognizerFromCameraStream( |
| 161 | + cameraFeed, |
| 162 | + recognizerRunner |
| 163 | + ); |
| 164 | + |
| 165 | + const processResult = await videoRecognizer.recognize(); |
| 166 | + console.log(processResult); |
| 167 | + |
| 168 | + if (processResult !== BlinkIDSDK.RecognizerResultState.Empty) { |
| 169 | + const recognitionResult = await recognizer.getResult(); |
| 170 | + console.log(recognitionResult); |
| 171 | + } |
| 172 | + else { |
| 173 | + console.log("Recognition was not successful!"); |
| 174 | + } |
| 175 | + |
| 176 | + } |
| 177 | + catch (error) { |
| 178 | + console.error(error); |
| 179 | + } |
| 180 | + }, |
| 181 | + (error) => { |
| 182 | + console.log("Error during the initialization of the SDK!", error); |
| 183 | + } |
| 184 | + ) |
| 185 | +} |
| 186 | +else { |
| 187 | + console.log("This browser is not supported by the SDK!"); |
| 188 | +} |
| 189 | +``` |
| 190 | + |
| 191 | +Now, let's understand what this code is doing... |
| 192 | + |
| 193 | +```javascript |
| 194 | +const LICENSE = ''; |
| 195 | +import * as BlinkIDSDK from "@microblink/blinkid-in-browser-sdk"; |
| 196 | + |
| 197 | +if (BlinkIDSDK.isBrowserSupported()) { |
| 198 | +``` |
| 199 | +
|
| 200 | +Line by line: |
| 201 | +- we defined a constant called `LICENSE` (we'll tackle this in the next section) |
| 202 | +- imported all the exported members from the `@microblink/blinkid-in-browser-sdk` package, and assigned them to the `BlinkIDSDK` object |
| 203 | +- checked if the current browser is supported by the BlinkID SDK (you can see the list of supported browsers in our [documentation](https://github.com/BlinkID/blinkid-in-browser?tab=readme-ov-file#-supported-browsers)) |
| 204 | +
|
| 205 | +```javascript |
| 206 | +const loadSettings = new BlinkIDSDK.WasmSDKLoadSettings(LICENSE); |
| 207 | +loadSettings.engineLocation = window.location.origin + "/resources/"; |
| 208 | +``` |
| 209 | +
|
| 210 | +Line by line: |
| 211 | +- created a new instance of `WasmSDKLoadSettings`, passing the `LICENSE` constant |
| 212 | + - This object holds the configuration settings for loading the WebAssembly (WASM) module of the SDK. You can read more about it [here](https://github.com/BlinkID/blinkid-in-browser?tab=readme-ov-file#wasm-resources). |
| 213 | +- set the location where the WASM engine files are hosted. As you may remember from the `Copying the resources folder` step, we copied the `resources` folder to the `public` folder, and we need to indicate that specifically |
| 214 | + - if you'd copy/paste the actual content of the `resources` folder into the `public` folder, then you wouldn't need to set this specifically |
| 215 | +- called the `loadWasmModule` method to load the WASM module with the specified settings. |
| 216 | + - this method returns a promise, and once it resolves succesfully, the asynchronous callback function is executed, exposing the `wasmSDK` variable |
| 217 | +
|
| 218 | +```javascript |
| 219 | +const recognizer = await BlinkIDSDK.createBlinkIdSingleSideRecognizer(wasmSDK); |
| 220 | +const recognizerRunner = await BlinkIDSDK.createRecognizerRunner( |
| 221 | + wasmSDK, |
| 222 | + [recognizer], |
| 223 | + true |
| 224 | +); |
| 225 | +``` |
| 226 | +
|
| 227 | +Line by line: |
| 228 | +- created an instance of `BlinkIdSingleSideRecognizer` |
| 229 | +- created a `RecognizerRunner` instance which manages the recognition process |
| 230 | + - it takes the Wasm SDK instance, an array of recognizers, and a boolean flag indicating whether the recognizer should allow multiple results or not (read more about it [here](https://github.com/BlinkID/blinkid-in-browser?tab=readme-ov-file#-recognizerrunner)) |
| 231 | +
|
| 232 | +```javascript |
| 233 | +const cameraFeed = document.getElementById("myCameraVideoElement"); |
| 234 | +const videoRecognizer = await BlinkIDSDK.VideoRecognizer.createVideoRecognizerFromCameraStream( |
| 235 | + cameraFeed, |
| 236 | + recognizerRunner |
| 237 | +); |
| 238 | +``` |
| 239 | +
|
| 240 | +Line by line: |
| 241 | +- selected the video element from the DOM which will be used to display the camera feed |
| 242 | +- in a `try/catch` block we created a `VideoRecognizer` instance from the camera stream using the selected video element (`cameraFeed`) and the recognizer runner (`recognizerRunner`) |
| 243 | +
|
| 244 | +```javascript |
| 245 | +const processResult = await videoRecognizer.recognize(); |
| 246 | +console.log(processResult); |
| 247 | + |
| 248 | +if (processResult !== BlinkIDSDK.RecognizerResultState.Empty) { |
| 249 | + const recognitionResult = await recognizer.getResult(); |
| 250 | + console.log(recognitionResult); |
| 251 | +} |
| 252 | +else { |
| 253 | + console.log("Recognition was not successful!"); |
| 254 | +} |
| 255 | +``` |
| 256 | +
|
| 257 | +Line by line: |
| 258 | +- started the recognition process and logged the result to the console |
| 259 | +- checked if the process result is not empty, then waited for the results from the recognizer and logged them in the console |
| 260 | +- if process result is empty, we log the approprite message |
| 261 | +
|
| 262 | +Finally, we catch any errors from the `try/catch` and promise. |
| 263 | +
|
| 264 | +## Testing the integration - take #1 |
| 265 | +If you open the `index.html` file in a web browser, you'll see and error, something along the lines of: |
| 266 | +
|
| 267 | +```javascript |
| 268 | +Uncaught Error |
| 269 | + at new WasmSDKLoadSettings (@microblink_blinkid-in-browser-sdk.js?v=1a0eef98:1868:13) |
| 270 | + at main.js:5:24 |
| 271 | +``` |
| 272 | +
|
| 273 | +This is because we haven't defined the license in the `LICENSE` variable. |
| 274 | +
|
| 275 | +## Getting the license |
| 276 | +To fix this, we need to go to https://login.microblink.com/ to create an account in Developer Hub. Scroll down to the Start your free trial section and you'll be prompted with the standard signup form: |
| 277 | +
|
| 278 | + |
| 279 | +
|
| 280 | +You'll be asked a few question that you can skip (if you're a dev, PM, etc 🙂): |
| 281 | +
|
| 282 | + |
| 283 | +
|
| 284 | +and also get a confirmation email: |
| 285 | +
|
| 286 | + |
| 287 | +
|
| 288 | +Once you sign in, you'll see a dashboard like this: |
| 289 | +
|
| 290 | + |
| 291 | +
|
| 292 | +Here you should click on the `Start New Trial` button, and in the following screen select `BlinkID` as the product, `InBrowser` as the platform, and `localhost` as the domain name for the testing environment. Before going into production, you should update the domain name to your actual domain. |
| 293 | +
|
| 294 | + |
| 295 | +
|
| 296 | +Then you'll get to a screen like this, where you can copy the code (it'll be a long, so-called Base64, string of numbers and letters): |
| 297 | +
|
| 298 | + |
| 299 | +
|
| 300 | +Paste this code into the `LICENSE` variable in the `main.js` file, and we'll be all set. |
| 301 | +
|
| 302 | +BTW, if you're curious, BlinkID is available for lots of platforms: |
| 303 | +
|
| 304 | + |
| 305 | +
|
| 306 | +
|
| 307 | +## Testing the integration - take #2 |
| 308 | +If you open the `index.html` file in your browser again, you'll be presented with a camera feed where you should show some ID. I Googled [US driver's license example](https://www.google.com/search?q=US+driver%27s+license+example) and took the first image on the results page and printed it out. |
| 309 | +
|
| 310 | +Then if you show this image to the camera it will dump of all the available data in the console log: |
| 311 | +
|
| 312 | + |
| 313 | +
|
| 314 | +## Conclusion |
| 315 | +Integrating the BlinkID SDK into your web application is a straightforward process that can significantly enhance your app's onboarding/processing capabilities. |
| 316 | +
|
| 317 | +By following these steps, you can quickly set up document scanning and OCR functionalities to extract data from driver's licenses, improving both user experience and efficiency. |
| 318 | +
|
| 319 | +## For those who to learn more |
| 320 | +This was a barebones example just to get you started quickly. |
| 321 | +
|
| 322 | +Now, if you wish to learn more, you can check out the official [repo on Github](https://github.com/BlinkID/blinkid-in-browser?tab=readme-ov-file#-supported-browsers), and you can also try to add some modifications yourself, like: |
| 323 | +- styling |
| 324 | + - enhance the HTML with CSS to make the interface more user-friendly |
| 325 | +- error handling and feedback |
| 326 | + - add better error handling and provide better feedback to users |
| 327 | +- extend functionality |
| 328 | + - explore BlinkID SDK features and enhance your application's capabilities |
| 329 | +
|
| 330 | +If you have any issues running this repo, or any other questions, please feel free to leave them in the comments. |
0 commit comments