Getting started

One package and one namespace - there are no services to register, no script tag and no stylesheet link. Put the scanner on a page that runs on WebAssembly and it opens the camera by itself; everything after the camera hands over its pixels is managed code.

Install

In a Blazor Web App, add the package to the .Client project: the scanner runs in the browser, so its assembly has to be downloaded there.

dotnet add package Bit.BbScanner

Then add the namespace to _Imports.razor:

@using Bit.BbScanner

That is the whole setup. The package's Blazor initializer adds _content/Bit.BbScanner/bit-bbscanner.css to the page, and the component imports its own JavaScript module the first time it renders. Linking the stylesheet yourself also works - the injection then stands down.

A first scanner

The camera starts as soon as the component is ready (AutoStart is on by default) and the browser asks for permission the first time. The scanner prerenders safely on the server and starts once WebAssembly takes over. In a standalone Blazor WebAssembly app leave the @rendermode line out: everything there already runs on WebAssembly.

@page "/scan"
@rendermode InteractiveWebAssembly

<BbScanner Formats="BbBarcodeFormat.QrCode"
           Region="BbScanRegion.CenteredSquare(0.7)"
           OnScan="HandleScan"
           OnError="HandleError" />

@if (_error is not null)
{
    <p role="alert">@_error.Message</p>
}

@code {
    private BbScannerException? _error;

    private void HandleScan(BbBarcodeResult result)
    {
        _error = null;
        Console.WriteLine($"{result.Format}: {result.Text}");
    }

    private void HandleError(BbScannerException error) => _error = error;
}

Live Needs HTTPS or localhost, and camera permission

Ready

Last scan

Scan something to see the strongly typed result here.

No camera to hand? Use image scanning, or open the sample barcodes on another screen.

Where it runs

Camera scanning runs in the browser: the component reads frames through [JSImport] memory views, which only exist on the WebAssembly runtime, and only in a secure context - a page served over HTTPS, or from localhost.

Hosting model	What to do
Blazor WebAssembly	Nothing else: put `<BbScanner />` on a page.
Blazor Web App	Put the package and the scanning pages in the .Client project and render them with `InteractiveWebAssembly`. Under `InteractiveAuto` give the scanning pages `@rendermode InteractiveWebAssembly` explicitly; the rest of the app can stay on Auto.
Blazor Server	The component reports `NotSupported`. Render the page with `InteractiveWebAssembly`, or decode uploads on the server with `BbBarcodeDecoder`.
Blazor Hybrid	The component reports `NotSupported`. Feed the platform camera's frames to `BbBarcodeDecoder`, which runs in-process.

How it works

The browser opens the camera and copies pixels; every stage after that is C#, and reuses its buffers from frame to frame.

Stage	Where	What happens
Capture	Browser	`getUserMedia` feeds a `<video>`; a canvas scales frames to the processing size.
Transfer	Boundary	One `JSImport` call copies RGBA into a reused managed buffer.
Luminance	C#	Fixed point BT.601 weights, with optional subsampling in the same pass.
Binarise	C#	Adaptive 8×8 block thresholds for matrix codes, per-row histograms for linear ones.
Detect	C#	Finder pattern search, perspective transform and grid sampling.
Decode	C#	Reed-Solomon correction, de-interleaving and bit stream parsing.

Where to go next

Narrow Formats to the symbologies you need - it is the single most effective speed-up - then aim with a region and tune the rest in the playground.

Every parameter, live → Barcodes to scan → Scan a photo → API reference →

Edit this page on GitHub