BlazorBarcodeScanner.ZXing.JS 0.2.0

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 5 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