Custom video/camera overlay view on the iPhone

Custom video/camera overlay view on the iPhone

Original Address: http://blog.blackwhale.at/?p=443

Today I am going to show how we can add a custom overlay view to the standard iPhone video capturing functionality. First of all I have to say, that since the iPhone OS 3.1 is published, a custom overlay is really simple to achieve. There are only a few steps you have to do:

Create a custom view with a transparent background.
Add controls and/or images to the custom view as you like.
Get a new instance of the UIImagePickerController (picker).
Set the source type of the picker to video source.
Hide unneccesary controls of the picker.
Make the video image full-size (if you wish to).
Set your custom overlay and present the picker.
To prove that it is really so simple, I worked out an example for you, which adds a small image and a button to the custom overlay and shows this overlay on the image picker. In my example I didn’t add any functionality to keep it simple and straightforward.

First of all I subclassed UIView for my own custom Overlay view called OverlayView. In this custom overlay I simply added a small image and a button which will sketch the possibility of scanning a marked region within the video preview.

@implementation OverlayView
- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        //clear the background color of the overlay
        self.opaque = NO;
        self.backgroundColor = [UIColor clearColor];
 
        //load an image to show in the overlay
        UIImage *searcher = [UIImage imageNamed:@"searcher.png"];
        UIImageView *searcherView = [[UIImageView alloc]
                            initWithImage:searcher];
        searcherView.frame = CGRectMake(30, 100, 260, 200);
        [self addSubview:searcherView];
        [searcherView release];
 
        //add a simple button to the overview
        //with no functionality at the moment
        UIButton *button = [UIButton
                            buttonWithType:UIButtonTypeRoundedRect];
        [button setTitle:@"Scan Now" forState:UIControlStateNormal];
        button.frame = CGRectMake(0, 430, 320, 40);
        [self addSubview:button];
    }
    return self;
}
...
@end

All I have to do now is to create a UIImagePickerController instance and customize all specific properties of it to show the overlay view on the video preview. This is very simple and the following code should be very easy to understand.

//create an overlay view instance
OverlayView *overlay = [[OverlayView alloc]
        initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGTH)];
 
//create a new image picker instance
UIImagePickerController *picker =
                [[UIImagePickerController alloc] init];
//set source to video!
picker.sourceType = UIImagePickerControllerSourceTypeCamera;
//hide all controls
picker.showsCameraControls = NO;
picker.navigationBarHidden = YES;
picker.toolbarHidden = YES;
//make the video preview full size
picker.wantsFullScreenLayout = YES;
picker.cameraViewTransform =
CGAffineTransformScale(picker.cameraViewTransform,
            CAMERA_TRANSFORM_X,
            CAMERA_TRANSFORM_Y);
//set our custom overlay view
picker.cameraOverlayView = overlay;
 
//show picker
[self presentModalViewController:picker animated:YES];

The only things missing are my defines for the constants I am using, but I don’t wanna keep them away from you:

//transform values for full screen support
#define CAMERA_TRANSFORM_X 1
#define CAMERA_TRANSFORM_Y 1.12412
//iphone screen dimensions
#define SCREEN_WIDTH  320
#define SCREEN_HEIGTH 480

After all we get something like this:

So, that’s pretty all. Of course you have to add much more to get some functionality within your overlay, but this example was just a demonstration how easy it is to create your custom video preview overlay view.

You will find the source code of this example at my github repository. The project is called CameraOverlay.

Cheers,
Andreas