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

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. The article will illustrate how to make a mobile barcode reader based on B/S (Browser/Server) architecture.

This article has been posted on CodeProject.

Getting Started with Mobile Barcode Reader

Invoking Mobile Device Camera in HTML5 on Mobile Devices

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:

html5 mobile barcode reader ui

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 Base64 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.

html5 mobile barcode reader result

Demo

Online Barcode Reader

Sample Code

Download