How to Read Barcodes Online From a Web Application

Barcodes are everywhere today. They are particularly popular with retail stores, for warehouse inventory applications, and more. Essentially, barcodes are important for applications where easily sharing information via computers or mobile devices is important.

As the hunger for more online information sharing and saving grows so too does the need to process barcode information from a web application. But how can you integrate barcode reading technology with web technologies?
If you have tried integrating a barcode with a web application before, you will know how time-consuming the task can be. However, with the help of Dynamsoft's Dynamic Web TWAIN 10.2 Barcode Reader Add-on, you can make it happen in just a few minutes.
In this tutorial, I will show you step by step how to build a simple barcode reading web application.
For this tutorial, you need a basic understanding of HTML and JavaScript. There is no CSS involved in this demo page. We'll concentrate on the barcode functionality in this tutorial. You can add whatever styles you like afterward. Even if you are a novice to web programming, you will find this tutorial easy to follow. So just take it easy and have some fun.
Here is a summary of the steps:
1. Start a Web Application
2. Add Dynamic Web TWAIN to the HTML Page
3. Scan or Load Images
4. Read Barcodes
In step 1, 2, and 3, we are integrating Dynamic Web TWAIN with your web application. This is a prerequisite for barcode processing as, in this case, Barcode Reader is an add-on of Dynamic Web TWAIN.
Step 1: Start a Web Application
You can get Dynamic Web TWAIN Barcode Reader Resources files either from Dynamsoft's Dynamic Web TWAIN 9.2 free 30-day trial or the barcode sample code we used in this tutorial.
Create an empty HTML page named readbarcode.HTML. Put it on the same folder as the Resources folder.
Step 2: Add Dynamic Web TWAIN to the HTML Page
Include dynamsoft.webtwain.initiate.js, dynamsoft.webtwain.config.js, and dynamsoft.webtwain.addon.barcode.js in the HTML head. dynamsoft.webtwain.initiate.js and dynamsoft.webtwain.config.js are responsible for Dynamic Web TWAIN's initialization, while dynamsoft.webtwain.addon.barcode.js provides all barcode related API interfaces:
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"> </script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"> </script>
<script type="text/javascript" src="Resources/addon/dynamsoft.webtwain.addon.barcode.js"> </script>
Add a div container, and register the OnWebTwainReady event to get access to Dynamic Web TWAIN via DWObject:
<div id="dwtcontrolContainer"></div>
<script type="text/javascript">
Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady); // Register OnWebTwainReady event. This event fires as soon as Dynamic Web TWAIN is initialized and ready to be used
var DWObject;
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
}
Step 3: Scan or Load Images
Add Scan and Load buttons to the page:
<input type="button" value="Scan" onclick="AcquireImage();" />
<input type="button" value="Load" onclick="LoadImage();" /><br />
And add the implementation of function AcquireImage() and LoadImage(). Notice how LoadImage() handles success and failure with callback functions OnSuccess() and OnFailure():
function AcquireImage() {
if (DWObject) {
DWObject.SelectSource();
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan.
DWObject.AcquireImage();
}
}
//Callback functions for async APIs
function OnSuccess() {
console.log('successful');
}
function OnFailure(errorCode, errorString) {
alert(errorString);
}
function LoadImage() {
if (DWObject) {
DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp,.jpg,.tif,.png,.pdf). OnSuccess or OnFailure will be called after the operation
}
}
Step 4: Read Barcodes
Now you have two options to get the image loaded:
Scan images from a scanner (AcquireImage());
Or load hard disk images (LoadImage()).
It's time to add the Dynamic Web TWAIN Barcode Reader add-on to your web page.
Add a selection list for supported barcode formats:
<select id="barcodeformat"></select>
And populate it in function Dynamsoft_OnReady():
function Dynamsoft_OnReady() {
DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
if (DWObject) {//Currently only code 39 and code 128 are supported
document.getElementById("barcodeformat").options.add(new Option("Code 39", 1));
document.getElementById("barcodeformat").options.add(new Option("Code 128", 0));
}
}
Dynamic Web TWAIN 10.2 Barcode Reader Add-on supports Code 39 and Code 128 barcodes. Another independent barcode product from Dynamsoft, called Dynamsoft Barcode Reader, supports more barcode types. They include Code 39, Code 93, Code 128, Codabar, ITF, EAN-13, EAN-8, UPC-A, UPC-E, etc. The next version of Dynamic Web TWAIN Barcode Reader Add-on will support all these barcode types as well.
Now it comes to the most important part of this tutorial - barcode reading logic. Please notice that how callback functions are used to deal with the success and failure scenarios for barcode reading:
function GetBarcodeInfo(sImageIndex, result) {
//Retrieve barcode details
var count = result.GetCount();
if (count == 0) {
alert("The barcode for the selected format is not found.");
return;
} else {
for (I = 0; I < count; I++) {
var text = result.GetContent(I);
var x = result.GetX1(I);
var y = result.GetY1(I);
var format = result.GetFormat(I);
var barcodeText = ("barcode[" + (I + 1) + "]: " + text + "\n");
barcodeText += ("format:" + format + "\n");
barcodeText += ("x: " + x + " y:" + y + "\n");
alert(barcodeText);
}
}
}
//This is the function called when barcode reading fails
function GetErrorInfo (errorcode, errorstring) {
alert(errorstring);
}
function ReadBarcode() {
var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
if (DWObject) {
if (DWObject.HowManyImagesInBuffer == 0) {
alert("Please scan or load an image first.");
return;
}
//Get barcode result.
switch (document.getElementById("barcodeformat").selectedIndex) {
case 0:
result = DWObject.Addon.Barcode.Read(
DWObject.CurrentImageIndexInBuffer, EnumDWT_BarcodeFormat.CODE_39, GetBarcodeInfo, GetErrorInfo);
break;
case 1:
result = DWObject.Addon.Barcode.Read(
DWObject.CurrentImageIndexInBuffer, EnumDWT_BarcodeFormat.CODE_128, GetBarcodeInfo, GetErrorInfo);
break;
default:
break;
}
}
}
Now, save the file.
Okay, we are all set. You can open readbarcode.HTML in a browser and start barcode reading.
Conclusion
Use of Dynamic Web TWAIN Barcode Reader Add-on makes integration of barcode reading into a web page pretty easy. All mainstream browsers (Internet Explorer 32 and 64-bit, Chrome, Firefox) on Windows are supported by Barcode Reader Add-on.

Article Source: http://EzineArticles.com/9068251