barKoder Web SDK - General Barcode Scanning Example

barKoder Web SDK Web SDK Examples

General Example

Creating Barkoder Configuration #

The BarkoderSDK.initialize method is responsible for setting up the configuration required to initiate barcode scanning. This configuration includes the license key necessary for validating and activating the SDK.

If the license key is invalid or missing, the scan results will contain an "UNLICENSED" prefix and random asterisks.

                // Configure the BarkoderSDK with a valid license key to enable scanning

// The license result is printed in the console in the following format:
// [Module] Barkoder response: License OK
// to ensure the SDK is properly licensed

var Barkoder = await BarkoderSDK.initialize("LICENSE_KEY");

Enabling Symbologies #

Here's a detailed and refined explanation of how you can enable individual symbologies for barcode scanning using both direct configuration and JSON configuration in JavaScript:

Enabling Symbologies Directly #

You can enable individual symbologies directly by passing the decoders (symbologies) to enable as arguments. Here's a method that demonstrates how to do this:

                //Enable symbologies you'd like to scan

//Note that this method uses a rest parameter i.e.
//accepts an indefinite number of arguments

//Currently there is a total of 28 symbologies
//available in Barkoder.constants.Decoders

Barkoder.setEnabledDecoders(
	Barkoder.constants.Decoders.QR,
	Barkoder.constants.Decoders.Ean8,
	Barkoder.constants.Decoders.PDF417
);

Enabling Symbologies Directly via configureBarkoder #

You can also enable individual symbologies directly by setting the enabled property of each symbology in the DekoderConfig object, part of the BarkoderConfig object. Here's an example that demonstrates how to do this:

                //Enable symbologies you'd like to scan

//Note that the BarkoderConfig object can be used
//for setting other SDK properties as well

let config = new Barkoder.configTypes.BarkoderConfig({
	decoder: new Barkoder.configTypes.DekoderConfig({
		qr: new Barkoder.configTypes.BarcodeConfig({enabled: true}),
		ean8: new Barkoder.configTypes.BarcodeConfig({enabled: true}),
		pdf417: new Barkoder.configTypes.BarcodeConfig({enabled: true})
	})
});

Barkoder.configureBarkoder(config);

Enabling Symbologies via JSON template file #

Alternatively, you can enable symbologies using a JSON template file. This approach allows you to define the symbology settings in a more structured and flexible manner. Here's how you can do it:

[template.json]

                {
	"all": {
		"decoder": {
			"QR": {
				"enabled": true
			},
			"Ean-8": {
				"enabled": true
			},
			"PDF 417": {
				"enabled": true
			}
		}
	}
}

                //Enable symbologies you'd like to scan

//Note that the JSON template file object can be used
//for setting other SDK properties as well
	
Barkoder.applyTemplate('template.json', 'all');

Setting barkoder settings #

In our example case we will set the camera resolution to Full HD (1080p) and set the decoding speed to Normal (which is the default), enable image results, and also make the region of interest (ROI) visible.

Finally, we configure the ROI to cover the central 90% of the scanner view.

These configurations enhance the user experience by providing a balanced scanning performance, more detailed scan results, and visual feedback about the scan area.

Setting barkoder settings via individual methods #

                //These are optional settings, otherwise default values will be used

Barkoder.setCameraResolution(Barkoder.constants.CameraResolution.FHD);
Barkoder.setDecodingSpeed(Barkoder.constants.DecodingSpeed.Normal);
Barkoder.setImageResultEnabled(true);
Barkoder.setRegionOfInterestVisible(true);
Barkoder.setContinuous(false);

Barkoder.setRegionOfInterest(5, 5, 90, 90);

Setting barkoder settings via configureBarkoder #

                let config = new Barkoder.configTypes.BarkoderConfig({
    closeSessionOnResultEnabled: true,
	//imageResultEnabled: true, //this property will be added in next version
	//regionOfInterestVisible: true, //this property will be added in next version
    barkoderResolution: Barkoder.constants.CameraResolution.FHD,
    decoder: new Barkoder.configTypes.DekoderConfig({
        general: new Barkoder.configTypes.GeneralSettings({
            decodingSpeed: Barkoder.constants.DecodingSpeed.Normal
        })
    })
});

Barkoder.configureBarkoder(config);

Starting Scan #

The startScanner method initiates the scanning process. If there is an error during the start process, the error message is shown for debugging, otherwise the result is shown.

                let callbackMethod = (result) => { 
	if (typeof result.error == 'object')
		alert(result.error.name + '\n' + result.error.message);
	else
		alert(result.barcodeTypeName + '\n' + result.textualData);
}

Barkoder.startScanner(callbackMethod);

Handling and Showing Results #

                let callbackMethod = (result) => { 
	if (typeof result.error == 'object')
	{
		alert(result.error.name + '\n' + result.error.message);
	}
	else
	{
		// Handle the scanning results here
		// Process single or multicode results, and handle the captured image
		
		if (result.resultsCount == 1) //single result
		{
			//show result data
			alert(result.barcodeTypeName + '\n' + result.textualData);
			
			//alternatively access the result as an array of bytes
			let totalBytes = result.binaryData.length;
			for (let i = 0; i < totalBytes; i++)
			{
				//do something with each byte
				//result.binaryData[i]
			}
		}
		else if (result.resultsCount > 1) //multiple results
		{
			let resultString = '';
			for (let i = 0; i < result.resultsCount; i++)
			{
				let currentResult = i + 1;
				
				//concatenate result data
				resultString += `Result ${currentResult}:\n`
				resultString += result.results[i].barcodeTypeName + '\n' + result.results[i].textualData) + '\n\n';
			}
			
			//show concatenated result data
			alert(resultString);
		}
		
		if (typeof result.capturedFrame == 'object')
		{
			//assuming an HTML Canvas element already exist
			const canvas = document.getElementById("myCanvas");
			const ctx = canvas.getContext("2d");
			
			//show the captured image on an existing canvas element
			ctx.putImageData(result.capturedFrame, 0, 0);
		}
	}
}

DPM Mode Example