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. Here is a demo page of what we will be building. You can either view the demo online or download the source file:
Try Demo Online Download Code
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. Use Dynamic Web TWAIN to Scan or Load Images
- 4. Use Dynamic Web TWAIN Barcode Reader Add-on to 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. For Dynamic Web TWAIN integration, we have covered this topic in a previous post: How to Create Web-Based Scanner Software. The steps for this tutorial are almost the same. Here I will go through the first three steps very quickly. If you are already familiar with them, it’s okay to skip directly to step 4.
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:
