eyuep.sueyruege/IP_13_Playing_Cards
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upload files to "test_examples/PictureScale"

Browse Source
This commit is contained in:
Eyuep Sueyruege
2024-02-24 12:32:44 +01:00
parent 6181a5da83
commit a608abd452
1 changed files with 61 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
test_examples/PictureScale/index.html Normal file
View File

@@ -0,0 +1,61 @@
<!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>