How to Create a QR Code Reader for Your Mobile Website
The barcode and QR code have modernized our shopping and searching experience. Customers carrying smartphones can now pick up a product anywhere in the world, scan its barcode or its QR code using one of the many free phone apps and find out its lowest price as well as where it can be bought.
Companies like Walmart and Amazon have embraced this technique to draw customers to their online and offline stores using their phone app. Other companies like Fedex and UPS allow customers to scan the codes on packages using a phone app, instead of needing to manually type in long lists of characters.
If the users of your mobile website have a need to type in long codes like activation codes or they like to look up specific products on your website based on a model number printed in a magazine or advertisement, then you too can take advantage of QR codes to eliminate the frustration of tiny keyboards and spare them the need to double check for errors.
QR Code Scanning with your Mobile Website
You don’t need a native phone app to scan QR codes —it’s quite simple to create your own QR code reader. Your website running on a smartphone equipped with a camera and running a little JavaScript can do the same trick.
Here is a demo of a text field with an in-built QR button. In addition to being able to type text into the field, users can also click a button to activate the camera.
Browser Requirements:
Your users need to be on an iPhone running iOS 6 or higher or an Android phone running Android 3.0 or higher. Other devices have not been tested.
See the Pen Bare QR reader demo by SitePoint (@SitePoint) on CodePen.
If you are on a supported device, go ahead and click it. Depending on your phone, it will either launch the camera immediately or ask you whether to open the camera or browse your photo library. On unsupported devices, the browser will open up a regular file explorer window.
If you don’t have a QR code handy to scan, here is one that shows the first 8 digits of Pi.
Creating the QR Code Reader
The magic starts with the file upload element. We spruce it up with an accept attribute which tells the browser that we only want images and we give it a capture attribute which means we want the input to be captured now, as opposed to uploading an old picture from the phone’s memory.
<input type=file
accept="image/*"
capture=environment>
Beautifying the Upload element
Because the file upload element is difficult to style and takes up a whole bunch of space, we want to shrink it down to an icon, which we can achieve by making it invisible and wrapping it inside a label element. The label element provides an area for the user to click on, as well as giving us an area to add our QR icon.
Notice that we’ve also added a tabindex=-1 attribute to prevent the user from accidentally reaching the file upload element with the tab key, since we intend to make it invisible.
<label class=qrcode-text-btn>
<input type=file
accept="image/*"
capture=environment
tabindex=-1>
</label>
The class name of qrcode-text-btn on the outer label element allows us to style both elements with the following CSS:
.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;
}
In the first CSS block, we are giving the label element a display:inline-block property, which allows us to assign a height and width to the element.
Then we give it a background image, which is the QR icon that the users of our QR code reader will see.
In the second CSS block we are using a direct descendant selector (>) to select the file upload element and apply a couple of CSS properties to make that element invisible:
We give it a position:absolute property, so that it is excluded from the regular document flow, which means objects around it will flow over and under it as if it didn’t exist.
We give it the width:1px and height:1px properties, so that it doesn’t accidentally cover up other things on the page.
We give it an opacity:0 property, so that it becomes transparent and therefore hidden. Note that we can’t simply use display:none, because some browsers will completely disable the file upload element if we do that.
Introducing the Text Input element
Next we introduce the text input element that will house the QR button for our QR code reader.
<input type=text class=qrcode-text
><label class=qrcode-text-btn>
<input type=file
accept="image/*"
capture=environment
tabindex=-1>
</label>
Tip:
Any white-space characters, including empty lines, in between 2 inline elements will create a gap that you might not want and affects our math. We have eliminated the white-space above by moving the end bracket (>) to the next line touching the other element’s opening bracket (<).
This is what our QR code reader should look like so far:
Continue reading %How to Create a QR Code Reader for Your Mobile Website%
LEAVE A REPLY
You must be logged in to post a comment.