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