Barcode Scanner in Website

One approach you can try is to use the Barcode Recognition Engine in the LEADTOOLS toolkit (https://www.leadtools.com/sdk/barcode).

For website application, LEADTOOLS has JavaScript implementation that works with .NET server-side code to recognize barcode images uploaded from mobile platforms.

To capture from webcam, take a look at this Mozilla article:

https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos

Once you have the image, the JS code to implement this with LEADTOOLS would look like this:

BarcodeDemoApp.prototype._readBarcodes = function (searchArea) {
var _this = this;
var rest = [Basic.ServiceHelper.serviceUri, "Barcode", "Read"].join("/");
var imageSize = this._imageViewer.imageSize;
var params = {
uri: this._currentImageUrl,
imageWidth: Math.floor(imageSize.width),
imageHeight: Math.floor(imageSize.height),
};
$.get(rest, params)
.done(function (barcodes) {
_this._currentBarcodes = barcodes;
_this._endOperation(false);
})
.fail(function (xhr, statusText, errorThrown) {
_this._endOperation(false);
});
};

On the server side, the .NET code to recognize barcodes would look something like this:

// Initialize a barcode engine
BarcodeEngine engine = new BarcodeEngine();
BarcodeReader reader = engine.Reader;
List readSymbologies = new List();
readSymbologies.AddRange(reader.GetAvailableSymbologies());
string tempFile = Path.GetTempFileName();
// Download the file
using (WebClient client = new WebClient())
client.DownloadFile(uri, tempFile);
using (RasterCodecs codecs = new RasterCodecs())
{
// Initialize the options for RasterCodecs
ServiceHelper.InitCodecs(codecs, ServiceHelper.Default_Resolution);
// Load the image
using (RasterImage image = codecs.Load(tempFile, 0, CodecsLoadByteOrder.BgrOrGray, page, page))
{
// Find the first barcode
var searchBounds = LeadRect.Empty;
if (right != 0 && bottom != 0)
searchBounds = LeadRect.FromLTRB(left, top, right, bottom);
// Read the barcodes
InitReader(reader, false);
Leadtools.Barcode.BarcodeData[] barcodes = reader.ReadBarcodes(image, searchBounds, 0, readSymbologies.ToArray());
}
}

The Leadtools.Barcode.BarcodeData[] would then be parsed and sent back to the client side.

You can find an online demo for this here:

http://demo.leadtools.com/JavaScript/Barcode/

For a mobile application, there are also LEADTOOLS barcode SDKs for Android and iOS. These SDKs work on the device itself and don't need connection to a server to read barcodes.

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Hussam Barouqa8y ago
One approach you can try is to use the Barcode Recognition Engine in the LEADTOOLS toolkit (https://www.leadtools.com/sdk/barcode).
For website application, LEADTOOLS has JavaScript implementation that works with .NET server-side code to recognize barcode images uploaded from mobile platforms.
To capture from webcam, take a look at this Mozilla article:
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos
Once you have the image, the JS code to implement this with LEADTOOLS would look like this:
BarcodeDemoApp.prototype._readBarcodes = function (searchArea) {
   var _this = this;
   var rest = [Basic.ServiceHelper.serviceUri, "Barcode", "Read"].join("/");
   var imageSize = this._imageViewer.imageSize;
   var params = {
         uri: this._currentImageUrl,
         imageWidth: Math.floor(imageSize.width),
         imageHeight: Math.floor(imageSize.height),
   };
   $.get(rest, params)
         .done(function (barcodes) {
         _this._currentBarcodes = barcodes;
         _this._endOperation(false);
   })
         .fail(function (xhr, statusText, errorThrown) {
         _this._endOperation(false);
   });
};
On the server side, the .NET code to recognize barcodes would look something like this:
// Initialize a barcode engine
BarcodeEngine engine = new BarcodeEngine();
BarcodeReader reader = engine.Reader;

List readSymbologies = new List();
readSymbologies.AddRange(reader.GetAvailableSymbologies());

string tempFile = Path.GetTempFileName();
// Download the file
using (WebClient client = new WebClient())
   client.DownloadFile(uri, tempFile);

using (RasterCodecs codecs = new RasterCodecs())
{
   // Initialize the options for RasterCodecs
   ServiceHelper.InitCodecs(codecs, ServiceHelper.Default_Resolution);

   // Load the image
   using (RasterImage image = codecs.Load(tempFile, 0, CodecsLoadByteOrder.BgrOrGray, page, page))
   {
      // Find the first barcode
      var searchBounds = LeadRect.Empty;

      if (right != 0 && bottom != 0)
      searchBounds = LeadRect.FromLTRB(left, top, right, bottom);

      // Read the barcodes
      InitReader(reader, false);
      Leadtools.Barcode.BarcodeData[] barcodes = reader.ReadBarcodes(image, searchBounds, 0, readSymbologies.ToArray());
   }
}
The Leadtools.Barcode.BarcodeData[] would then be parsed and sent back to the client side.
You can find an online demo for this here:
http://demo.leadtools.com/JavaScript/Barcode/
For a mobile application, there are also LEADTOOLS barcode SDKs for Android and iOS. These SDKs work on the device itself and don't need connection to a server to read barcodes.
Manav Pandya8y ago
Than you can use third party library for that i guess

Follow :

https://jeremylindsayni.wordpress.com/2016/04/02/how-to-read-and-create-barcode-images-using-c-and-zxing-net/

Thanks
Sudarvizhi J8y ago
No need to upload image or type something on textbox to generate barcode. we need to capture image using webcam or mobile camera directly to scan barcode

Thanks
Manav Pandya8y ago
Hello

Yes you can read at a time or any scanning device like mobile or other scanner devices

Just follow article :

http://www.aspdotnet-suresh.com/2017/04/aspnet-generate-and-read-qr-code-in-web-application-using-csharp-vbnet.html

Thanks
Sudarvizhi J8y ago
Thanks for your quick replay

Your examples for barcode generating only, but we want barcode scanner using mobile camera or webcam in website. It is possible or not. Please explain
Manav Pandya8y ago
Hello

You can follow some article for that :

http://www.c-sharpcorner.com/UploadFile/krishnasarala/barcode-scanner-in-C-Sharp/

https://www.codeproject.com/Articles/296533/Using-a-bar-code-scanner-in-NET

Thanks