Camera with Custom View

Question

My Application uses camera, I would like to add overlay over the camera preview. For example, I want to use a picture frame when I use Camera, also I would like to add a custom bar for camera operations. Kindly help me to do the same.

Solution 1

You might be trying using UIImagePickerController. But I know this one solution to your problem. You can do it easily using AVCamCaptureManager and AVCamRecorder classes. Apple has a demo program build on its developer site here. It is named AVCam. In simple words what it does is when you click to open the camera, it calls the classes and methods which are responsible for opening the iPhone's camera and record video or capture audio. It calls the same classes which are called by UIImagePickerController. So your camera will open and start taking input.

Now, if you open the xib file of that AVCam project, you'll find a small UIView object. This view is responsible for displaying the camera's feed. You can resize that view as per the size you want and the camera's input will be displayed in that much area. You can also put the frame image around it as per your choice.

It worked for me when I wanted to resize the camera's input feed and capture photos. I hope it works for you as well.

Solution 2

Create a UIImagePickerController from code, adjust its properties, add an overlay onto it, and with you controller, control whatever you want on that overlay : custom controls, overlaying images, etc...

That gives something like this :

self.picker = [[UIImagePickerController alloc] init];
self.picker.sourceType = UIImagePickerControllerSourceTypeCamera;
self.picker.cameraCaptureMode = UIImagePickerControllerCameraCaptureModePhoto;
self.picker.cameraDevice = UIImagePickerControllerCameraDeviceRear;
self.picker.showsCameraControls = NO;
self.picker.navigationBarHidden = YES;
self.picker.toolbarHidden = YES;
self.picker.wantsFullScreenLayout = YES;

// Insert the overlay
self.overlay = [[OverlayViewController alloc] initWithNibName:@"Overlay" bundle:nil];
self.overlay.pickerReference = self.picker;
self.picker.cameraOverlayView = self.overlay.view;
self.picker.delegate = self.overlay;

[self presentModalViewController:self.picker animated:NO];

OverlayViewController is the controller that you must write to control everything you add onto the overlay.

pickerReference is a property you can keep to send orders to the camera. For example, you could call the following from an IBAction coming from a UIButton placed onto the overlay :

[self.pickerReference takePicture];

Solution 3

Read the UIImagePickerController Class Reference, that's right in the documentation…

There are properties for this, especially the cameraOverlayView and showsCameraControls properties.

So you can hide the controls, provide a custom overlay view, and add subviews to this custom view to add custom buttons, frames, etc.

Comments

[Kev]

Be careful when posting copy and paste boilerplate/verbatim answers to multiple questions, these tend to be flagged as "spammy" by the community. If you're doing this then it usually means the questions are duplicates so flag them as such instead.

[Oliver]

@Kev : Ohh, ok, sorry, I'll take care of that. How do you flag a question as a duplicate ? I don't see that option in the flag proposed status ?

[RyBolt]

@Oliver - optionally just post a comment, such as "Possible duplicate to this questions <link_to_duplicate> "

[Hari Honor]

I had problems with Auto Layout when setting the cameraOverlayView property directly. Instead I had to use [self.picker.cameraOverlayView addSubview:self.overlay.view]

[Luke Irvin]

How do I handle method calls in an overlay to not get this message: Presenting view controllers on detached view controllers is discouraged

[Oliver]

@LukeIrvin:Hello, sorry but I won't be able to help you for the moment : I've never met this error, and due to the need to change my Mac to upgrade to iOS6 (no money for that), I do not have the last XCode & SDK installed, wich I suppose is the origin of the message.

[Katedral Pillon]

I tried to resize the AVCamPreviewView into a square. The view resized correctly, but inside the AVCamPreviewView the camera feed shows up inside a small rectangle. It's as if the aspect ratio is set in somewhere but I can't find where to override it.

[Roshit]

@KatedralPillon Even I just walked into the same issue. Did you manage to find a solution?

[Roshit]

Well. I got the aspect ratio fill part of it. [(AVCaptureVideoPreviewLayer *)[self.previewView layer] setVideoGravity:AVLayerVideoGravityResizeAspectFill]; .. This ensures the Preview displayed is cropped to how we want. But the output Video is yet not cropped. Guess I am missing something.

[Katedral Pillon]

@Roshit stackoverflow.com/questions/27824481/…