alvin/Spik-en-span
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Spik-en-span.git synced 2026-03-06 13:26:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enhance QR code generation and scanner UI: increase QR code size, improve scanner layout, and add video element styling

Browse Source
This commit is contained in:
vista-man
2025-04-10 20:15:56 +02:00
parent dac3e925c0
commit f4cc70f5bb
4 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
qr/qrCodeScanner.js
View File

@@ -2,15 +2,17 @@ const btnScanQR = document.getElementById('btn-scan-qr');
const qrCanvas = document.getElementById('qr-canvas');
const qrResult = document.getElementById('qr-result');
const outputData = document.getElementById('outputData');
const video = document.getElementById('video');
btnScanQR.addEventListener('click', () => {
btnScanQR.hidden = true; // Hide the QR code icon
video.hidden = false; // Show the video element
qrCanvas.hidden = false;
qrResult.hidden = true;
const context = qrCanvas.getContext('2d');
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
.then((stream) => {
const video = document.createElement('video');
video.srcObject = stream;
video.setAttribute('playsinline', true); // Required to work on iOS
video.play();
@@ -26,6 +28,7 @@ btnScanQR.addEventListener('click', () => {
outputData.innerText = qrCodeData;
qrResult.hidden = false;
qrCanvas.hidden = true;
video.hidden = true; // Hide the video element after scanning
stream.getTracks().forEach(track => track.stop());
} catch (e) {
requestAnimationFrame(scan);