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.
    }
}

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

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. 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).