The screen is stuck and taking a long time to display or process the image

screen is getting stuck while saving the image and it is taking 40 to 50 seconds to display the saving image.
ImageCaptureDialog.razor code:

@using System.ComponentModel.DataAnnotations
@using Newtonsoft.Json
@using System.Text
@using MudBlazor
 
@inject IJSRuntime JSR
@inject HttpClient HttpClient
@inject IDialogService DialogService
@inject ISnackbar Snackbar
 
<div>
<MudDialog Style="overflow: hidden;">
<DialogContent>
<MudCard Class="pa-2">
<MudCardContent>
<div id="spinner" style="display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: 1000;">
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
</div>
<div style="display: flex; justify-content: center; align-items: center;">
 
                      
<video id="videoFeed" width="600" height="300"></video>
</div>
<canvas class="d-none" id="currentFrame" width="800" height="600"></canvas>
 
                   
                    @if (!string.IsNullOrEmpty(frameUri))
                    {
<img src="@frameUri" alt="Captured Image" width="1280" height="720" />
<p>Image Size: @imageSizeInKB KB</p>
                    }
 
                    <div style="display: flex; justify-content: center; margin-top: 16px;">
<MudIconButton Icon="@Icons.Material.Filled.CameraAlt" Color="Color.Primary" Size="Size.Large" OnClick="@Save"/>
<MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Cancel" Size="Size.Large" OnClick="@Cancel"/>
</div>
</MudCardContent>
</MudCard>
</DialogContent>
</MudDialog>
</div>
 
@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    [Parameter] public string ImageUri { get; set; }
 
    private DotNetObjectReference<ImageCaptureDialog> oCounter;
    private string frameUri;
    private bool isVideoStarted = false;
    private double imageSizeInKB;
 
    protected override async Task OnInitializedAsync()
    {
        try
        {
            await JSR.InvokeVoidAsync("startVideo", "videoFeed");
            isVideoStarted = true;
        }
        catch (Exception ex)
        {
            Snackbar.Add("Camera access is denied. Please allow access to the camera.", Severity.Error);
        }
    }
 
    private async Task Save()
    {
        if (!isVideoStarted)
        {
            Snackbar.Add("Camera access is denied. Please allow access to the camera.", Severity.Error);
            MudDialog.Cancel();
            return;
        }
 
        if (oCounter == null)
            oCounter = DotNetObjectReference.Create(this);
 
        try
        {
            await JSR.InvokeVoidAsync("showLoadingSpinner");
            await JSR.InvokeAsync<string>("getFrame", "videoFeed", "currentFrame", oCounter);
            await JSR.InvokeVoidAsync("stopVideo", "videoFeed");
            isVideoStarted = false;
 
            // Hide the spinner after the image is captured
            await JSR.InvokeVoidAsync("hideLoadingSpinner");
 
            MudDialog.Close(DialogResult.Ok(frameUri));
        }
        catch (Exception ex)
        {
            // Hide the spinner in case of an error
            await JSR.InvokeVoidAsync("hideLoadingSpinner");
 
            Snackbar.Add($"An error occurred while capturing the image. Please try again. Error details: {ex.Message}", Severity.Error);
            MudDialog.Cancel();
        }
    }
 
 
   
    [JSInvokable]
    public async Task ProcessImage(string base64Image, int imageSizeInBytes)
    {
            //await Task.Delay(10000);
            // Simulate heavy processing or saving logic here
            frameUri = base64Image;
            imageSizeInKB = Math.Round(imageSizeInBytes / 1024.0, 2); // Convert bytes to KB
 
            // Example: Save the image data or do further processing.
            // SaveImageToDisk(frameUri);
    }
 
 
    private async Task Cancel()
    {
        if (isVideoStarted)
        {
            try
            {
                await JSR.InvokeVoidAsync("stopVideo", "videoFeed");
                isVideoStarted = false;
                MudDialog.Cancel();
            }
            catch (Exception ex)
            {
                MudDialog.Cancel();
            }
        }
    }
}

camera.js code:

async function getFrame(src, dest, dotnetHelper) {
    try {
        showLoadingSpinner();
        let video = document.getElementById(src);
        let canvas = document.getElementById(dest);

        if (video && canvas) {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            let ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            let dataUrl = canvas.toDataURL("image/png");
            const base64ImageSize = Math.round((dataUrl.length * 3) / 4);

            await dotnetHelper.invokeMethodAsync('ProcessImage', dataUrl, base64ImageSize);
        } else {
            console.error('Video or canvas element not found.');
            throw new Error('Video or canvas element not found.');
        }
    } catch (error) {
        console.error('Error capturing frame:', error);
        throw error;
    } finally {
        hideLoadingSpinner();
    }
}

the image quality is good but while processing image it is taking so much time and also screen is getting stuck.

how to display the image immediately with good quality after clicking the save button.