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

• Download demo - 14.6 MB

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.

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.

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.