BlazorQrCodeScanner 1.0.0

BlazorQrCodeScanner

The QrCodeScanner component is a Blazor component for scanning QR codes using a webcam or an image file in WASM, Server and on MAUI Blazor. It is build on Top of html5-qrcode. It is fully customizable and can use NativeBarcode API on supported devices on Android.

Samples

@page "/"
@using BlazorQrCodeScanner
@using BlazorQrCodeScanner.MediaTrack

<QrCodeScanner @ref="qrScanner" Style="display: flex; align-items: center; justify-content: center; overflow: hidden !important;" Width="100%" Height="100vh" OnCreated="OnScannerCreated" OnScannerStarted="OnScanStarted" OnQrSuccess="OnQrCodeScanned">
    @if (isScannerStarted)
    {
        <div id="highlightFrame" style="position: fixed; z-index: 2; width: 100vw; height: 150px; background-color: transparent; outline: 2px solid yellow;">
        </div>
    }
</QrCodeScanner>

<img src="@scannedImage" width="100%" />

@code {
    private QrCodeScanner? qrScanner;
    private bool isScannerStarted;
    private string scannedImage;

    /// <summary>
    /// Initializes the component and requests camera permissions.
    /// </summary>
    protected override async Task OnInitializedAsync()
    {
        //Do native permission check on MAUI only
        if (await Permissions.CheckStatusAsync<Permissions.Camera>() != PermissionStatus.Granted)
        {
            await Permissions.RequestAsync<Permissions.Camera>();
        }
        await base.OnInitializedAsync();
    }

    /// <summary>
    /// Called when the QR code scanner instance is created.
    /// </summary>
    private void OnScannerCreated()
    {
        qrScanner?.StartAsync(new MediaTrackConstraintSet
        {
            FacingMode = VideoFacingMode.Environment
        }, new QrCodeConfig
        {
            FormatsToSupport = new[] { BarcodeType.QR_CODE },
            QrBox = new QrBoxFunction("calculateBoundingBox"), // or pass QrBoxSize width and height or aspectratio as QrBoxNumber
            ExperimentalFeatures = new ExperimentalFeaturesConfig
            {
                UseBarCodeDetectorIfSupported = true
            },
            DefaultZoomValueIfSupported = 2,
            Fps = 10
        });
    }

    /// <summary>
    /// Called when a QR code is successfully scanned.
    /// </summary>
    /// <param name="result">The result of the QR code scan.</param>
    private void OnQrCodeScanned(QrCodeScanResult result)
    {
        Console.WriteLine(result.DecodedText);
        scannedImage = result.ImageUrl;
        StateHasChanged();
    }

    /// <summary>
    /// Called when the scanner starts.
    /// </summary>
    private void OnScanStarted()
    {
        isScannerStarted = true;
        StateHasChanged();
    }
}

// in app.js imported we have viewPort calculation function
window.calculateBoundingBox= function (viewfinderWidth, viewfinderHeight) {
    let minEdgePercentage = 0.999; 
    let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
    let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage);
    return {
        width: qrboxSize,
        height: 150,
    };
};

Documentation

Parameters

• Class (string?): CSS class to apply to the component.
• Id (string): The ID of the scanner element. Default is "reader".
• Style (string?): Inline styles to apply to the component.
• Width (string): Width of the video element. Default is "600px".
• Height (string): Height of the video element. Default is "600px".
• VideoBackground (string): Background color of the video element. Default is "black".
• ChildContent (RenderFragment?): Child content to render inside the component.

Events

• OnCreated (EventCallback): Invoked when the scanner instance is created.
• OnScannerStarted (EventCallback): Invoked when the scanner and camera start scanning.
• OnScannerStartFailed (EventCallback<string?>): Invoked when the camera fails to start.
• OnQrSuccess (EventCallback<QrCodeScanResult>): Invoked when a QR code is successfully scanned.
• OnQrScanFailed (EventCallback<string?>): Invoked when QR code scanning fails.

Public Methods

StartAsync

public ValueTask StartAsync(string cameraId, QrCodeConfig qrCodeConfig)

Starts scanning with the specified camera ID and configuration.

StartAsync

public ValueTask StartAsync(MediaTrackConstraintSet mediaTrackConstraintsConfig, QrCodeConfig qrCodeConfig)

Starts scanning with the specified media track constraints and configuration.

ApplyVideoConstraintsAsync

public ValueTask ApplyVideoConstraintsAsync(MediaTrackConstraintSet videoConstraintsSet)

Applies video constraints to the running video track.

GetStateAsync

public async ValueTask<Html5QrcodeScannerState> GetStateAsync()

Gets the current state of the camera scan.

PauseAsync

public ValueTask PauseAsync(bool pauseVideo = false)

Pauses the ongoing scan.

ResumeAsync

public ValueTask ResumeAsync()

Resumes video and scanning.

StopAsync

public ValueTask StopAsync()

Stops video and scanning.

GetCamerasAsync

public ValueTask<CameraDevice[]> GetCamerasAsync()

Gets the list of available camera devices.

GetRunningTrackSettingsAsync

public ValueTask<MediaTrackSettings> GetRunningTrackSettingsAsync()

Gets the current settings of the running video track.

GetRunningTrackCapabilitiesAsync

public ValueTask<MediaTrackCapabilities> GetRunningTrackCapabilitiesAsync()

Gets the capabilities of the running video track.

GetRunningTrackCameraCapabilitiesAsync

public ValueTask<CameraCapabilities> GetRunningTrackCameraCapabilitiesAsync()

Gets the camera capabilities of the running video track.

ClearAsync

public ValueTask ClearAsync()

Clears the existing canvas.

ScanFileAsync

public ValueTask ScanFileAsync(byte[] array, string contentType, bool showImage = true)

Scans an image file for a QR code. (will fail if webcam scanning is running)

ScanFileV2Async

public ValueTask ScanFileV2Async(byte[] array, string contentType, bool showImage = true)

Scans an image file for a QR code (version 2). (will fail if webcam scanning is running)

Disposal

DisposeAsync

public async ValueTask DisposeAsync()