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

You can find nuget package here

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.