Skip to content

Commit f00dcab

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1438 from Swap-Nova/main
QR Code Reader
2 parents 4ac4905 + 8dddceb commit f00dcab

11 files changed

Lines changed: 134 additions & 0 deletions

File tree

‎Projects/QR Code Reader/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules

‎Projects/QR Code Reader/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## Module Description:
2+
- Html5-QRCode library, can initialize a QR code scanning instance that allows a user to scan a QR code from their webcam or upload from file.
3+
- The library implements a standard UI into a DOM element that you specify.
4+
5+
## Importing Html5-QRCode:
6+
```bash
7+
cd C:\Users\You\Desktop\your-project-folder
8+
npm init --y
9+
npm i html5-qrcode
10+
```
11+
12+
## Adding the library to your project:
13+
- You can then import it into your project by including script linking to the html5-qrcode.min.js file that the installation creates in the <head> of your document:
14+
15+
```html
16+
<script src="./node_modules/html5-qrcode/html5-qrcode.min.js"></script>
17+
```

‎Projects/QR Code Reader/assets/favicon.ico‎

318 Bytes
Binary file not shown.

‎Projects/QR Code Reader/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="icon" href="./assets/favicon.ico">
8+
<link rel="stylesheet" href="./styles/styles.css">
9+
<title>QR Code Scanner</title>
10+
11+
<!-- <script src="./node_modules/html5-qrcode/html5-qrcode.min.js"></script> -->
12+
<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>
13+
</head>
14+
<body>
15+
<main>
16+
<div id="reader"></div>
17+
<div id="result"></div>
18+
</main>
19+
20+
<script src="./src/script.js"></script>
21+
</body>
22+
</html>

‎Projects/QR Code Reader/package-lock.json‎

Lines changed: 28 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Projects/QR Code Reader/package.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "qr-code-reader",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "script.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"dependencies": {
13+
"html5-qrcode": "^2.3.8"
14+
}
15+
}

‎Projects/QR Code Reader/src/script.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// console.log(Html5QrcodeScanner);
2+
const scanner = new Html5QrcodeScanner('reader',{
3+
qrbox : {
4+
width: 250,
5+
height: 250,
6+
},
7+
fps : 20,
8+
});
9+
10+
scanner.render(success,error);
11+
function success(result) {
12+
// console.log(result);
13+
document.getElementById('result').innerHTML =
14+
`
15+
<h2>Success!</h2>
16+
<p><a href="${result}">${result}</a></p>
17+
`;
18+
19+
scanner.clear();
20+
document.getElementById('reader').remove();
21+
}
22+
23+
function error(err){
24+
console.log(err);
25+
}

‎Projects/QR Code Reader/styles/styles.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
main{
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
}
6+
7+
#reader{
8+
width: 600px;
9+
}
10+
11+
#result{
12+
text-align: center;
13+
font-size: 1.5rem;
14+
}

‎Projects/QR Code Reader/tempCodeRunnerFile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
;

‎img/projects/QR Code Reader.png‎

36.2 KB
Loading

0 commit comments

Comments
 (0)