Bonoscan.Components

A reusable Blazor document-scanner component. It opens the camera, finds the document in real time (Rust + WebAssembly edge detection — no OCR, no ML model), auto-captures when you hold it steady inside the frame, deskews it, and hands you the result. Also does single-image upload and torch/flashlight where supported.

Works in Blazor WebAssembly, Blazor Server (including prerendering), and .NET MAUI Blazor Hybrid — the same package, unchanged.

Install

dotnet add package Bonoscan.Components

That's all you need. The component's JavaScript, Web Worker, and .wasm ship inside the package as static web assets and are served automatically from _content/Bonoscan.Components/scanner/… — nothing to copy, no CDN, no build step. The only dependency is the standard ASP.NET Core Blazor framework you already have.

Use it

1. Register the service (in Program.cs, or MauiProgram.cs for Hybrid):

using Bonoscan.Components;

builder.Services.AddDocumentScanner(o =>
{
    o.GuideAspect   = 0.707;   // A4 portrait guide; auto-rotates; null = no guide
    o.FillThreshold = 0.60;    // document must fill 60% of the guide before capture
    o.CaptureWidth  = 1240;
    o.CaptureHeight = 1754;    // PNG by default; set o.Mime = "image/jpeg" for JPEG
});

2. Drop in the component:

@using Bonoscan.Components

<DocumentScanner OnCaptured="OnCaptured" />

@code {
    private void OnCaptured(ScannerResult r)
    {
        // r.ImageUrl is a short blob: URL, ready for <img src> or a download link.
        // r.FromUpload is true if it came from the file picker rather than the camera.
        // r.Mime is the encoded content type (e.g. "image/png").
    }
}

The full-bleed camera, auto-capture, framing guide, torch, upload, and a result view with Scan again / Download are all built in.

Getting the image data (server / native, not just display)

ScannerResult.ImageUrl is a browser-only blob: URL — perfect for an <img>, but a Blazor Server or MAUI host needs the actual bytes to store, upload, or OCR. Inject DocumentScannerInterop (registered by AddDocumentScanner) and pull the last captured image in whatever shape you need — nothing is transferred until you ask:

@inject DocumentScannerInterop Scanner

@code {
    private async Task OnCaptured(ScannerResult r)
    {
        byte[] bytes      = await Scanner.GetResultBytesAsync();      // WASM / MAUI (in-process)
        await using var s = await Scanner.OpenResultStreamAsync();    // Blazor Server-safe (chunked)
        string dataUrl    = await Scanner.GetResultDataUrlAsync();    // base64, for embedding
        // r.ImageUrl still works for display.
    }
}

OpenResultStreamAsync streams via IJSStreamReference, so it isn't subject to SignalR's per-message size cap — prefer it on Blazor Server for multi-MB scans.

3. Make sure your host links the scoped-CSS bundle. The component's styles ride along in your app's {AppName}.styles.css bundle — the Blazor templates already include this line, but if you removed it, add it back:

<link href="YourApp.styles.css" rel="stylesheet" />

Useful parameters

Options (per-instance override of the DI defaults), OnCaptured, OnError, EnableUpload, ShowResult (set false to render your own result UI from OnCaptured), ShowBrand/BrandText, IdleHint, StartLabel/UploadLabel, IdleContent (a custom idle overlay), and Class. For programmatic control, grab a @ref and call RescanAsync() / StopAsync().

Theme it (CSS variables)

The component is self-contained and themed entirely through CSS custom properties with sensible fallbacks — set them in your app's global CSS (e.g. app.css):

:root {
    --scanner-accent: #3b82f6;       /* primary / lock-on colour      */
    --scanner-accent-ink: #ffffff;   /* text on the accent button     */
    --scanner-amber: #f5b454;        /* "align the frame" colour      */
    --scanner-text: #eef2f4;
    --scanner-danger: #ff6b6b;
    --scanner-bg: #000;              /* letterbox backdrop            */
    --scanner-font: "Inter", system-ui, sans-serif;
    --scanner-mono: "JetBrains Mono", ui-monospace, monospace;
}

Hosting notes

• Camera needs a secure context (HTTPS or localhost) in every host.
• Blazor Server / Web App — fully supported, including prerendering. The camera and WASM run in the browser; only tiny status strings cross SignalR, and results are blob: URLs (not megabyte data URLs), so they stay well under SignalR's message cap. To get the actual bytes server-side, use OpenResultStreamAsync (chunked, not subject to the message cap) rather than GetResultBytesAsync (a single message — would need a raised MaximumReceiveMessageSize). Use any render mode (InteractiveServer, InteractiveWebAssembly, or InteractiveAuto).
• .NET MAUI Blazor Hybrid — grant the platform camera permission yourself (Android CAMERA in the manifest + handle the WebView OnPermissionRequest; iOS NSCameraUsageDescription).
• One scanner instance is active at a time.

Notes

Classical computer vision, not a model — it shines on documents with a visible edge against a contrasting surface and won't find a near-invisible white-on-white page. Portrait phone cameras stream landscape, so you'll see letterbox bars (the whole document stays visible rather than being cropped).