Class NuvCamera

Namespace

NuvTools.AspNetCore.Blazor.Components

Assembly

NuvTools.AspNetCore.Blazor.dll

Renders a live camera preview and captures frames from it.

public class NuvCamera : ComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IAsyncDisposable

Inheritance

object

ComponentBase

NuvCamera

Implements

IComponent

IHandleEvent

IHandleAfterRender

IAsyncDisposable

Inherited Members

ComponentBase.OnInitialized()

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.RendererInfo

ComponentBase.Assets

ComponentBase.AssignedRenderMode

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

Examples

<NuvCamera @ref="_camera" FacingMode="CameraFacingMode.Environment"
           Style="width:400px;height:300px" OnError="ShowCameraError" />

@code {
    private NuvCamera _camera = default!;

    private async Task ScanAsync()
    {
        var capture = await _camera.CaptureAsync();
        if (capture is not null) await ReadAsync(capture.Base64);
    }
}

Remarks

The component owns the <video> and the capture <canvas>, and keeps its own media stream — several instances can run side by side. It renders no layout and no styling of its own: size it through Class/Style and draw guides through Overlay. Capture the component with @ref to drive it.

Properties

AdditionalAttributes

Any other attribute is applied to the video element.

[Parameter(CaptureUnmatchedValues = true)]
public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; }

Property Value

IReadOnlyDictionary<string, object>

AutoStart

Whether to start the camera as soon as the component renders.

[Parameter]
public bool AutoStart { get; set; }

Property Value

bool

CaptureHeight

Height of the captured frame, in pixels. Defaults to the stream's native height.

[Parameter]
public int? CaptureHeight { get; set; }

Property Value

int?

CaptureWidth

Width of the captured frame, in pixels. Defaults to the stream's native width.

[Parameter]
public int? CaptureWidth { get; set; }

Property Value

int?

Class

CSS class applied to the video element.

[Parameter]
public string? Class { get; set; }

Property Value

string

DeviceId

Identifier of a specific camera, as returned by GetDevicesAsync(CancellationToken).

[Parameter]
public string? DeviceId { get; set; }

Property Value

string

FacingMode

Which camera to request. Ignored when DeviceId is set.

[Parameter]
public CameraFacingMode FacingMode { get; set; }

Property Value

CameraFacingMode

Format

Format of the captured image.

[Parameter]
public CameraImageFormat Format { get; set; }

Property Value

CameraImageFormat

Height

Requested capture height, in pixels. Treated as ideal — the browser may pick another size.

[Parameter]
public int? Height { get; set; }

Property Value

int?

IsRunning

Whether the stream is currently live.

public bool IsRunning { get; }

Property Value

bool

Mirrored

Whether to mirror the image. Applies to both the preview and the captured frame, so what the user sees is what gets saved. Expected for a selfie camera; leave it off for a rear camera.

[Parameter]
public bool Mirrored { get; set; }

Property Value

bool

OnCaptured

Raised for every captured frame.

[Parameter]
public EventCallback<CameraCapture> OnCaptured { get; set; }

Property Value

EventCallback<CameraCapture>

OnError

Raised when the camera cannot be started — permission denied, no camera, and so on.

[Parameter]
public EventCallback<CameraError> OnError { get; set; }

Property Value

EventCallback<CameraError>

OnStarted

Raised once the stream is live.

[Parameter]
public EventCallback OnStarted { get; set; }

Property Value

EventCallback

Overlay

Content rendered right after the video, for guides, frames or hints.

[Parameter]
public RenderFragment? Overlay { get; set; }

Property Value

RenderFragment

Quality

Compression quality, from 0 to 1. Only used by Jpeg and Webp.

[Parameter]
public double Quality { get; set; }

Property Value

double

Style

Inline style applied to the video element.

[Parameter]
public string? Style { get; set; }

Property Value

string

Width

Requested capture width, in pixels. Treated as ideal — the browser may pick another size.

[Parameter]
public int? Width { get; set; }

Property Value

int?

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

CaptureAsync(CancellationToken)

Captures the current frame. Raises OnCaptured when a frame is produced.

public Task<CameraCapture?> CaptureAsync(CancellationToken cancellationToken = default)

Parameters

cancellationToken CancellationToken

A cancellation token to observe.

Returns

Task<CameraCapture>

The captured frame, or null when the stream has no image yet.

DisposeAsync()

Performs application-defined tasks associated with freeing, releasing, or resetting unmanaged resources asynchronously.

public ValueTask DisposeAsync()

Returns

ValueTask

A task that represents the asynchronous dispose operation.

GetDevicesAsync(CancellationToken)

Lists the video input devices available to the browser.

public Task<IReadOnlyList<CameraDevice>> GetDevicesAsync(CancellationToken cancellationToken = default)

Parameters

cancellationToken CancellationToken

A cancellation token to observe.

Returns

Task<IReadOnlyList<CameraDevice>>

The available cameras.

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered interactively and the UI has finished updating (for example, after elements have been added to the browser DOM). Any ElementReference fields will be populated by the time this runs.

This method is not invoked during prerendering or server-side rendering, because those processes are not attached to any live browser DOM and are already complete before the DOM is updated.

Note that the component does not automatically re-render after the completion of any returned Task, because that would cause an infinite render loop.

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Set to true if this is the first time OnAfterRender(bool) has been invoked on this component instance; otherwise false.

Returns

Task

A Task representing any asynchronous operation.

Remarks

The OnAfterRender(bool) and OnAfterRenderAsync(bool) lifecycle methods are useful for performing interop, or interacting with values received from @ref. Use the firstRender parameter to ensure that initialization work is only performed once.

StartAsync(CancellationToken)

Starts the camera. Raises OnStarted on success and OnError on failure.

public Task<bool> StartAsync(CancellationToken cancellationToken = default)

Parameters

cancellationToken CancellationToken

A cancellation token to observe.

Returns

Task<bool>

true when the stream is live.

StopAsync(CancellationToken)

Stops the camera and releases the device — every track is stopped, so the camera light goes off.

public Task StopAsync(CancellationToken cancellationToken = default)

Parameters

cancellationToken CancellationToken

A cancellation token to observe.

Returns

Task

A Task representing the asynchronous operation.

SwitchDeviceAsync(string, CancellationToken)

Starts the camera on a specific device, without changing DeviceId.

public Task<bool> SwitchDeviceAsync(string deviceId, CancellationToken cancellationToken = default)

Parameters

deviceId string

The device to use, as returned by GetDevicesAsync(CancellationToken).

cancellationToken CancellationToken

A cancellation token to observe.

Returns

Task<bool>

true when the stream is live.