62 lines
2.3 KiB
HTML
62 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kamerafoto aufnehmen</title>
|
|
</head>
|
|
<body>
|
|
|
|
<button id="captureButton">Foto aufnehmen</button>
|
|
<img id="capturedImage" style="display: none;">
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const captureButton = document.getElementById("captureButton");
|
|
const capturedImage = document.getElementById("capturedImage");
|
|
|
|
// Wenn der Button geklickt wird, rufe die Funktion zum Aufnehmen eines Fotos auf
|
|
captureButton.addEventListener("click", function() {
|
|
capturePhoto();
|
|
});
|
|
|
|
function capturePhoto() {
|
|
// Nutzererlaubnis für Kamera erhalten
|
|
navigator.mediaDevices.getUserMedia({ video: true })
|
|
.then(function (stream) {
|
|
// Verbinde den Video-Stream mit einem Video-Element auf der Seite
|
|
const video = document.createElement("video");
|
|
document.body.appendChild(video);
|
|
video.srcObject = stream;
|
|
video.play();
|
|
|
|
// Wenn der Nutzer auf den Button zum Aufnehmen klickt
|
|
captureButton.addEventListener("click", function() {
|
|
// Erstelle ein Canvas mit der gewünschten Größe
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = 75;
|
|
canvas.height = 115;
|
|
const context = canvas.getContext("2d");
|
|
|
|
// Zeichne das aktuelle Bild des Video-Elements auf das Canvas mit der neuen Größe
|
|
context.drawImage(video, 0, 0, 75, 115);
|
|
|
|
// Stoppe den Video-Stream
|
|
stream.getTracks().forEach(track => track.stop());
|
|
|
|
// Verberge das Video-Element und zeige das aufgenommene Bild an
|
|
video.style.display = "none";
|
|
capturedImage.style.display = "block";
|
|
capturedImage.src = canvas.toDataURL("image/png");
|
|
});
|
|
})
|
|
.catch(function (error) {
|
|
console.error("Fehler beim Zugriff auf die Kamera:", error);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|