<!DOCTYPE html>
<html>
<head>
<title>Book Upload</title>
<script>
function handleFileSelect(event) {
var files = event.target.files || event.dataTransfer.files;
var reader = new FileReader();
reader.onload = function (event) {
var imgElement = document.createElement(“img”);
imgElement.src = event.target.result;
imgElement.style.maxWidth = “300px”;
document.getElementById(“preview”).appendChild(imgElement);
};
reader.readAsDataURL(files[0]);
}
function capturePhoto() {
var video = document.getElementById(“video”);
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (error) {
console.log(“Unable to access camera: ” + error);
});
}
function stopCapture() {
var video = document.getElementById(“video”);
video.srcObject.getTracks().forEach(function (track) {
track.stop();
});
}
function takeSnapshot() {
var video = document.getElementById(“video”);
var canvas = document.createElement(“canvas”);
var context = canvas.getContext(“2d”);
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
stopCapture();
var imgElement = document.createElement(“img”);
imgElement.src = canvas.toDataURL(“image/jpeg”);
imgElement.style.maxWidth = “300px”;
document.getElementById(“preview”).appendChild(imgElement);
}
</script>
</head>
<body>
<h2>Book Upload</h2>
<div id=”preview”></div>
<input type=”file” accept=”image/*” onchange=”handleFileSelect(event)”>
<br>
<button onclick=”capturePhoto()”>Capture Photo</button>
<br>
<video id=”video” style=”display: none;” autoplay></video>
<button onclick=”takeSnapshot()”>Take Snapshot</button>
</body>
</html>