i working on a project where user capture photo from camera and show capture photo, but I want upload That Photo to server . How we can upload that image file to server . i am new please help me.
please help me how we upload image file to server. i Tried much but can not upload successfully.
<html>
<head>
<title>NigraniSof</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<body>
<button id="start-camera">Start Camera</button>
<video id="video" width="320" height="240" autoplay></video>
<button id="click-photo">Click Photo</button>
<div id="dataurl-container">
<canvas id="canvas" width="320" height="240"></canvas>
<div id="dataurl-header">Image Data URL</div>
<textarea id="dataurl" readonly></textarea>
</div>
<script>
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 dataurl = document.querySelector("#dataurl");
let dataurl_container = document.querySelector("#dataurl-container");
camera_button.addEventListener('click', async function() {
let stream = null;
try {
stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
}
catch(error) {
alert(error.message);
return;
}
video.srcObject = stream;
video.style.display = 'block';
camera_button.style.display = 'none';
click_button.style.display = 'block';
});
click_button.addEventListener('click', function() {
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
let image_data_url = canvas.toDataURL('image/jpeg');
dataurl.value = image_data_url;
dataurl_container.style.display = 'block';
});
</script>
</body>
</html>