iPhone: Camera Preview Overlay

Question

How do I add an overlay (UIImageView) to the camera preview and handle touches on this?

My previous attempts to do this (e.g. use UIImagePickerController and add the image as a subview) have failed.

Answer 1

This tutorial explains it: http://www.musicalgeometry.com/?p=821

Just add a UIImage in the overlay view instead of the red area shown in the tutorial.

Answer 2

For your implementation file:

- (IBAction)TakePicture:(id)sender {

    // Create image picker controller
    UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];

    // Set source to the camera
    imagePicker.sourceType =  UIImagePickerControllerSourceTypeCamera;

        // Delegate is self
        imagePicker.delegate = self;

        OverlayView *overlay = [[OverlayView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];     

        // Insert the overlay:
        imagePicker.cameraOverlayView = overlay;

       // Allow editing of image ?
        imagePicker.allowsImageEditing = YES;
        [imagePicker setCameraDevice:
        UIImagePickerControllerCameraDeviceFront];
        [imagePicker setAllowsEditing:YES];
        imagePicker.showsCameraControls=YES;
        imagePicker.navigationBarHidden=YES;
        imagePicker.toolbarHidden=YES;
        imagePicker.wantsFullScreenLayout=YES;

        self.library = [[ALAssetsLibrary alloc] init];

        // Show image picker
        [self presentModalViewController:imagePicker animated:YES];
    }

Make a UIView class and add this code

    - (id)initWithFrame:(CGRect)frame
    {
        self = [super initWithFrame:frame];
        if (self) {
            // Initialization code


            // Clear the background of the overlay:
            self.opaque = NO;
            self.backgroundColor = [UIColor clearColor];

            // Load the image to show in the overlay:
            UIImage *overlayGraphic = [UIImage imageNamed:@"overlaygraphic.png"];
            UIImageView *overlayGraphicView = [[UIImageView alloc] initWithImage:overlayGraphic];
            overlayGraphicView.frame = CGRectMake(30, 100, 260, 200);
            [self addSubview:overlayGraphicView];

        }
        return self;
    }

Answer 3

You may be able to add the UIImageView as a subview of the main window directly instead of the UIImagePicker, it may work better. Just make sure to add them in the right order, or call

[window bringSubviewToFront:imageView];

after the camera is up.

If you want to handle touches on the UIImageView you could just add the UIImageView as a subview of a normal fullscreen View with a transparent background, and add that to the window instead, with a normal UIViewController subclass that you can use to handle the touch events.

Answer 4

See the camera overlay view (available in 3.1 and later)

@property(nonatomic, retain) UIView *cameraOverlayView