Dev.to

Developing a Web MRZ and VIN Scanner with JavaScript and HTML5

In the digital era, extracting information from documents and vehicle IDs has become increasingly important for web-based applications. Machine Readable Zones (MRZ) and Vehicle Identification Numbers (VIN) can now be scanned directly in the browser using modern web technologies. In this tutorial, you'll learn how to build a web-based MRZ and VIN scanner using JavaScript, HTML5 and Dynamsoft Capture Vision SDK. Web MRZ/VIN Scanner Demo Video Prerequisites Free Trial License for Dynamsoft Capture Vision. Online Demo Try it here Installation The dynamsoft-capture-vision-bundle is the JavaScript version of Dynamsoft Capture Vision, available via npm or CDN. To use it, include the library in your index.html: Setting Up the HTML Structure The target HTML layout for the MRZ/VIN scanner consists of three main sections: A div element for license key setup, input source selection (File or Camera), and scanning mode toggle (MRZ or VIN). Get a License key from here Activate SDK File Camera MRZ VIN A div for displaying the uploaded image and its scanning result. A dev for showing the live camera stream along with real-time scanning results. Start Initializing MRZ and VIN Recognition Engines The recognition engines for MRZ and VIN are initialized in the activate() function, which is triggered when the user clicks the Activate SDK button. This function sets up the license key, loads the required models and code parsers, and registers result receivers for both MRZ and VIN. async function activate() { toggleLoading(true); let divElement = document.getElementById("license_key"); let licenseKey = divElement.value == "" ? divElement.placeholder : divElement.value; try { await Dynamsoft.License.LicenseManager.initLicense( licenseKey, true ); Dynamsoft.Core.CoreModule.loadWasm(["DLR"]); parser = await Dynamsoft.DCP.CodeParser.createInstance(); // Load VIN and MRZ models await Dynamsoft.DCP.CodeParserModule.loadSpec("VIN"); await Dynamsoft.DLR.LabelRecognizerModule.loadRecognitionData("VIN"); await Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD1_ID"); await Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD2_FRENCH_ID"); await Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD2_ID"); await Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD2_VISA"); await Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD3_PASSPORT"); await Dynamsoft.DCP.CodeParserModule.loadSpec("MRTD_TD3_VISA"); await Dynamsoft.DLR.LabelRecognizerModule.loadRecognitionData("MRZ"); mrzRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); await mrzRouter.initSettings("./mrz.json"); mrzRouter.addResultReceiver({ onCapturedResultReceived: (result) => { // TODO: Handle MRZ result }, }); vinRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance(); await vinRouter.initSettings("./vin.json"); vinRouter.addResultReceiver({ onCapturedResultReceived: (result) => { // TODO: Handle MRZ result }, }); isSDKReady = true; } catch (ex) { console.error(ex); } toggleLoading(false); } Accessing the Camera Dynamsoft Capture Vision SDK provides the CameraEnhancer and CameraView classes for managing camera access and display. CameraEnhancer wraps the getUserMedia() method, while CameraView class adds a live video view to the DOM. async function openCamera(cameraEnhancer, cameraInfo) { if (!Dynamsoft) return; try { await cameraEnhancer.selectCamera(cameraInfo); cameraEnhancer.on("played", function () { resolution = cameraEnhancer.getResolution(); }); await cameraEnhancer.open(); } catch (ex) { console.error(ex); } } async function closeCamera(cameraEnhancer) { if (!Dynamsoft) return; try { await cameraEnhancer.close(); } catch (ex) { console.error(ex); } } async function setResolution(cameraEnhancer, width, height) { if (!Dynamsoft) return; try { await cameraEnhancer.setResolution(width, heig

Apr 15, 2025 - 07:09
 0
Developing a Web MRZ and VIN Scanner with JavaScript and HTML5

In the digital era, extracting information from documents and vehicle IDs has become increasingly important for web-based applications. Machine Readable Zones (MRZ) and Vehicle Identification Numbers (VIN) can now be scanned directly in the browser using modern web technologies. In this tutorial, you'll learn how to build a web-based MRZ and VIN scanner using JavaScript, HTML5 and Dynamsoft Capture Vision SDK.

Web MRZ/VIN Scanner Demo Video

Prerequisites

Online Demo

Try it here

Installation

The dynamsoft-capture-vision-bundle is the JavaScript version of Dynamsoft Capture Vision, available via npm or CDN. To use it, include the library in your index.html:

Setting Up the HTML Structure

The target HTML layout for the MRZ/VIN scanner consists of three main sections:

  • A div element for license key setup, input source selection (File or Camera), and scanning mode toggle (MRZ or VIN).

     class="container">
     class="row">
        
    
            
                Get a License key from 
                    href="https://www.dynamsoft.com/customer/license/trialLicense/?product=dcv&package=cross-platform"
                    target="_blank">here
            
             type="text" id="license_key"
                value="LICENSE-KEY"
                placeholder="LICENSE-KEY">
             onclick="activate()">Activate SDK
class="row">
onchange="selectChanged()" id="dropdown"> value="file">File value="camera">Camera id="modeSelector"> type="radio" name="scanMode" value="mrz" checked> MRZ type="radio" name="scanMode" value="vin"> VIN