Capturing image in webcam and pass the parameters to blazor page

See more:

.NET

Razor

Hi,
Iam new to blazor and working in it.
I want to capture the image from video (webcam) and scan the image.
Using javascript,

function accesscamera(id) {

let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");
let canvas1 = document.getElementById('video');
camera_button.addEventListener('click', async function () {

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

click_button.addEventListener('click', function () {
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
let image_data_url = canvas.toDataURL('image/jpeg');

console.log(image_data_url);

});
}

I captured image from video, now the image bytes are in variable

image_data_url

". Now I want to save the image bytes as image to a project folder in blazor page.
How to pass this parameter (

image_data_url

to blazor page. I tried in many ways. I assigned to label,

<label id="lblbytes" value="@id">1</label>

it's displaying the value but at runtime null value is returned.
Can anyone help me in this?

What I have tried:

function accesscamera(id) {

    let camera_button = document.querySelector("#start-camera");
    let video = document.querySelector("#video");
    let click_button = document.querySelector("#click-photo");
    let canvas = document.querySelector("#canvas");
    let canvas1 = document.getElementById('video');
    camera_button.addEventListener('click', async function () {

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

     click_button.addEventListener('click', function () {
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
        let image_data_url = canvas.toDataURL('image/jpeg');
        
        console.log(image_data_url);
        
    });
}

I called this Javascript function in razor page as

await JSRuntime.InvokeAsync<string>("accesscamera");

I also assigned the variable

imgconverted.src = image_data_url;

to img tag, only the image is displayed.
Don't know how to save the image in folder in blazor page