From 09d4c8bbeb871c6227004c0d6c0ec14f2f7f7497 Mon Sep 17 00:00:00 2001 From: vista-man <524715@vistacollege.nl> Date: Thu, 3 Apr 2025 13:27:44 +0200 Subject: [PATCH] add QR code scanner functionality with HTML, CSS, and JavaScript --- qr/qr.html | 28 +++++++++++++++++++++++ qr/qrCodeScanner.js | 56 +++++++++++++++++++++++++++++++++++++++++++++ qr/styles.css | 48 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 132 insertions(+) create mode 100644 qr/qr.html create mode 100644 qr/qrCodeScanner.js create mode 100644 qr/styles.css diff --git a/qr/qr.html b/qr/qr.html new file mode 100644 index 0000000..0c1eff6 --- /dev/null +++ b/qr/qr.html @@ -0,0 +1,28 @@ + + + + QR Code Scanner + + + + + + + +
+

QR Code Scanner

+ + + + + + + + +
+ + + + diff --git a/qr/qrCodeScanner.js b/qr/qrCodeScanner.js new file mode 100644 index 0000000..2fc9770 --- /dev/null +++ b/qr/qrCodeScanner.js @@ -0,0 +1,56 @@ +const video = document.createElement("video"); +const canvasElement = document.getElementById("qr-canvas"); +const canvas = canvasElement.getContext("2d"); + +const qrResult = document.getElementById("qr-result"); +const outputData = document.getElementById("outputData"); +const btnScanQR = document.getElementById("btn-scan-qr"); + +let scanning = false; + +qrcode.callback = res => { + if (res) { + outputData.innerText = res; + scanning = false; + + video.srcObject.getTracks().forEach(track => { + track.stop(); + }); + + qrResult.hidden = false; + canvasElement.hidden = true; + btnScanQR.hidden = false; + } +}; + +btnScanQR.onclick = () => { + navigator.mediaDevices + .getUserMedia({ video: { facingMode: "environment" } }) + .then(function(stream) { + scanning = true; + qrResult.hidden = true; + btnScanQR.hidden = true; + canvasElement.hidden = false; + video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen + video.srcObject = stream; + video.play(); + tick(); + scan(); + }); +}; + +function tick() { + canvasElement.height = video.videoHeight; + canvasElement.width = video.videoWidth; + canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height); + + scanning && requestAnimationFrame(tick); +} + +function scan() { + try { + qrcode.decode(); + } catch (e) { + setTimeout(scan, 300); + } +} diff --git a/qr/styles.css b/qr/styles.css new file mode 100644 index 0000000..6a6fb3f --- /dev/null +++ b/qr/styles.css @@ -0,0 +1,48 @@ +html { + height: 100%; + } + + body { + font-family: sans-serif; + padding: 0 10px; + height: 100%; + background: black; + margin: 0; + } + + h1 { + color: white; + margin: 0; + padding: 15px; + } + + #container { + text-align: center; + margin: 0; + } + + #qr-canvas { + margin: auto; + width: calc(100% - 20px); + max-width: 400px; + } + + #btn-scan-qr { + cursor: pointer; + } + + #btn-scan-qr img { + height: 10em; + padding: 15px; + margin: 15px; + background: white; + } + + #qr-result { + font-size: 1.2em; + margin: 20px auto; + padding: 20px; + max-width: 700px; + background-color: white; + } + \ No newline at end of file