Garmelon/showbits
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add flip camera button

Browse source
This commit is contained in:
Joscha 2024-03-10 20:16:45 +01:00
parent 571dff3598
commit d20c5a49a4
1 changed files with 72 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

85
showbits-thermal-printer/static/photo.html
View file

@ -19,9 +19,9 @@
height: 100%; height: 100%;
} }
button { #button {
position: absolute; position: absolute;
bottom: 1em; bottom: 20px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@ -34,11 +34,11 @@
background-color: transparent; background-color: transparent;
} }
button:active { #button:active {
border-color: #fff; border-color: #fff;
} }
button .circle { #button .circle {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 60px; border-radius: 60px;
@ -47,23 +47,69 @@
background-color: #f00; background-color: #f00;
} }
button:active .circle { #button:active .circle {
background-color: #a00; background-color: #a00;
} }
#flip {
position: absolute;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background-color: transparent;
border: 5px solid #fff;
border-radius: 100px;
}
#flip:active {
background-color: #fff;
}
#flip svg {
display: block;
margin: auto;
width: 70%;
height: 70%;
}
#flip:active path {
fill: #000;
}
</style> </style>
<script type="module"> <script type="module">
const video = document.getElementById("video"); const video = document.getElementById("video");
const button = document.getElementById("button"); const button = document.getElementById("button");
const flip = document.getElementById("flip");
// Show camera feed full-screen let currentStream = null;
navigator.mediaDevices
.getUserMedia({ video: { facingMode: { ideal: "environment" } } }) function getStreamFacingMode(stream) {
.then((stream) => { if (!stream) return null;
video.srcObject = stream; const videos = stream.getVideoTracks();
}) if (videos.length === 0) return null;
.catch((error) => { const video = videos[0];
console.error("Error accessing the camera:", error); return video.getSettings().facingMode;
}
async function initStream(facingMode) {
// Display video
let stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: { ideal: facingMode } },
}); });
currentStream = stream;
video.srcObject = stream;
// Enable or disable flip button
const actualFacingMode = getStreamFacingMode(stream);
const canFlip = actualFacingMode !== undefined;
flip.hidden = !canFlip;
}
await initStream("environment");
button.addEventListener("click", () => { button.addEventListener("click", () => {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
@ -83,11 +129,24 @@
}); });
}); });
}); });
flip.addEventListener("click", () => {
let facingMode = getStreamFacingMode(currentStream);
if (!facingMode) return;
facingMode = facingMode === "user" ? "environment" : "user";
initStream(facingMode);
});
</script> </script>
</head> </head>
<body> <body>
<video id="video" autoplay></video> <video id="video" autoplay></video>
<button id="button"><div class="circle"></div></button> <button id="button"><div class="circle"></div></button>
<button id="flip" hidden>
<svg viewBox="0 0 6 6">
<path fill="#fff" stroke="none" d="M0,2h1v4h1v-4h1l-1.5,-2"></path>
<path fill="#fff" stroke="none" d="M3,4h1v-4h1v4h1l-1.5,2"></path>
</svg>
</button>
</body> </body>
</html> </html>