How to Read Barcodes from Webcam in Web Applications in ASP.NET and ASP

Barcodes are a very widely used technology. If we have the right tools to work with it, it will be very beneficial to our business irrespective of the business domain.

In this tutorial, we’ll look into the small asp.net web application, which will read barcode values from a webcam video input. Basically, it’ll take video frame-by-frame and try to read the barcode within a particular frame. Here, ByteScout Barcode Reader SDK is used to read barcode values from a given input.

Read Barcodes from a Webcam – Demo

Let’s review the following demo beforehand to make things more interesting.

Full source code of this video is available at this GitHub link.

Read Barcodes from a Webcam – Tutorial

Please clone/download source code in your machine and try to explore. Following are the step-by-step guide on how to run a web app on your machine.

This article shows how to make barcode reading from web camera in ASP.NET application with Barcode Reader SDK, HTML5 (or flash), and Javascript

Here is the screenshot showing how the Google Chrome browser runs ASP.NET code reading Code 128 barcodes from webcam:

IMPORTANT: it is possible to use webcam from Internet Explorer 9+ (with flash enabled), Chrome, Firefox, Safari

Read Barcodes from a Webcam – Step-by-Step

To run the sample Visual Studio 2008/2010/2012 or higher is required.

1. Install evaluation copy of BarCode Reader SDK (the latest version is required)
2. in Visual Studio use File – Open – Web-Site.. and open the folder with this sample
3. Add a reference to ByteScout BarCode Reader dll using the menu: Website – Add Reference (find Bytescout Barcode Reader SDK on .NET tab, select and click OK to add a reference)
4. Right-click on “Default.aspx” file and select “Set As Start Page”
5. Run the project in debug mode
6. Visual Studio will run your project in Internet Explorer or another browser. When the browser asks for permission to access the webcam click “Allow” to allow access to the webcam
7. Click the “START BARCODE SCAN..” button so the page will start automatically to grab frames from the video and sending it to server-side code to read barcodes using Barcode Reader SDK
8. IMPORTANT: barcode should be in focus. Some webcams are not focusing on small barcodes, you may need to adjust the focus on your webcam so it will work OK with small images like barcodes
9. Click Stop to stop barcode scanning

Select barcode type to scan (by default scans for all known types).

You can look at the code in ByteScout Blog. The full source code of this sample is included in the evaluation version of BarCode Reader SDK.

Another sample of how to read barcodes from a web camera for desktop applications is here.