How to Build a Barcode and QR Code Reader with HTML5 and ASP.NET

HTML5 is universally supported across all modern browsers — Chrome, Edge, Safari, Firefox, and Opera — on both desktop and mobile, as well as WebView components used in native Android and iOS apps. This cross-platform reach means a single ASP.NET web application can serve all users without maintaining separate native codebases.

This guide shows how to build a barcode and QR code reader using HTML5, ASP.NET (C#), and the Dynamsoft Barcode Reader SDK. The architecture follows a server-side decoding model: the browser captures an image, uploads it via HTTP, and the ASP.NET backend performs barcode and QR code recognition using Dynamsoft’s high-accuracy engine.

Prefer client-side decoding? Dynamsoft also supports fully in-browser barcode scanning via JavaScript and WebAssembly. See Build a Barcode Scanner Using JavaScript and HTML5 for that approach.

Why Server-Side Barcode Decoding?

For teams evaluating architecture options, server-side decoding offers distinct advantages:

Factor Server-Side (.NET) Client-Side (JS/WASM)
Processing power Full server CPU/GPU Limited to device hardware
SDK update control Centralized, no client update needed Depends on browser cache / CDN
Sensitive data handling Image stays on server Image processed on device
Low-end device support Offloads compute from weak devices May struggle on older phones
Bundle size No JS payload overhead WASM adds ~2 MB to client

Server-side decoding is well-suited for enterprise workflows, document intake pipelines, and applications where accuracy and control outweigh the need for offline or real-time scanning.

Common Use Cases

  • Inventory and warehouse management: Workers scan barcodes on mobile devices; results are processed and logged server-side.
  • Healthcare patient intake: QR codes on forms are uploaded and decoded by a secured backend.
  • Retail and e-commerce: Product barcode lookups routed through an ASP.NET API layer.
  • Document digitization: Batch image uploads with server-side barcode extraction for indexing.

Prerequisites

Step-by-Step: Build a Barcode and QR Code Reader in ASP.NET

Step 1: Create a New ASP.NET MVC Project

Scaffold a new MVC project using the .NET CLI:

dotnet new mvc -o MvcBarcodeQRCode

Step 2: Install the Dynamsoft Barcode Reader NuGet Package

Add the Dynamsoft Barcode Reader bundle to your project. This package includes the full recognition engine for 1D barcodes, QR codes, PDF417, DataMatrix, and more:

dotnet add package Dynamsoft.DotNet.BarcodeReader.Bundle

Step 3: Build the HTML5 Client UI

Open Views/Home/Index.cshtml and add a file input for image selection, a scan button, a results container, and an image preview element:

<div class="text-center">
    <h1 class="display-4">ASP.NET Barcode and QR Code Reader</h1>
    <input type="file" id="file" accept="image/*" name="barcodeImage"/>
    <button id="btn-scan" onclick="upload()">Scan</button>
    <div id="results"></div>
    <br>
    <img id="image"/>
</div>

Then add the corresponding JavaScript to wwwroot/js/site.js. The FileReader API previews the selected image locally before upload; XMLHttpRequest posts the image to the ASP.NET /upload endpoint and displays the decoded results:

document.getElementById("file").addEventListener("change", function () {
    let file = this.files[0];
    let image = document.getElementById('image');
    let reader = new FileReader();

    reader.addEventListener("load", function () {
        image.src = reader.result;
    }, false);

    if (file) {
        reader.readAsDataURL(file);
    }
});

function upload() {
    const host = location.hostname
    const protocol = location.protocol
    const uploadPath = '/upload'
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    let file = document.getElementById('file').files[0];
    formData.append('barcodeImage', file, file.name);
    xhr.open('POST', uploadPath, true);
    xhr.send(formData);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("results").innerHTML = "Detection Results: " + xhr.responseText;
        }
    }
}

Add responsive CSS to wwwroot/css/site.css so the image preview scales correctly on both desktop and mobile screens:

img {
    max-width: 100%;
    min-width: 250px;
    height: auto;
}

Step 4: Generate the File Upload Controller

ASP.NET controllers handle incoming HTTP requests. Use the code generator to scaffold a controller class:

dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet aspnet-codegenerator controller -name FileController -outDir Controllers

Per the ASP.NET Routing documentation, route attributes on action methods map HTTP requests to controller logic. The following handler accepts single or batch image uploads and saves them to a local Upload/ directory:

[ApiController]
public class FileController : Controller
{
    [HttpPost("/upload")]
    public async Task<IActionResult> Upload()
    {
        var files = Request.Form.Files;        
        var path = Path.Combine(Directory.GetCurrentDirectory(), "Upload");
        if (!Directory.Exists(path))
        {
            Directory.CreateDirectory(path);
        }

        foreach (var uploadFile in files)
        {
            var fileName = uploadFile.FileName;
            var filePath = Path.Combine(path, fileName);

            using (var stream = System.IO.File.Create(filePath))
            {
                await uploadFile.CopyToAsync(stream);
            }
            
        }

        return Ok();
    }
}

Step 5: Integrate Dynamsoft Barcode Reader for Server-Side Recognition

After a file is saved, initialize the LicenseManager with your trial or production license key, then use CaptureVisionRouter.Capture() to decode barcodes and QR codes from the uploaded image:

using Dynamsoft.DBR;
using Dynamsoft.License;
using Dynamsoft.CVR;
using Dynamsoft.Core;

string errorMsg;
int errorCode = LicenseManager.InitLicense("LICENSE-KEY", out errorMsg);
if (errorCode != (int)EnumErrorCode.EC_OK)
{
    return Ok("License error: " + errorMsg);
}

var output = "No barcode found.";
using (CaptureVisionRouter cvr = new CaptureVisionRouter())
{
    foreach (var uploadFile in files)
    {
        var fileName = uploadFile.FileName;
        var filePath = Path.Combine(path, fileName);

        using (var stream = System.IO.File.Create(filePath))
        {
            await uploadFile.CopyToAsync(stream);
        }

        CapturedResult result = cvr.Capture(filePath, PresetTemplate.PT_READ_BARCODES);
        DecodedBarcodesResult? barcodesResult = result.GetDecodedBarcodesResult();
        if (barcodesResult != null)
        {
            BarcodeResultItem[] items = barcodesResult.GetItems();
            if (items.Length > 0)
            {
                output = "";
                foreach (BarcodeResultItem barcodeItem in items)
                {
                    output += barcodeItem.GetText() + "\n";
                }
            }
            else
            {
                output = "No barcode found.";
            }
        }
        else
        {
            output = "No barcode found.";
        }
    }
}

return Ok(output);

Step 6: Run the Application Locally

Restore dependencies and start the development server:

dotnet restore
dotnet run

Open the app in any browser, select an image containing a barcode or QR code, and click Scan to see decoded results returned from the server.

Barcode and QR code reader built with HTML5 and ASP.NET

Step 7: Publish for Production Deployment

Build a release-optimized binary for deployment to IIS, Azure App Service, or any Linux/Windows host:

dotnet publish --configuration Release

Performance and Accuracy Notes

  • Dynamsoft Barcode Reader supports 30+ barcode formats including Code 128, Code 39, EAN/UPC, QR Code, PDF417, DataMatrix, and Aztec.
  • The server-side CaptureVisionRouter engine uses multi-threaded processing and is optimized for high-throughput batch scenarios.
  • For low-latency use cases (real-time scanning), consider the JavaScript SDK which runs entirely in-browser via WebAssembly.
  • Both SDKs share the same underlying algorithm, ensuring consistent accuracy across client and server deployments.

Source Code

https://github.com/yushulx/dotnet-barcode-qr-code-sdk/tree/main/example/official/aspnet