Custom Camera Applications Development Using Iphone Sdk

iPhone contains many useful features. One of them is build-in camera and Camera application system for making photos. It looks great but what about camera usage with native applications? iPhone SDK provides the capability of using camera through UIImagePickerController class. That’s great but there is a small disadvantage – you cannot create a full-screen persistent “live” camera view like the Camera application does. Instead of that you should use UIImagePickerController only in modal mode – show the pop-up modal view when you need a photo and close the view after the photo is made. You have to reopen this view again to take the next one.

Moreover, that modal view contains additional panels and controls that overlay the camera view. Another disadvantage is – you cannot take a photo in one touch; you need to touch the Shoot button to take a picture and preview it, and then you need to touch the Save button to get the photo for processing. Probably it’s the best practice but I don’t like it and I hope you think the same way.

What about using the UIImagePickerController as an ordinal non-modal view controller under the navigation controller the same way as we use the other view controllers? Try it and you will found that it works! The camera view works and looks as it should. You can assign a delegate and process UIImagePickerControllerDelegate events to get and save the photo. Ok, touch the Shoot button, touch the Save button – great, you’ve got the photo! But just look at this – the Retake and Save buttons stay above the camera view, and they don’t work now when they are touched… This is because you cannot reset the view to take another photo after taking one and touching the Save button, the view is freezed and the buttons are disabled. It seems you need to fully recreate the UIImagePickerController instance to take another photo. That’s not so simple and not so good. And you still need to use the panels and buttons that overlay the camera view…

Now I have an idea! When we touch Shoot, the view stops refreshing and displays single image from the camera; then we have to touch Retake or Save button. Can we get that image and save it without using the UIImagePickerControllerDelegate and then touch the Retake button programmatically to reset the view and get another photo? Sure we can! If you explore the camera views hierarchy after touching Shoot you will find that there is a hidden view of ImageView type. This class is not described in the SDK, but we can explore its’ methods using Objective-C capabilities. We can see that the class contains a method called imageRef. Let’s try this… Yes, it returns CGImage object! And the image size is 1200 x 1600 – it’s definitely the camera picture!

Ok, now we know we can get the photo without UIImagePickerControllerDelegate. But in what moment should we do this? Can we catch the user touches on the Shoot button to start processing? It’s possible but not so good. Do you remember our main purpose – creating the persistent full-screen camera view like system Camera application does? It’s time to do it! When we explored the views hierarchy, we’ve found that there are number of views above the camera view. We can try to hide these views and create our own button below the camera view to take the photo in one touch. But how can we force the camera view to make the photo? It’s very simple – we can get the corresponding selector from the Shoot button and call it from our action handler!

Ok, we’ve forced getting the image. But it takes us few seconds. How can we detect that the image is ready? It occurred when the Cancel and Shoot buttons are replaced by Retake and Save ones. The simplest way to detect this is starting a timer with short interval and checking the buttons. And then we can get and save the photo, using the corresponding selector from the Retake button and calling it to reset the camera view and prepare it for making a new one. Here is the code:

// Shot button on the toolbar touched. Make the photo.
– (void)shotAction:(id)sender {
[self enableInterface:NO];
// Simulate touch on the Image Picker’s Shot button
UIControl *camBtn = [self getCamShutButton];
[camBtn sendActionsForControlEvents:UIControlEventTouchUpInside];

// Set up timer to check the camera controls to detect when the image
// from the camera will be prepared.
// Image Picker’s Shot button is passed as userInfo to compare with current button.
[NSTimer scheduledTimerWithTimeInterval:0.2 target:self selector:@selector(savePhotoTimerFireMethod:) userInfo:camBtn repeats:NO];
}

// Return Image Picker’s Shoot button (the button that makes the photo).
– (UIControl*) getCamShutButton {

UIView *topView = [self findCamControlsLayerView:self.view];
UIView *buttonsBar = [topView.subviews objectAtIndex:2];
UIControl *btn = [buttonsBar.subviews objectAtIndex:1];

return btn;
}

// Return Image Picker’s Retake button that appears after the user pressed Shoot.
– (UIControl*) getCamRetakeButton {

UIView *topView = [self findCamControlsLayerView:self.view];
UIView *buttonsBar = [topView.subviews objectAtIndex:2];
UIControl *btn = [buttonsBar.subviews objectAtIndex:0];

return btn;
}

// Find the view that contains the camera controls (buttons)
– (UIView*)findCamControlsLayerView:(UIView*)view {

Class cl = [view class];
NSString *desc = [cl description];
if ([desc compare:@”PLCropOverlay”] == NSOrderedSame)
return view;

for (NSUInteger i = 0; i < [view.subviews count]; i++)
{
UIView *subView = [view.subviews objectAtIndex:i];
subView = [self findCamControlsLayerView:subView];
if (subView)
return subView;
}

return nil;
}

// Called by the timer. Check the camera controls to detect that the image is ready.
– (void)savePhotoTimerFireMethod:(NSTimer*)theTimer {

// Compare current Image Picker’s Shot button with passed.
UIControl *camBtn = [self getCamShutButton];
if (camBtn != [theTimer userInfo])
{
// The button replaced by Save button – the image is ready.
[self saveImageFromImageView];

// Simulate touch on Retake button to continue working; the camera is ready to take new photo.
camBtn = [self getCamRetakeButton];
[camBtn sendActionsForControlEvents:UIControlEventTouchUpInside];

[self enableInterface:YES];
}
else
{
NSTimeInterval interval = [theTimer timeInterval];
[NSTimer scheduledTimerWithTimeInterval:interval target:self selector:@selector(savePhotoTimerFireMethod:) userInfo:camBtn repeats:NO];
}
}

// Save taken image from hidden image view.
– (BOOL)saveImageFromImageView {

UIView *cameraView = [self.view.subviews objectAtIndex:0];
if ([self enumSubviewsToFindImageViewAndSavePhoto:cameraView])
return YES;

return NO;
}

// Recursive enumerate subviews to find hidden image view and save photo
– (BOOL)enumSubviewsToFindImageViewAndSavePhoto:(UIView*)view {

Class cl = [view class];
NSString *desc = [cl description];
if ([desc compare:@”ImageView”] == NSOrderedSame)
return [self grabPictureFromImageView:view];

for (int i = 0; i < [view.subviews count]; i++)
{
if ([self enumSubviewsToFindImageViewAndSavePhoto:[view.subviews objectAtIndex:i]])
return YES;
}

return NO;
}

// Grab the image from hidden image view and save the photo
– (BOOL)grabPictureFromImageView:(UIView*)view {

CGImageRef img = (CGImageRef)[view imageRef];
if (img)
{
// Taken image is in UIImageOrientationRight orientation
UIImage *photo = [self correctImageOrientation:img];
UIImageWriteToSavedPhotosAlbum(photo, nil, nil, nil);

return YES;
}

return NO;
}

// Correct image orientation from UIImageOrientationRight (rotate on 90 degrees)
– (UIImage*)correctImageOrientation:(CGImageRef)image {

CGFloat width = CGImageGetWidth(image);
CGFloat height = CGImageGetHeight(image);
CGRect bounds = CGRectMake(0.0f, 0.0f, width, height);

CGFloat boundHeight = bounds.size.height;
bounds.size.height = bounds.size.width;
bounds.size.width = boundHeight;

CGAffineTransform transform = CGAffineTransformMakeTranslation(height, 0.0f);
transform = CGAffineTransformRotate(transform, M_PI / 2.0f);

UIGraphicsBeginImageContext(bounds.size);

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextScaleCTM(context, – 1.0f, 1.0f);
CGContextTranslateCTM(context, -height, 0.0f);
CGContextConcatCTM(context, transform);

CGContextDrawImage(context, CGRectMake(0.0f, 0.0f, width, height), image);

UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

return imageCopy;
}

Another important question is: in what moment can we hide the overlaying camera views and controls and create our own button? Trying the viewDidLoad… Oops… The camera view is still not created. Trying the viewWillAppear… The same thing… Trying the viewDidAppear… Yes, the views have been created and can be hidden now. Ok, we hide that and create a toolbar with our Shoot button. It works, but the screen flicks – we see how the standard views and buttons are shown and then hidden. How can we prevent this? I tried a number of ways and had found the best one: we should hide the views before they are added to the camera view (when the addSubview method of the camera view is called). It’s possible using Objective-C capability to replace the method dynamically at run-time. Ok, let’s replace the addSubview by our own method. In our method we can check that the passed view is one of the camera view subviews and set its’ “hidden” property to YES. So, we replace the addSubview in the viewWillAppear before the camera view is created. And we create our toolbar and Shoot button in the viewDidAppear after the camera view is created. Take a look at the code below:

// Replace “addSubview:” if called first time; hide camera controls otherwise.
– (void)viewWillAppear:(BOOL)animated {

[super viewWillAppear:animated];

if (toolBar != nil)
{
// The view was already appeared; we don’t need to subclass UIView
// but need to hide extra camera controls.
UIView *cameraView = [self findCamControlsLayerView:self.view];
if (cameraView)
{
cameraView = cameraView.superview;
int cnt = [cameraView.subviews count];
if (cnt >= 4)
{
for (int i = 2; i < cnt – 1; i++)
{
UIView *v = [cameraView.subviews objectAtIndex:i];
v.hidden = YES;
}
}
}
}
else
{
// Subclass UIView and replace addSubview to hide the camera view controls on fly.
[RootViewController exchangeAddSubViewFor:self.view];
}
}

// Exchange addSubview: of UIView class; set our own myAddSubview instead
+ (void)exchangeAddSubViewFor:(UIView*)view {

SEL addSubviewSel = @selector(addSubview:);
Method originalAddSubviewMethod = class_getInstanceMethod([view class], addSubviewSel);

SEL myAddSubviewSel = @selector(myAddSubview:);
Method replacedAddSubviewMethod = class_getInstanceMethod([self class], myAddSubviewSel);

method_exchangeImplementations(originalAddSubviewMethod, replacedAddSubviewMethod);
}

// Add the subview to view; “self” points to the parent view.
// Set “hidden” to YES if the subview is the camera controls view.
– (void) myAddSubview:(UIView*)view {

UIView *parent = (UIView*)self;

BOOL done = NO;
Class cl = [view class];
NSString *desc = [cl description];

if ([desc compare:@”PLCropOverlay”] == NSOrderedSame)
{
for (NSUInteger i = 0; i < [view.subviews count]; i++)
{
UIView *v = [view.subviews objectAtIndex:i];
v.hidden = YES;
}

done = YES;
}

[RootViewController exchangeAddSubViewFor:parent];

[parent addSubview:view];

if (!done)
[RootViewController exchangeAddSubViewFor:parent];
}

The technique described above was used in iUniqable application available from Apple App Store (Social Networking section). Feel free to use.

Feel free to visit the website of the developer www.enterra-inc.com