93 lines
2.2 KiB
HTML
93 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, height=device-height, initial-scale=1, user-scalable=0"
|
|
/>
|
|
<title>Instant Photo</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background-color: black;
|
|
}
|
|
|
|
video {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
button {
|
|
position: absolute;
|
|
bottom: 1em;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
/* TODO Use px or vw instead of em */
|
|
width: 100px;
|
|
height: 100px;
|
|
|
|
border: 10px solid #f00;
|
|
border-radius: 100px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
button:active {
|
|
border-color: #fff;
|
|
}
|
|
|
|
button .circle {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 60px;
|
|
margin: auto;
|
|
|
|
background-color: #f00;
|
|
}
|
|
|
|
button:active .circle {
|
|
background-color: #a00;
|
|
}
|
|
</style>
|
|
<script type="module">
|
|
const video = document.getElementById("video");
|
|
const button = document.getElementById("button");
|
|
|
|
// Show camera feed full-screen
|
|
navigator.mediaDevices
|
|
.getUserMedia({ video: { facingMode: { ideal: "environment" } } })
|
|
.then((stream) => {
|
|
video.srcObject = stream;
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error accessing the camera:", error);
|
|
});
|
|
|
|
button.addEventListener("click", () => {
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = video.videoWidth;
|
|
canvas.height = video.videoHeight;
|
|
canvas
|
|
.getContext("2d")
|
|
.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
canvas.toBlob((blob) => {
|
|
const form = new FormData();
|
|
form.append("image", blob);
|
|
form.append("title", new Date().toLocaleString());
|
|
|
|
fetch("photo", { method: "POST", body: form }).catch((error) => {
|
|
console.error("Error uploading image:", error);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<video id="video" autoplay></video>
|
|
<button id="button"><div class="circle"></div></button>
|
|
</body>
|
|
</html>
|