BlazorBarcodeScanner

Barcode Scanner component for Blazor using zxing-js Interop

Prerequisites

Before you continue, please make sure you have the latest version of Visual Studio and .Net Core installed. Visit official Blazor site to learn more.

Installation

1. NuGet packages

Install-Package BlazorBarcodeScanner.ZXing.JS

or

dotnet add package BlazorBarcodeScanner.ZXing.JS

2. Refence to JS libraries

Add following lines to wwwroot\index.html (for server side _Host.cshtml) before </body> tag.

    <script src="_content/BlazorBarcodeScanner.ZXing.JS/zxingjs-0.17.1.index.min.js"></script>
    <script src="_content/BlazorBarcodeScanner.ZXing.JS/BlazorBarcodeScanner.js"></script>

Usage

Add reference to your .razor page/component for this library

@using BlazorBarcodeScanner.ZXing.JS

Add following component ( with default parameters ) to anywhere you want in your page/component

<BlazorBarcodeScanner.ZXing.JS.BarcodeReader />

or with custom parameters ( below shows default values of parameters)

<BlazorBarcodeScanner.ZXing.JS.BarcodeReader 
    Title="Scan Barcode from Camera"
    StartCameraAutomatically="false"
    ShowStart="true"
    ShowReset="true"
    ShowVideoDeviceList="true"
    VideoWidth="300"
    VideoHeigth="200"
 />

Library raises a custom event when barcode scanner reads a value from video stream, you can attach to that event using example below in @code block.

    private string LocalBarcodeText;
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        BlazorBarcodeScanner.ZXing.JS.JsInteropClass.BarcodeReceived += LocalReceivedBarcodeText; // attach to Barcodereceived event
    }

    private void LocalReceivedBarcodeText(BarcodeReceivedEventArgs args)
    {
        this.LocalBarcodeText = args.BarcodeText;
        StateHasChanged();
    }

Supported Formats

This library uses auto-detect feature of zxing-js library. It supports variety of barcode types. For more information: zxing-js supported types