Click here to Skip to main content
15,511,503 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
Posted
Updated 14-Sep-21 21:04pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900