Using cameraOverlayView with UIImagePickerController - ios

Question

I have an app that uses the UIImagePickerController to take a picture. The problem is that I only want the camera option to be available and I understand that I need to hide the standard controls:
cameraUI.showsCameraControls=NO;
and use a cameraOverlayView to provide my own controls. I have had a look at Apple's PhotoPicker project already and my initial problem is how do I get an Overlay object onto my storyboard? I can't find such an object in the library.

Answer 1

Here is the code :
toolBar=[[UIToolbar alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height-54, self.view.frame.size.width, 55)];
toolBar.barStyle = UIBarStyleBlackOpaque;
NSArray *items=[NSArray arrayWithObjects:
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:#selector(cancelPicture)],
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action:#selector(shootPicture)],
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
nil];
[toolBar setItems:items];
// create the overlay view
overlayView = [[OverlayView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height-44)];
// important - it needs to be transparent so the camera preview shows through!
overlayView.opaque=NO;
overlayView.backgroundColor=[UIColor clearColor];
// parent view for our overlay
UIView *cameraView=[[UIView alloc] initWithFrame:self.view.bounds];
[cameraView addSubview:overlayView];
[cameraView addSubview:toolBar];
imagePickerController = [[UIImagePickerController alloc] init];
if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera] == NO){
NSLog(#"Camera not available");
return;
}
imagePickerController.sourceType = UIImagePickerControllerSourceTypeCamera;
imagePickerController.delegate = self;
// hide the camera controls
imagePickerController.showsCameraControls=NO;
imagePickerController.wantsFullScreenLayout = YES;
[imagePickerController setCameraOverlayView:cameraView];
[self presentViewController:imagePickerController animated:YES completion:nil];
Declare this in your header file :
UIImagePickerController * imagePickerController;
UIToolbar *toolBar;
OverlayView *overlayView;
Add this OverlayView.h and .m Class from Apples PhotoPicker.
Actions for capturing photo using custom camera button:
-(void) shootPicture {
[imagePickerController takePicture];
}
- (IBAction)cancelPicture {
[self dismissViewControllerAnimated:YES completion:nil];
}
Output will come like this below attached screenshot (I have added a capture button and cancel button in custom overlay view):
Happy Coding :)

Answer 2

Here is my code. 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];
}

Answer 3

great information. To add a little to what Raghu did:
up top:
UIImagePicker *_imagePicker;
//inside your take a picture method
UIToolbar *toolBar=[[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 100)];
toolBar.barStyle = UIBarStyleBlackOpaque;
NSArray *items=[NSArray arrayWithObjects:
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:#selector(cancelPicker)],
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action:#selector(shootPicture)],
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
nil];
[toolBar setItems:items];
toolBar.backgroundColor=[UIColor blackColor];
UIImageView *tp=[[UIImageView alloc]initWithFrame:CGRectMake(0, self.view.frame.size.height-100, self.view.frame.size.width, 100)];
tp.userInteractionEnabled=YES;
tp.backgroundColor=[UIColor blackColor];
[tp addSubview:toolBar]; //add the toolbar to the uiimageview
_imagePicker=[[UIImagePickerController alloc]init];
_imagePicker.sourceType=UIImagePickerControllerSourceTypeCamera;
_imagePicker.delegate = self;
_imagePicker.showsCameraControls=NO; //we will make custom controls.
[_imagePicker.view addSubview:tp];
-(void)cancelPicker{
//get rid of the image picker
[self dismissViewControllerAnimated:YES completion:nil]; //dismiss uiimagepicker
_imagePicker=nil;
}
//take the picture, it will then go directly to - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info method
-(void)shootPicture{
[_imagePicker takePicture];
}