Thursday, February 28, 2013

Camera in iPhone Tutorial


Camera in iPhone Tutorial

What's up Crazzy coders… \m/

So you are looking for Playing with Camera stuff in you iPhone Application.

Great!! you landed up on the right planet.

Today we will write simple application to learn how to use Camera in our iPhone Application.

Int this app we will capture photo using camera and use on UIImageView in our application

So stay with me, and do it step by step by ..

PHASE - I (Create New Project)

Let's Fire Xcode!!

Go to File --> New --> Project

Now we can a Window for selecting our application templet 

So make sure you select Application in iOS option on your Left hand side.
then select Single View Application as shown in below picture and Go for Next..



In this Next Window we need to put Our Project Details this way

Product Name : CameraDemo
Organization Name :RDCWorld
Company Identifier : com.rdcworld

Class Prefix :  (leave it blank for now)

Devices : iPhone

Note : Don't forget to Make Tick mark on "Use Automatic Reference Counting" option.



Go to Next --> Create.

Here is our project structure look like




PHASE - II (Design UI)

We need to add Image view and button on our screen.

UIImageView : for showing captured image.
UIButton : for open camera to capture image.

So, Just open ViewController.xib file you can see default blank layout

Now drag on UIImage View and UIButton to Our Layout from Object Lib ( Object Lib you can see in Bottom Right corner)

See our layout looking like



PHASE - III (Create IBOutlets and IBAction )

We are going to create IBOutlet for UIImageView and IBAction method for UIButton.

Okay, Now select Assistant Editor on Top Right side




You can see our ViewController.xib (Left side) + ViewController.h (Right side) opened together.

1. Fist is First, Create IBOutlet for UIImageView

So now just Select UIImageView --> Right Click on it 



Click on "New Referencing outlet" option and drag cursor to ViewController.h(right side) file, when your cursor is between @interface and @end you can see like this.




Now you will get Popup Window 

just put Name : "imageView" and click on Connect.




2. Create IBAction for UIButton.

Right click on UIButton on Layout

Select "Touch Up Inside" in Send Event option and drag to header file this way




Now you will get Popup Window 
just put the Name : openCamera

and click on Connect button.



Doble click on Button and change default name to "Open Camera"

Done!! now agin back to Standard Editor




PHASE - III (Writing Code)

Now Save app, and open ViewController.h file 

add these two delegates to @interface

<UIImagePickerControllerDelegate,UINavigationControllerDelegate>

So Finally our ViewController.h file look like

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  ViewController.h
//  CameraDemo
//
//  Created by RDC on 2/28/13.
//  Copyright (c) 2013 RDCWorld. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UIImagePickerControllerDelegate,UINavigationControllerDelegate>

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

- (IBAction)openCamera:(id)sender;

@end
-----------------------------------------------------------------------------------------------------------------------------------------


Now come to ViewController.m file , open it

add synthesize for imageView  just below to @implementation

@synthesize imageView;


update openCamera method code this way

- (IBAction)openCamera:(id)sender {
    
    UIImagePickerController * picker = [[UIImagePickerController alloc] init];
picker.delegate = self;
    
    picker.sourceType = UIImagePickerControllerSourceTypeCamera;

    [self presentViewController:picker animated:YES completion:nil];
}


Add UIImagePickerController's delegate method to handle camera event

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
    
    
    [picker dismissViewControllerAnimated:YES completion:nil];
    
imageView.image = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
}



So Finally our ViewController.m file look like

-----------------------------------------------------------------------------------------------------------------------------------------
//
//  ViewController.m
//  CameraDemo
//
//  Created by RDC on 2/28/13.
//  Copyright (c) 2013 RDCWorld. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController

@synthesize imageView;

#pragma mark - ViewController's life cycle methods

- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];    
}

//Open Camera button click method
- (IBAction)openCamera:(id)sender {
    
    UIImagePickerController * picker = [[UIImagePickerController alloc] init];
picker.delegate = self;
    
    picker.sourceType = UIImagePickerControllerSourceTypeCamera;

    //start camera view
    [self presentViewController:picker animated:YES completion:nil];
}

#pragma mark - UIImagePickerController's delegate method

//this method get called when we click on USE button after capturing image
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
        
    [picker dismissViewControllerAnimated:YES completion:nil];
    
    //set captured image on our app's ImageView
imageView.image = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
}
@end
-----------------------------------------------------------------------------------------------------------------------------------------


Okay wrap it up this application. let's Run it.

Note : Make you have to Run application using Apple's Real Device (iPhone, iPod, and iPad etc.), you can't test camera app in simulator.

Here is the output 

I clicked on Open Camera Button



then I Captured photo and click on Use Button 



Cheers!! we did it. It was so simple because Apple doing everything for us.
we just made it alive.

You can find complete project source code zip file here : CameraDemo


I Would love to here your thought !! 

No comments:

Post a Comment