As you know that the barcode and QR code have upgraded our shopping and searching experience as well as our typing and entering data process. Customers with smartphones can select their product and scan its barcode or its QR code using many free phone apps to read the info or many other business users use this to enter their data or information effectively and fast with 0 error rate while entering big data.
QR Code is a very common technique of encoding information as images. It’s very commonly used in physical stores for identifying products like bar code is used.
The question is why they are using third-party apps to read QR-COde, maybe third-party apps will gather your sensitive information too so to avoid this, it’s time to create your own QR-Code reader for your website using plain HTML-JavaScript event without jQuery. Also, many users complain that they have to install apps for this that’s is another problem for them so make it easy for them by making their camera as QR COde reader on a cloud base system.
Table of Contents
QR Code Scanning with Your Mobile Website:
You don’t need a third-party phone app to scan QR codes. It’s quite simple to create your own QR code reader on the Web using a user smartphone simple camera. Your website running on a smartphone equipped with a camera and running a little Vanilla JavaScript can do the same as an app.
Including the Dependent JavaScript Libraries:
The secret to reading QR codes is math, and the substitute for math is open-source libraries. To read QR codes, we’ll be using the JavaScript port of the Java-based image processing library written by ZXing. The JavaScript version was ported by Lazar Laszlo.
Because the JavaScript library consists of 17 files, we’ve taken the liberty of merging them into one file, wrapping the code in an anonymous function to prevent pollution of the global namespace, and putting the file through Google Closure’s minified to make the file size smaller.
Here’s a demo of a QR code scanner that works not only on Mobile but also on most modern devices. All you need is a camera to allow and a QR code to scan. Use it on your side then go for the code directly.
Features:
- Set a valid end date.
- Calculate the time remaining.
- Convert the time to a usable format.
- Output the clock data as a reusable object.
- Display the clock on the page, and stop the clock when it reaches zero.
- Your code will be lightweight because it will have zero dependencies.
- Your website will perform better. You won’t need to load external scripts and stylesheets.
- You’ll have more control. You will have built the clock to behave exactly the way you want it to (rather than trying to bend a plugin to your will).
How To Add/Create A QR Code Reader On Your Website Using JavaScript?
There are few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.
JavaScript Library:
Add the below library in <head>...</head> section of the web-page.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <scriptsrc="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script><
HTML:
<div id="container"> <h1>QR Code Scanner</h1> <aid="btn-scan-qr"> <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg"> <a/> <canvashidden="" id="qr-canvas"></canvas> <div id="qr-result"hidden=""> <b>Data:</b><span id="outputData"></span> </div> </div>
CSS:
<style type="text/css">
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;
}
</style>
JavaScript:
<script type="text/javascript">
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);
}
}
</script>
Customization:
Always add JavaScript code after HTML means the end of the web-page.
Conclusion:
So there we have it, your very own QR code reader for your mobile website. You can also use this from any platform, which makes it super dynamic and brings a lot of value to your customers. QR codes have been around for many years, and the image processing code written by ZXing was first ported to JavaScript almost nine years ago. It has stood the test of time so well that it still remains one of the fastest — if not the fastest — option out there for the Web. It’s also free and open-source, which makes it even better.
Troubleshooting the Errors
Do it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.
Final Words:
That’s all we have. We hope that you liked this article. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us or If you have any doubts and problems please comment below. We are happy to help you! If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy development, See you in the next article.
Thanks for the sharing this javascript with us.
Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks again.
This Javascript helps me lot
Welcome here and thanks for reading our article and sharing your view.