How to create a cameraOverlayView

Question

I am really struggling to get my head around how to do this. I have a UIImagePickerController which works fine but I want to create my own CameraOverlayView so that I can customise the buttons. I can't seem to figure out how to create the overlay in the first place. I have tried so many tutorials and have arrived at the following but it is way off. Can anyone point me to an simple to follow instructions?

• I have created a UIImagePickerController that works with standard controls
• For the overlay I have created a new UIViewController on my storyboard and linked it to a new class called ObViewControllerCameraOverlay

• In the startCameraControllerFromViewController method I use the following to hide the standard controls

  cameraUI.showsCameraControls=NO;

• and then this to show the cameraOverlay (which does not compile)

  obViewControllerCameraOverlay *overlay = [[obViewControllerCameraOverlay alloc]; cameraUI.cameraOverlayView = overlay;

I know I am doing this wrong but I am stumped as to how to this to work. I have looked at Apple's PhotoPicker too but I just don't get it.

UPDATE:

Where I am now - can anyone tell me if this is the correct process (I realise frame size needs to be sorted and custom buttons need to be added somehow):

.m file where the 'Take Photo' UIButton is located.

@property (nonatomic, strong) UIView *overlay;

- (IBAction)takePhoto:(id)sender
{
[self startCameraControllerFromViewController: self usingDelegate: self];
}


- (BOOL) startCameraControllerFromViewController: (UIViewController*) controller usingDelegate: (id <UIImagePickerControllerDelegate, UINavigationControllerDelegate>) delegate
{
if (([UIImagePickerController isSourceTypeAvailable: UIImagePickerControllerSourceTypeCamera] == NO) || (delegate == nil) || (controller == nil)) return NO;
UIImagePickerController *cameraUI = [[UIImagePickerController alloc] init];
cameraUI.sourceType = UIImagePickerControllerSourceTypeCamera;
cameraUI.mediaTypes = [UIImagePickerController availableMediaTypesForSourceType:UIImagePickerControllerCameraCaptureModePhoto];
cameraUI.showsCameraControls=NO;
overlay = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
cameraUI.cameraOverlayView = overlay;
cameraUI.allowsEditing = NO;
cameraUI.delegate = delegate;
[controller presentViewController:cameraUI animated:YES completion:nil];
return YES;
}

Answer 1

Your overlay is only allocated - not initialized. It should be initialized and it should have it's frame properly set.

Also: overlayView should be of a UIView * type. If you want to pass an UIViewController as an overlay view you have to pass only it's view property.

For example:

obViewControllerCameraOverlay *overlay = [storyboard instantiateViewControllerWithIdentifier: @"obViewControllerCameraOverlay"];

cameraUI.cameraOverlayView = overlay.view;

You should change the code of course according to your project and configuration.

Answer 2

I'm pretty late to this, but here's my code I used to create a UIImagePickerController and a CameraOverlayView. If you want the camera to appear as soon as the view controller opens, make sure you initialize the UIImagePickerController in viewDidAppear like I did (viewDidLoad does not work).

@interface CameraViewController ()
@property UIImagePickerController *PickerController;
@property CGFloat HeightOfButtons;
@end


- (UIView *)createCustomOverlayView
{

    // Main overlay view created
    UIView *main_overlay_view = [[UIView alloc] initWithFrame:self.view.bounds];

    // Clear view (live camera feed) created and added to main overlay view
    // ------------------------------------------------------------------------
    UIView *clear_view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - self.HeightOfButtons)];
    clear_view.opaque = NO;
    clear_view.backgroundColor = [UIColor clearColor];
    [main_overlay_view addSubview:clear_view];
    // ------------------------------------------------------------------------


    // Creates two red buttons on the bottom of the view (on top of the live camera feed)
    // Then adds the buttons to the main overlay view
    // You can, of course, customize these buttons however you want
    // ------------------------------------------------------------------------
    for(int i = 0; i < 2; i++) {
        self.HeightOfButtons = 100;
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        // when a button is touched, UIImagePickerController snaps a picture
        [button addTarget:self action:@selector(testIfButtonResponds) forControlEvents:UIControlEventTouchUpInside];
        button.frame = CGRectMake( i * self.view.frame.size.width / 2, self.view.frame.size.height - self.HeightOfButtons, self.view.frame.size.width / 2, self.HeightOfButtons);
        [button setBackgroundColor:[UIColor redColor]];
        [main_overlay_view addSubview:button];
    }
    // ------------------------------------------------------------------------

    return main_overlay_view;
}

- (void)makeCustomCameraAppear
{
    self.PickerController = [[UIImagePickerController alloc] init];
    self.PickerController.sourceType = UIImagePickerControllerSourceTypeCamera;
    self.PickerController.showsCameraControls = NO;
    self.PickerController.delegate = self;

    UIView *overlay_view = [self createCustomOverlayView];
    [self.PickerController setCameraOverlayView:overlay_view];

    [self presentViewController:self.PickerController animated:YES completion:NULL];
}

- (void)viewDidAppear:(BOOL)animated
{
    [self makeCustomCameraAppear];
}