Thursday, April 3, 2014

How To Scan QR Code Using AVFoundation Framework

iOS 7 brings a wealth of new features that set it apart from all other mobile operating systems. Both major additions and minor improvements have been made, offering developers new or updated frameworks and APIs to work with, and the opportunity to provide single users with a much richer experience. The AVFoundation framework is just one of them, as it has accepted great enhancements and new class additions that make even more tools available. One of the new features that the AVFoundation incorporates, is the ability to discover and read bar codes in real-time, and one of the supported bar code types that we especially interested in at this tutorial, is the QR Code.
A Quick Response Code (QR Code) is actually a two-dimensional (2D) barcode. Instead of the vertical lines like those that the well-known barcode contains, a QR Code can have its lines designed in both horizontal and vertical directions. The data that’s being encapsulated into such a code, is read by devices specificly designed for this job, or by smart devices (smartphones, tablets) using the appropriate software. A QR Code can store a great amount of data (in relation to the ordinary barcode), so there is a variety of information that can be encoded in it. Some typical content examples of a QR Code are:
  • URL
  • Phone number
  • Simple text
  • SMS text
QR Codes are used mainly for marketing reasons, but not only. One can create a QR Code to use on its website, or on any other place that may wants.
QRCode Featured
undefined
undefined
Thanks to iOS 7, creating applications that can scan and translate a QR Code has been really a piece of cake. So, if you have ever been tempted to create such an app, or you are just curious to learn more about all these, then just keep reading!

Demo App Overview

The demo application that we are going to implement in this tutorial is fairly simple and straightforward. It is going to be universal, meaning that it will be able to work in both iPhone and iPad, so you can run it on any device you might have with iOS 7 installed on it. Right next is shown a figure of the outcome in iPhone:
QR Code Demo App for iPhone
For the iPad, the interface is more or less the same:
QR Code Demo App for iPad
Before I proceed to a discussion regarding the demo figures above, it’s important to underline at this point that any barcode scanning, including QR codes, is totally based on video capturing, that’s why AVFoundation framework supports the barcode reading feature. Keep this info on mind, as it’s the starting point for the entire application.
Even though it’s not hard to figure out what all subviews layed on the interface are for, I’ll make a quick reference on them, so it’ll become absolutely clear what our app is going to contain.
So, beginning from top to bottom, at first there is a UIView view, which is going to be the container for the preview layer of the video captured by the device. A UILabel exists on top of it, simply prompting to tap on the start button to begin reading a QR code. Right next, another UILabel plays the role of the status log while a code is being read, and finally a toolbar lies at the bottom of the view, with one bar button item only which will be used to start and stop the capturing.
Here is how the demo application is going to work:
Initially, when the app is launched, the interface shown in the figure above is first displayed. By tapping the start bar button at the toolbar, a video capturing session is initiated in order to scan for QR codes. Once that happens, the start button’s title changes to Stop, while its functionality changes as well with aim to enable us to stop capturing at any time.
The status label is going to show three different messages, depending on the scanning state:
  1. When a code scanning is not yet performed.
  2. When a code scanning is in progress.
  3. When a scan has been completed and the contained information has been translated and is ready to be displayed.
Also, a sound effect (a beep sound) is being played every time a QR code has been successfully read to make our app more vivid and interactive.
Note that this application cannot be tested on the Simulator, neither to a device without a camera, as everything is based on real-time video capturing. Therefore, you’ll need to connect your device and run it there if you want to see the application live.

Building the Demo App

Ready to take off? Let’s begin by launching the Xcode. In the Welcome screen, select to create a new project.
Xcode Welcome
In the project creation guide under the iOS section, select the Application category and then select the Single View Application template. Click Next to proceed.
Select Xcode Project Template
Next, give a name to the project. In the Product Name field add the QRCodeReader value. Also, in theDevices drop down menu select the Universal value in order to let your app run in both iPhone and iPad devices. Click Next to continue.
Set Xcode Project Details
In the last window, select a directory to save the project and click on the Create button.
Xcode creates the project and makes any necessary initial, default configuration is required. Now we are ready to start building.

Setting Up the User Interface

Our application is universal, so it’s needed to create the interface for both the iPhone and the iPad. Let’s begin from the iPhone, so click on the Main_iPhone.storyboard to bring the Interface Builder up. Initially, you should see only an empty view controller, just like the next image:
Initial Interface for QR Code Demo
Here is a list of all the controls you need to drag and drop in the view of the view controller, along with all properties that need to be set in order to create an interface similar to the wanted one.
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UIView
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Frame: X=20 Y=40 Width=280 Height=350
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Background Color: Black
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UILabel Add this as a subview to the previous view
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Frame: X=17 Y=164 Width=247 Height=21
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Color: White
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Text: Tap on Start! to read a QR Code
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Font: System Bold 15.0
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Text Alignment: Center
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UILabel
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Frame: X=20 Y=448 Width=280 Height=21
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Color: R=0 G=255 B=0
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Text: QR Code Reader is not yet running…
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Font: System 15.0
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UIToolbar
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Frame: X=0 Y=524 Width=320 Height=44
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UIBarButtonItem (already existing on the toolbar)
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Title: Start!
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UIBarButtonItem
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">New Flexible Space Bar Button Item on the left side of the start button.
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UIBarButtonItem
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">New Flexible Space Bar Button Item on the right side of the start button.
After you’re done, the interface should look like the next one:
QR Code iPhone Interface
Here is the respective list with all the controls required to setup the interface for the iPad, along with the properties you need to configure.
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UIView
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Frame: X=44 Y=40 Width=680 Height=840
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Background Color: Black
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UILabel Add this as a subview to the previous view
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Frame: X=20 Y=329 Width=640 Height=41
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Color: White
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Text: Tap on Start! to read a QR Code
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Font: System Bold 24.0
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Text Alignment: Center
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UILabel
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Frame: X=20 Y=448 Width=280 Height=21
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Color: R=0 G=255 B=0
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Text: QR Code Reader is not yet running…
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Font: System 17.0
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UIToolbar
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Frame: X=0 Y=980 Width=768 Height=44
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UIBarButtonItem (already existing on the toolbar)
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">Title: Start!
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UIBarButtonItem
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">New Flexible Space Bar Button Item at the left side of the start button.
  • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">UIBarButtonItem
    • http://www.appcoda.com/wp-content/themes/eleven40/images/list.png); list-style-type: none; word-wrap: break-word; background-position: 0% 0%; background-repeat: no-repeat no-repeat;">New Flexible Space Bar Button Item at the right side of the start button.
Here is how the iPad interface should now look like:
QR Code for iPad Interface
So far, so good. For both devices the interface is ready, but we are not finished yet. We need to create IBOutlet methods and connect them to the controls we need to touch in code. Open theViewController.h file, and add the following IBOutlet property declarations:
1
2
3
4
5
6
7		@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UIView *viewPreview;
@property (weak, nonatomic) IBOutlet UILabel *lblStatus;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *bbitemStart;

@end
As you see, we need properties for the video container view, the status label and the start bar button item. Besides these properties however, now it’s the best time to declare an IBAction method which we will connect to the start bar button item in order to make it start and stop video capturing. Therefore, right after the last property, add the next line:
1- (IBAction)startStopReading:(id)sender;
Let’s make the connections now. Open the Main_iPhone.storyboard file and Control-Click or Right-Click on the View Controller object, inside the Document Outline pane. In the black popup window that appears, you can see all of the IBOutlet properties that were previously declared under theOutlets section. For each one of them, click on the circle on the right side and drag and drop to the appropriate control. The next image will make this procedure clear:
Connect IBOutlet
Follow the same steps to connect the startStopReading: IBAction method to the start bar button item. The IBAction method exists under the Received Actions section in the black popup window.
As a reminder, don’t forget to do the same job in the Main_iPad.storyboard file.

QR Code Reading Implementation

Up to now we have created the project, we have setup the interface and we have done all necessary configurations on the controls of our application. Time to make a deep dive and write the necessary code that will give life to the most important feature, the QR code reading.
The best point to start writing code is our IBAction method, the startStopReading:, which is already declared and connected to the start bar button item. However, before we begin implementing it, let’s remember something; while I was presenting the demo app and the way it’s going to work, I said that once the video capturing begins, the start button becomes a stop button and vice versa. Programmatically, that means that we need to find a way that lets the app know when to perform the start functionality, and when to perform the stop functionality. Well, what’s a better way than a flag?
If you haven’t done already, open the ViewController.m file. Navigate yourself at the top of it, in the private interface section, and add the following flag:
1
2
3		@interface ViewController ()
@property (nonatomic) BOOL isReading;
@end
It’s quite obvious by its name that, when the isReading variable is NO (false), then the app is not scanning for a QR code and the video capture functionality should start when the bar button is tapped. The exact opposite happens when the variable is set to YES (true). I would strongly advice that when declaring member variables, then the next step that should be done is to give them their initial value, as the most probable scenario is that you are going to forget to do so later. So, let’s go inside theviewDidLoad method to set the initial value for our flag:
1
2
3
4
5
6		- (void)viewDidLoad
{
    [super viewDidLoad];

    _isReading = NO;
}
Now we are absolutely ready to implement the startStopReading: IBAction method. Write the following code snippet and then we’ll discuss it a bit:
1
2
3
4
5
6
7
8
9
10
11
12
13
14		- (IBAction)startStopReading:(id)sender {
    if (!_isReading) {
        if ([self startReading]) {
            [_bbitemStart setTitle:@"Stop"];
            [_lblStatus setText:@"Scanning for QR Code..."];
        }
    }
    else{
        [self stopReading];
        [_bbitemStart setTitle:@"Start!"];
    }  
   
    _isReading = !_isReading;
}
At first, we check if the isReading flag is NO, meaning that currently no QR code scanning is taking place. If that’s the case, then we call the startReading method, which we are going to implement in a while. If everything goes well when calling this method, then we change the bar button item’s title toStop and we set another message on the status label. However, if the app is currently scanning for a QR code and the isReading flag is YES, then we call the stopReading method (yes, we’ll implement this one later too), and we also set the title of the bar button item to Start!. Finally, no matter what the case is, we set in the isReading flag the exact opposite value of the one that currently has.
As you just saw, we used two methods that we haven’t yet implemented. We will begin doing so by thestartReading, which as you imagine, is one of the most important methods in this app. First of all, we need to declare it, so go to the private interface section and add the next declaration:
1
2
3
4
5
6		@interface ViewController ()
@property (nonatomic) BOOL isReading;

-(BOOL)startReading;

@end
Don’t leave there yet. Before we move to implementation, we need to declare a couple of objects that we’ll need right next. So, add the new lines shown in the snippet below:
1
2
3
4
5
6
7
8		@interface ViewController ()
@property (nonatomic) BOOL isReading;

@property (nonatomic, strong) AVCaptureSession *captureSession;
@property (nonatomic, strong) AVCaptureVideoPreviewLayer *videoPreviewLayer;

-(BOOL)startReading;
@end
At this point Xcode will probably complain about the AVCaptureSession and theAVCaptureVideoPreviewLayer classes. That’s because we still haven’t imported the AVFoundation framework. Before we fix this, go into the viewDidLoad method and make the captureSession object nil.
1
2
3
4
5
6
7		- (void)viewDidLoad
{
    [super viewDidLoad];
    _isReading = NO;
   
    _captureSession = nil;
}
Now, open the ViewController.h file and at the top of it, import the AVFoundation framework.
1#import <AVFoundation/AVFoundation.h>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)