Click here to Skip to main content
14,576,897 members

Mobile 1D/2D Barcode Reader Using HTML5 and ASP.NET

26 Apr 2016CPOL
Building mobile apps, many developers hesitate on platform priority, iOS or Android. If you do not want to waste time learning the new programming languages (Swift or Java) you can opt for web technology. The article will show how to make a mobile barcode reader based on Browser/Server architecture.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

Introduction

On mobile platforms, HTML5 is not only supported by web browsers, such as Safari, Firefox, Opera, Chrome, but also web view UI component that used for building native apps. The benefit is apparent that any developer who is familiar with web programming could easily create excellent mobile apps for Android and iOS. Dynamsoft Barcode Reader SDK provides .NET APIs for Windows. You can implement a barcode reading module on server-side (IIS), and detect barcode images that captured from any mobile devices using HTML5.

Supported 1D/2D Barcode Types

  • 1D: Code 39, Code 93, Code 128, Codabar, Interleaved 2 of 5, EAN-8, EAN-13, UPC-A, UPC-E,Industrial 2 of 5
  • 2D: QRCode, DataMatrix, PDF417

Supported Image Types

  • BMP, JPEG, PNG, GIF, TIFF, PDF

Environment

  • Windows, IIS

Invoking Mobile Device Camera in HTML5

To access mobile device camera in HTML5, you just need one line of code:

<input type="file" name="fileToUpload" id="fileToUpload" style="display: none;" accept="image/*" />

Click "Grab Image", the native camera app will be brought to the front-end.

Image 1

After taking a photo and switching back, you can get the image data as follows:

var file = e.target.files[0], imageType = /image.*/;

   if (!file.type.match(imageType))
   {
       alert('The uploaded file is not supported.');
       return;
   }

   btnGrab.disabled = true;
   btnRead.disabled = true;

   loadImage(e.target.files[0],
       function (img) {

           $("#divBorder").empty();
           $('#divBorder').attr('min-height', '1px');
           document.getElementById('divBorder').appendChild(img);

           btnGrab.disabled = false;
           btnRead.disabled = false;
       });

Uploading Captured Images Using JavaScript

Convert the image data to Base64 string:

function scanBarcode() {
    var base64 = orgCanvas.toDataURL('image/jpeg', 0.7);
    var data = base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "");
    var imgData = JSON.stringify({
        Base64Data: data,
        BarcodeType: getBarcodeFormat().toString(),
        MultiBarcodes: document.getElementById('chkMultiBarcodes').checked
    });

    readBarcodeRequest(imgData);
}

Send the JSON data to web server using XMLHttpRequest:

function readBarcodeRequest(data) {
    xhr = new XMLHttpRequest();
    
    xhr.addEventListener("load", uploadComplete, false);

    xhr.addEventListener("error", uploadFailed, false);

    xhr.addEventListener("abort", uploadCanceled, false);

    xhr.upload.addEventListener('progress',uploadProgress, false);

    xhr.open("POST", "MobilecamBarcodeReader.ashx");
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(data);
}

Handling JSON Data in ASP.NET

Get the stream data with StreamReader:

context.Request.InputStream.Position = 0;
                string jsonString;
                using (var inputStream = new StreamReader(context.Request.InputStream))
                {
                    jsonString = inputStream.ReadToEnd();
                }

Convert the string to JSON object:

var postData = JsonConvert.DeserializeObject<PostData>(@jsonString);
                
                if (postData == null) return;
                var iMaxNumbers = postData.MultiBarcodes ? 100 : 1;

Reading Barcode on IIS Server-side

Specify a valid license to make the detection API work:

public static BarcodeResult[] GetBarcode(string strImgBase64, Int64 format, int iMaxNumbers)
        {
            var reader = new Dynamsoft.Barcode.BarcodeReader();
            var options = new ReaderOptions
            {
                MaxBarcodesToReadPerPage = iMaxNumbers,
                BarcodeFormats = (BarcodeFormat) format
            };

            reader.ReaderOptions = options;
            reader.LicenseKeys = "<license>";
            return reader.DecodeBase64String(strImgBase64);
        }

var strResult = "";
                BarrecodeReaderRepo.Barcode(postData.Base64Data, postData.BarcodeType, iMaxNumbers, ref strResult);

                strResult += DateTime.Now;
                context.Response.Write(strResult);

You can use Base64 string, byte array or file name as the input.

Image 2

Online Demo and Sample Code

If you are interested in the solution, please visit the online barcode demo to try it out. Furthermore, you can download the sample code to build a mobile barcode reader app yourself. For more information about Dynamsoft Barcode Reader, please contact support@dynamsoft.com.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Dynamsoft
Canada Canada
Dynamsoft has more than 15 years of experience in TWAIN SDKs, imaging SDKs and version control solutions.

Our products include:

TWAIN SDK
- Dynamic Web TWAIN: a TWAIN scanning SDK optimized for web document management applications.
- Dynamic .NET TWAIN: a .NET TWAIN and Directshow Image Capture SDK for WinForms/WPF applications.

Imaging SDKs
- Barcode Reader for Windows, Linux, macOS, iOS, Android and Raspberry Pi.
- OCR addon for both web and .NET TWAIN SDKs

Version Control
- SourceAnywhere: a SQL server-based source control solution. Both on-premise and hosting options are provided.

http://www.dynamsoft.com/
Group type: Organisation

22 members


Comments and Discussions

 
-- There are no messages in this forum --
Article
Posted 26 Apr 2016

Stats

28.4K views
2.5K downloads
6 bookmarked