Step-by-Step Guide: Connect Blazor to Device Camera with JavaScript Interop and Face Recognition Logic

cd AIPatrolCamera
dotnet restore
dotnet run

@page "/patrol"
@rendermode InteractiveServer
@implements IAsyncDisposable

<PageTitle>Patrol</PageTitle>

<h1>AI Patrol Mode</h1>

<video id="video" autoplay playsinline class="patrol-video"></video>
<canvas id="canvas" class="d-none"></canvas>

@if (alertVisible)
{
    <div class="alert-box" role="alert" aria-live="assertive">
        <h2>⚠ MATCH FOUND</h2>
        <p><strong>Name:</strong> @alertName</p>
        <p><strong>Risk:</strong> @alertRisk</p>
        <p><strong>Action:</strong> @alertInstruction</p>
    </div>
}

<button class="btn btn-danger mt-3" @onclick="StartPatrolAsync">Start Patrol</button>

@code {
    private bool alertVisible;
    private string alertName = string.Empty;
    private string alertRisk = string.Empty;
    private string alertInstruction = string.Empty;
    private DotNetObjectReference<Patrol>? dotNetReference;
    private bool isInteractive;

    [Inject]
    private IJSRuntime JS { get; set; } = default!;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            isInteractive = true;
        }
    }

    private async Task StartPatrolAsync()
    {
        dotNetReference ??= DotNetObjectReference.Create(this);
        await JS.InvokeVoidAsync("patrolCamera.start", dotNetReference);
    }

    [JSInvokable]
    public Task ShowAlert(string name, string riskLevel, string instruction)
    {
        alertName = name;
        alertRisk = riskLevel;
        alertInstruction = instruction;
        alertVisible = true;
        StateHasChanged();
        return Task.CompletedTask;
    }

    public async ValueTask DisposeAsync()
    {
        if (!isInteractive)
        {
            dotNetReference?.Dispose();
            return;
        }

        try
        {
            await JS.InvokeVoidAsync("patrolCamera.stop");
        }
        catch (JSDisconnectedException)
        {
        }

        dotNetReference?.Dispose();
    }
}

await JS.InvokeVoidAsync("patrolCamera.start", dotNetReference);

   navigator.mediaDevices.getUserMedia({ video: true })

   dotNetHelper.invokeMethodAsync("ShowAlert", ...)

window.patrolCamera = (() => {
    let dotNetHelper = null;
    let stream = null;
    let captureTimer = null;

    async function start(helper) {
        dotNetHelper = helper;

        const video = document.getElementById("video");
        if (!video) {
            return;
        }

        if (captureTimer) {
            clearInterval(captureTimer);
            captureTimer = null;
        }

        stream = await navigator.mediaDevices.getUserMedia({ video: true });
        video.srcObject = stream;

        captureTimer = setInterval(captureFrame, 3000);
    }

    async function captureFrame() {
        const video = document.getElementById("video");
        const canvas = document.getElementById("canvas");

        if (!video || !canvas || !dotNetHelper || video.videoWidth === 0 || video.videoHeight === 0) {
            return;
        }

        const context = canvas.getContext("2d");
        if (!context) {
            return;
        }

        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        context.drawImage(video, 0, 0);

        const image = canvas.toDataURL("image/jpeg");

        const response = await fetch("/api/detect", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ image })
        });

        if (!response.ok) {
            return;
        }

        const result = await response.json();
        if (result?.match) {
            await dotNetHelper.invokeMethodAsync(
                "ShowAlert",
                result.name ?? "Unknown",
                result.riskLevel ?? "Unknown",
                result.instruction ?? "Observe and Report");
        }
    }

    function stop() {
        if (captureTimer) {
            clearInterval(captureTimer);
            captureTimer = null;
        }

        if (stream) {
            for (const track of stream.getTracks()) {
                track.stop();
            }
            stream = null;
        }

        dotNetHelper = null;
    }

    return { start, stop };
})();

<script src="@Assets["js/patrolCamera.js"]"></script>
<script src="@Assets["_framework/blazor.web.js"]"></script>

[ApiController]
[Route("api/[controller]")]
public class DetectController(FaceRecognitionService faceRecognitionService) : ControllerBase
{
    [HttpPost]
    public async Task<IActionResult> Detect([FromBody] ImageRequest request, CancellationToken cancellationToken)
    {
        if (request is null)
        {
            return BadRequest();
        }

        var result = await faceRecognitionService.DetectAsync(request.Image, cancellationToken);
        return Ok(result);
    }
}

public class FaceRecognitionService(AppDbContext dbContext)
{
    public async Task<DetectResponse> DetectAsync(string imageData, CancellationToken cancellationToken)
    {
        if (string.IsNullOrWhiteSpace(imageData))
        {
            return new DetectResponse { Match = false };
        }

        var imageBytes = TryDecodeBase64(imageData);
        if (imageBytes is null || imageBytes.Length == 0)
        {
            return new DetectResponse { Match = false };
        }

        var firstKnownPerson = await dbContext.People
            .AsNoTracking()
            .OrderBy(x => x.Id)
            .FirstOrDefaultAsync(cancellationToken);

        if (firstKnownPerson is null)
        {
            return new DetectResponse
            {
                Match = true,
                Name = "Test Person",
                RiskLevel = "Medium",
                Instruction = "Observe and Report"
            };
        }

        return new DetectResponse
        {
            Match = true,
            Name = firstKnownPerson.Name,
            RiskLevel = firstKnownPerson.RiskLevel,
            Instruction = "Observe and Report"
        };
    }
}

"Database": {
  "Provider": "Postgres"
}

public interface IDbProviderStrategy
{
    string ProviderName { get; }
    void Configure(DbContextOptionsBuilder optionsBuilder, IConfiguration configuration);
}

public class PostgresDbProviderStrategy : IDbProviderStrategy
{
    public string ProviderName => "Postgres";

    public void Configure(DbContextOptionsBuilder optionsBuilder, IConfiguration configuration)
    {
        var connectionString = configuration.GetConnectionString("DefaultConnection")
            ?? throw new InvalidOperationException("ConnectionStrings:DefaultConnection is required for Postgres provider.");

        optionsBuilder.UseNpgsql(connectionString);
    }
}

public class SqliteDbProviderStrategy : IDbProviderStrategy
{
    public string ProviderName => "Sqlite";

    public void Configure(DbContextOptionsBuilder optionsBuilder, IConfiguration configuration)
    {
        var connectionString = configuration.GetConnectionString("SqliteConnection")
            ?? "Data Source=AIPatrolCamera.db";

        optionsBuilder.UseSqlite(connectionString);
    }
}

public class DbProviderStrategyResolver(IEnumerable<IDbProviderStrategy> strategies, IConfiguration configuration)
{
    public IDbProviderStrategy Resolve()
    {
        var configuredProvider = configuration["Database:Provider"] ?? "Postgres";

        var strategy = strategies.FirstOrDefault(s =>
            string.Equals(s.ProviderName, configuredProvider, StringComparison.OrdinalIgnoreCase));

        return strategy ?? throw new InvalidOperationException($"Unsupported Database:Provider '{configuredProvider}'.");
    }
}

builder.Services.AddSingleton<IDbProviderStrategy, SqliteDbProviderStrategy>();
builder.Services.AddSingleton<IDbProviderStrategy, PostgresDbProviderStrategy>();
builder.Services.AddSingleton<DbProviderStrategyResolver>();
builder.Services.AddDbContext<AppDbContext>((serviceProvider, options) =>
{
    var strategyResolver = serviceProvider.GetRequiredService<DbProviderStrategyResolver>();
    var strategy = strategyResolver.Resolve();
    strategy.Configure(options, builder.Configuration);
});

dotnet run

public class FaceRecognitionService(AppDbContext dbContext)
{
    public async Task<DetectResponse> DetectAsync(string imageData, CancellationToken cancellationToken)
    {
        var imageBytes = DecodeImage(imageData);
        if (imageBytes.Length == 0)
        {
            return new DetectResponse { Match = false };
        }

        // 1) preprocess image -> tensor
        // 2) run ONNX inference -> embedding
        // 3) compare embedding with dbContext.People FaceEmbedding
        // 4) pick best score above threshold

        var threshold = 0.80f;
        var bestMatch = await dbContext.People.AsNoTracking().FirstOrDefaultAsync(cancellationToken);

        if (bestMatch is null)
        {
            return new DetectResponse { Match = false };
        }

        return new DetectResponse
        {
            Match = true,
            Name = bestMatch.Name,
            RiskLevel = bestMatch.RiskLevel,
            Instruction = "Observe and Report"
        };
    }
}