How to add a PDF417 scanner to your web app, and parse/handle SADL data

barKoder Web SDK Web SDK Examples

Adding our Web SDK Barcode Scanner (which includes the PDF417 decoder) depends on your particular implementation.

The simplest implementation is directly in the browser with plain/vanilla JS.

You will need the following files in your SPA (single page web app):

barkoder-umd.js

barkoder.wasm

barkoder_nosimd.wasm

You can obtain the Web SDK files by downloading barKoder for WASM from https://barkoder.com/repository, or alternatively from https://www.npmjs.com/package/barkoder-wasm.

The barkoder-umd.js file needs to be included in the html page of the web app like so:

                                <script type="text/javascript" src="barkoder-umd.js"></script>

where as the .wasm files should be on the server in the same directory as the barkoder-umd.js file.

Your html page should have a camera preview element like so:

                                <div id="barkoder-container" style="width: 500px; height: 300px;"></div>

however if you already have such a preview element you can keep it as long as its a div element, and you will just need to add the "barkoder-container" id to it.

In your JS code you can do the following:

                async function barkoderInit () {
	var Barkoder = await BarkoderSDK.initialize("your_license_key_here");
	
	//enable symbologies you'd like to scan
	Barkoder.setEnabledDecoders(
		Barkoder.constants.Decoders.PDF417
	);
	
	//change any additional settings
	Barkoder.setCameraResolution(Barkoder.constants.CameraResolution.FHD);
	Barkoder.setDecodingSpeed(Barkoder.constants.DecodingSpeed.Slow);
	Barkoder.setFormatting(Barkoder.constants.Formatting.Automatic);
}
barkoderInit(); //using await requires an async method

And on click of the "Scan Driver's License" button, you can call the following:

                                Barkoder.startScanner(callbackMethod);

The callbackMethod for it is as follows:

                 let callbackMethod = (result) => {
	if (typeof result.error == 'object')
	{
		alert(result.error.name + '\n' + result.error.message);
	}
	else
	{
		// Handle the scanning results here
		
		if (result.resultsCount == 1) //single result
		{
			//show result data
			alert(result.barcodeTypeName);
			
			//access the parsed result
			let SADL_ParsedData = JSON.parse(result.formattedJSON);
			
			//access specific fields - most likely you need the following:
			let driver_surname = SADL_ParsedData.Field[0].Value;
			let driver_initials = SADL_ParsedData.Field[1].Value;
			let id_number = SADL_ParsedData.Field[6].Value;
			let license_number = SADL_ParsedData.Field[5].Value;
			let license_codes = SADL_ParsedData.Field[18].Values.join(", ");
			let gender = SADL_ParsedData.Field[14].Value;
			let nationality = SADL_ParsedData.Field[3].Value; //most likely
			let dob = SADL_ParsedData.Field[11].Value;
			let license_expiry = SADL_ParsedData.Field[13].Value;
			let license_expiry = SADL_ParsedData.Field[13].Value;
			let restrictions = SADL_ParsedData.Field[19].Values.join(", ");
			
			//use the fields into the respective UI elements
		}
	}
}

As pointed out in the code comments, after a successful scan, you can access individual fields of the parsed South African Driver's License and show them in respective UI elements on the page of your web app.

barKoder Web SDK - Next.JS Integration