Html5QrcodeBlazor.Wrapper 1.0.0

.NET 7.0 This package targets .NET 7.0. The package is compatible with this framework or higher.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package Html5QrcodeBlazor.Wrapper --version 1.0.0                

                    
                

            
NuGet\Install-Package Html5QrcodeBlazor.Wrapper -Version 1.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Html5QrcodeBlazor.Wrapper" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add Html5QrcodeBlazor.Wrapper --version 1.0.0                

                    
                

            
#r "nuget: Html5QrcodeBlazor.Wrapper, 1.0.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install Html5QrcodeBlazor.Wrapper as a Cake Addin
#addin nuget:?package=Html5QrcodeBlazor.Wrapper&version=1.0.0

// Install Html5QrcodeBlazor.Wrapper as a Cake Tool
#tool nuget:?package=Html5QrcodeBlazor.Wrapper&version=1.0.0

Html5QrcodeBlazor.DemoWasm

This is blazor wrapper over html5-qrcode JS libarary. I was trying using other libararies allready ported to Blazor, but html5-qrcode is reading barcodes way better.

html5-qrcode documentation

Usage

  1. Register service: builder.Services.AddScoped<Html5QrcodeReader>();
  2. Add script tag in index.html: <script src="/_content/Html5QrcodeBlazor.Wrapper/html5-qrcode.min.js"></script>
  3. Inject service in Razor page: @inject Html5QrcodeReader cameraBarcodeReader
  4. Subscribe to OnBarcodeScan event:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        cameraBarcodeReader.OnBarcodeScan += HandleBarcodeScanDebounced;
    }
}
public async Task HandleBarcodeScan(string barcode)
{
    foundBarcode = barcode.Trim();
}

At this point you have 2 options:

  • Easy Mode which includes UI
  • Pro Mode with more customizations

For Pro Mode check Index.razor.

For Easy Mode check EasyMode.razor.

Remember to implement @implements IAsyncDisposable:

public async ValueTask DisposeAsync()
{
    cameraBarcodeReader.OnBarcodeScan -= HandleBarcodeScanDebounced;
    await cameraBarcodeReader.Stop();
}

Explore Html5QrcodeBlazor.DemoWasm project for more details.

Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.1 1,544 4/12/2024
1.0.0 580 5/4/2023