-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscanner.html
101 lines (90 loc) · 3.98 KB
/
scanner.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Scanner</title>
<style>
#qr-result {
font-size: 24px;
font-weight: bold;
margin-top: 10px;
}
video {
width: 100%;
max-width: 600px;
}
a {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Scan QR Code</h1>
<video id="video" autoplay></video>
<p id="qr-result">Waiting for QR code...</p>
<script src="https://cdn.jsdelivr.net/npm/jsqr/dist/jsQR.js"></script>
<script>
const videoElement = document.getElementById("video");
const qrResultElement = document.getElementById("qr-result");
let lastScannedCode = ""; // Variable to store the last scanned QR code
// Step 1: Try to access the camera
navigator.mediaDevices.getUserMedia({
video: {
facingMode: "environment", // Use the back camera of your phone (for mobile scanning)
width: { ideal: 1280 }, // Optional: specify resolution
height: { ideal: 720 } // Optional: specify resolution
}
}).then((stream) => {
videoElement.srcObject = stream; // Display the video feed
videoElement.play(); // Start video playback
videoElement.onloadedmetadata = () => {
// Only start scanning when the video has valid metadata (dimensions)
requestAnimationFrame(scanQRCode); // Start scanning once the video is ready
};
}).catch(err => {
qrResultElement.textContent = "Error accessing camera.";
console.error(err);
});
// Step 2: Continuously scan QR codes
function scanQRCode() {
if (videoElement.videoWidth === 0 || videoElement.videoHeight === 0) {
// If video dimensions are not valid, retry the scan
requestAnimationFrame(scanQRCode);
return;
}
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
// Capture the current frame from the video
const videoWidth = videoElement.videoWidth;
const videoHeight = videoElement.videoHeight;
canvas.width = videoWidth;
canvas.height = videoHeight;
context.drawImage(videoElement, 0, 0, videoWidth, videoHeight);
// Get image data from the canvas
const imageData = context.getImageData(0, 0, videoWidth, videoHeight);
const qrCode = jsQR(imageData.data, videoWidth, videoHeight, { inversionAttempts: "dontInvert" });
// Check if a QR code is detected
if (qrCode) {
const qrText = qrCode.data;
// Update the result only if the QR code is different from the last one
if (qrText !== lastScannedCode) {
lastScannedCode = qrText;
// Display the scanned QR code as a clickable link
qrResultElement.innerHTML = `Scanned QR Code: <a href="${qrText}" target="_blank">${qrText}</a>`;
qrResultElement.style.color = "green"; // Show in green
}
} else {
// If no QR code is detected, keep the previous result visible
if (!qrResultElement.innerHTML.includes("Scanned QR Code")) {
qrResultElement.textContent = "Waiting for QR code...";
qrResultElement.style.color = "black"; // Reset color to black when waiting for QR code
}
}
// Continue scanning by calling scanQRCode again
requestAnimationFrame(scanQRCode);
}
</script>
</body>
</html>