<title>

Take a Picture
</title>
<h1>
Take a Picture
</h1>
<video id="video" width="640" height="480" autoplay="">
</video>
<button id="capture">
Capture
</button>
<canvas id="canvas" width="640" height="480" style="display: none;">
</canvas>
<script>
var errornum = -1
// Get access to the user's webcam
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
var video = document.getElementById('video');
video.srcObject = stream;
video.play();
})
.catch(function(error) {
console.log('Error accessing the webcam:', error, errornum);
});
// Capture button click event
document.getElementById('capture').addEventListener('click', function() {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// Draw the current video frame onto the canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// Convert the canvas content to base64 data URL
var dataURL = canvas.toDataURL();
// Display the captured image
var image = document.createElement('img');
image.src = dataURL;
document.body.appendChild(image);
});
</script>
<title>
Image Upload
</title>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*">
<input type="submit" value="Upload">
</form>