QR code scanner allows the user on your website to simply scan the code from their camera instead of writing down long codes. QR codes can be used for logging in to account, product activation, and making payments. This handy tool eliminates the need to type long codes on tiny keyboards and double-checking them.
Your device does not need to have a native app to scan the QR code. You can make your own app simply by implementing JavaScript on your website. Clicking on a QR code button on a webpage will either open your camera directly or will ask permission first to allow access to your camera. Note that this behavior may vary on different devices. On unsupported devices, it may either do nothing or open a file explorer window.
Implementing File Upload Script
You start with creating a file upload element. Add in two attributes: ‘accept’ and ‘capture’. Accept attribute tells the browser that we need to upload images only and capture tells it that whatever input the user will put in needs to be captured right at that very moment. This is different from uploading a file that will open a file explorer to upload a file from your phone’s memory.
<input type=file accept="image/*" capture=environment>Making The File Upload Element Accessible
To provide the file upload element some makeup, we will hide it by making it invisible. Add the label element to allocate some area to the element so that the user can click on the label icon. Put tabindex to 1 because we don’t want users to accidentally click the file upload element with tab key and also because we want to make it invisible.
<label class=qrcode-text-btn>
<input type=file accept="image/*" capture=environment tabindex=-1>
</label>
To style the element, implement the following code with the class name qrcode-text-btn on the outer label element.
.qrcode-text-btn {
display: inline-block;
height: 1em;
width: 1em;
background: url(qr_icon.svg) 50% 50% no-repeat;
cursor: pointer;
}
.qrcode-text-btn > input[type=file] {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
opacity: 0;
}
What we have done here is that we have given our label element the display:inline-block attribute so that we can adjust its height and width. Then, we have added a background image to the label to make it visible. The image is a QR icon that identifies that clicking here will open a QR code app. The second part of the code gives the label a descendant selector. This allows it to select the upload element.
Then we have decorated it with some CSS properties where we have positioned it, defined its width, height, opacity, and have isolated it from the rest of the document. This means that other objects on the page will move independently without moving the label. We have turned the opacity to zero so that it becomes transparent and therefore invisible. Note that we would have used the display: none attribute but that would have completely disabled the element on some browsers.
Text Input Element
The next step is introducing the text element. This element will contain the QR button for the reader. Here is how to do it.
<input type=text class=qrcode-text >
<label class=qrcode-text-btn>
<input type=file accept="image/*" capture=environment tabindex=-1>
</label>
This code will put the QR button to the right of the text. To put it inside the field we will shift it to the left.
.qrcode-text {
padding-right: 1.7em;
margin-right: 0;
vertical-align: middle;
}
.qrcode-text + .qrcode-text-btn {
width: 1.7em;
margin-left: -1.7em;
vertical-align: middle ;
}
In the first part of the code, we have given space on the right. This is where the QR button is located. We have given it the padding attribute so that the text would stay inside without overlapping with the button. We have set the margin to zero because by default it will have some non-zero margin value which can affect the calculations.
In the second part of the code, we are using + which is the adjacent element selector which we have used to apply CSS to the button. These will cause it to overlap the text element and move it to the left. Use the selector carefully because the CSS can only be applied when the button is next to the text element. If you use the button somewhere else, the same code will not apply and the QR code button will not shift to the left side.
We will also align it to the middle by using the vertical-align:middle function for the button to appear at the center. If we don’t do that the button will automatically shift up due to the bottom inline-block elements being vertically aligned to the baseline or other inline elements. We will also set a comparatively higher width to give a larger click area. This area won’t be visible since we have set the button to transparent. It will only be visible during the rendering.
Adding Libraries
QR code reading requires complex maths. But we are not going to do the maths ourselves so we will revert to open source libraries. We will use the image processing library. This library comes in 17 files. So we will merge them into one single file and will use the Google minifier to compress the final file to reduce the size as well as namespace pollution.
Adding The Script To HTML
As usual, we will add the script into our HTML code by providing the source URL in the script tag.
<script src="https://sample site.com/jsqrcode/src/qr_compressed.js">
</script>
After this we need to hook up the event handlers by implementing the on change event as follows:
<input type=file
accept="image/*"
capture=environment
onchange="openQRCamera(this);"
tabindex=-1>
Finally, we will introduce the main function that will read the image file and use the upload element to transfer it to the library.
function openQRCamera(node) {
var reader = new FileReader();
reader.onload = function() {
node.value = "";
qrcode.callback = function(res) {
if(res instanceof Error) {
alert("No QR code found. Please make sure the QR code is within the camera's frame and try again.");
} else {
node.parentNode.previousElementSibling.value = res;
}
};
qrcode.decode(reader.result);
};
reader.readAsDataURL(node.files[0]);
}
What we are doing here is that we are making an object that will read the binary data of the file. This object is called the filereader. We have also assigned a callback function to the QR code library which will return either an error or a value in string form. If the camera doesn’t capture a QR code, the library won’t be able to decrypt it and the function will return an error and will show the error box. If it gets the decrypted data, it will show the decrypted data.
Hiding It On Other Devices
This QR code reader will show up in all browsers. But we also want to make sure that it is hidden on unsupported browsers because we haven’t used any elements to hide it. Instead, we have used some tricks like transparency to do that. We don’t want to show it on laptops and pcs and only on mobile phones so we can use screen size reduction to do that. That is because nobody will use their laptops to take pictures. For that, we will use CSS media queries. We will set the size somewhere between 700x800 pixels.
media only screen and (max-device-width:700px) {
/* previous CSS code goes here */
}
All your previous CSS code goes into the brackets. This technique will only activate the CSS code when the width is less than 700 pixels. Then we need to style further with CSS to hide the button as follows:
.qrcode-text-btn {
display: none;
}
@media only screen and (max-device-width:750px) {
/* ... */
}Conclusion
So here is how to make a QR code reader for a mobile website. Although QR codes have been around for many years, they got recently implemented in web design. The techniques used in this QR code have enhanced the existing technologies into a more interactive user-friendly structure. Although there is some room for improvement e.g. we can use the getusermedia function to get images from the camera, but then it won’t be supported on older phones since it is comparatively new.
Please feel free to Contact us for any kind of application development work.
