CameraView on Blazor

Shiny.Blazor.Controls.Camera brings the CameraView to Blazor WebAssembly using the browser’s getUserMedia / MediaRecorder / BarcodeDetector APIs. All frame analysis runs in JavaScript — only flat, named DTOs (CameraBarcode, CameraOverlayBox) cross the interop boundary — so the camera stays fast and trim-safe.

• 

Installation

dotnet add package Shiny.Blazor.Controls.Camera

@using Shiny.Blazor.Controls.Camera
@using Shiny.Controls.Camera

getUserMedia requires a secure context — HTTPS, or localhost during development.

Usage

<div style="position:relative;width:100%;max-width:480px;aspect-ratio:3/4;">
    <CameraView @ref="camera"
                Facing="CameraFacing.Back"
                EnableBarcode="true"
                ShowOverlay="true"
                Filter="filter"
                BarcodeDetected="OnBarcode"
                OnError="msg => status = msg"
                Style="width:100%;height:100%;" />
</div>

<button @onclick="Capture">Photo</button>
<button @onclick="ToggleRecording">@(recording ? "Stop" : "Record")</button>

<select @bind="filter">
    @foreach (var f in Enum.GetValues<CameraFilter>())
    {
        <option value="@f">@f</option>
    }
</select>

@code {
    CameraView? camera;
    CameraFilter filter = CameraFilter.None;
    bool recording;
    string? status;

    void OnBarcode(CameraBarcode code)
        => status = $"{code.Format}: {code.Value}";   // code.X/Y/W/H are normalized 0..1

    async Task Capture()
    {
        var jpeg = await camera!.CapturePhotoAsync();          // byte[]
        // ... use the JPEG bytes ...
    }

    async Task ToggleRecording()
    {
        if (!recording) { await camera!.StartRecordingAsync(); recording = true; }
        else { var webm = await camera!.StopRecordingAsync(); recording = false; }  // byte[] (WebM)
    }
}

Parameters

Parameter	Type	Default	Description
Facing	CameraFacing	Back	Front maps to the browser "user" facing mode
EnableBarcode	bool	true	Run the in-browser barcode detector
ShowOverlay	bool	true	Draw overlay boxes on the overlay canvas
AutoStart	bool	true	Start the preview on first render
Filter	CameraFilter	None	Live CSS filter on the <video> element
CssClass / Style	string?	null	Host element styling
BarcodeDetected	EventCallback<CameraBarcode>	—	A barcode was decoded (Format, Value, normalized box)
OverlaysChanged	EventCallback<IReadOnlyList<OverlayBox>>	—	Latest styled overlay boxes (presentation only)
OnError	EventCallback<string>	—	Camera could not start (permission, no device, insecure context)

Methods

StartAsync() · StopAsync() · CapturePhotoAsync() → JPEG byte[] · StartRecordingAsync(includeAudio = true) · StopRecordingAsync() → WebM byte[].

Browser support

• Barcode scanning uses the native BarcodeDetector — available in Chromium browsers (Chrome / Edge). On unsupported browsers (Firefox / Safari) the component raises OnError once and the preview keeps running; slot in a ZXing-js fallback if you need universal coverage.
• Filters map to CSS filter strings, so they work in every browser (temperature filters are approximate — CSS has no true white balance).
• Recording uses MediaRecorder; output is typically WebM.

For barcode generation/rendering (as opposed to scanning), see Barcodes & QR Codes.