-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
101 lines (70 loc) · 2.67 KB
/
index.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>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.4/html5-qrcode.min.js"
integrity="sha512-k/KAe4Yff9EUdYI5/IAHlwUswqeipP+Cp5qnrsUjTPCgl51La2/JhyyjNciztD7mWNKLSXci48m7cctATKfLlQ==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
</head>
<body>
<style>
main {
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
}
#reader {
width: 600px;
border-radius: 30px;
}
#result {
text-align: center;
font-size: 1.5rem;
}
</style>
<!-- Navigation Bar -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="logo-md.png" alt="" height="30%" width="20%" class="d-inline-block align-text-top">
.
</a>
</div>
</nav><br>
<main>
<div id="reader" class="rounded"></div>
<div id="result"></div>
</main>
</body>
<script>
const scanner = new Html5QrcodeScanner('reader', {
// Scanner will be initialized in DOM inside element with id of 'reader'
qrbox: {
width: 250,
height: 250,
}, // Sets dimensions of scanning box (set relative to reader element width)
fps: 20, // Frames per second to attempt a scan
});
scanner.render(success, error);
// Starts scanner
function success(result) {
document.getElementById('result').innerHTML = `
<h2>Success!</h2>
<p><a href="${result}">${result}</a></p>
`;
// Prints result as a link inside result element
scanner.clear();
// Clears scanning instance
document.getElementById('reader').remove();
// Removes reader element from DOM since no longer needed
}
function error(err) {
console.error(err);
// Prints any errors to the console
}
</script>
</html>