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
Thank's, Andreas, this example helped me alot!
One additional question: How to manage that the Overlay rotates? I did not succeed in overriding the UIImagePickerControllers shouldAutorotateToInterfaceOrientation method – it simply gets never called. Any idea?
Thanks. It was exact and to the point.
Excellent overview – much appreciated and keep up the good work.
Hi Andreas,
How do we start recording in iPhone 3GS with a custom overlay view just as described by you. I have set the camera sourceType to UIImagePickerControllerSourceTypeCamera, and the UIImagePickerController’s mediaType to kUTTypeMovie, but then the overlay view doesnt seem to obey the orders!
If I use default UIImagePickerController’s controls, it automatically records videos and UIImagePickerControllerDelegate protocol methods gets called but there are no public api’s to trigger video recording and stop video recording.
Any thoughts?
Thanks,
Raj Pawan
Hi Raj,
I consulted the iPhone OS Reference Library once again and found out, that it isn't possible to record videos if you are hiding the default camera controls ("Hiding the default camera controls limits you to taking still pictures only, regardless of whether movie capture is available on the device"). So you have to set "showsCameraControls = YES" to get the standard video controls. Sadly this is a weird restriction at the moment and I hope they will change this soon.
Cheers, Andreas
Hi,
Can I overlay a video over the device's camera feed? That is, my application should start the device's camera and overlay another video (recorded earlier, or any simple movie file) onto this video, as a small window in the center.
Please help me with this.
I would like to know if that is possible as well
Hi guys,
So as I found out, video is only supported in full-screen mode and there is no way to show a video within a small area at the current screen. You can change the background color of the screen when the video is smaller than the whole screen, but this sadly wont be any helpful in your case.
Cheers,
Andreas
Hi there, do you have the source code for this project. I'm struggling to get it to work. Would be much appreciated.
Regards
Andy
can we pleeease have the source code… please?
Hi,
sure you can. I will publish examples of this blog on github now.
Find this example athttp://github.com/anka/bw_examples .
Cheers,
Andreas
So… how do you actually do something with the button, and then close the modal?
Hi,
The UIButton is a subclass of UIControl, so you can use the method addTarget:action:forControlEvents: (http://developer.apple.com/iphone/library/documentation/uikit/reference/UIControl_Class/Reference/Reference.html#//apple_ref/occ/instm/UIControl/addTarget:action:forControlEvents:) to add any action you want.
Example:
…
//your close action method
- (void) close:(id)sender
{
//just close the modal view
[self dismissModalViewControllerAnimated:YES];
}
…
//create your UIButton (i call it closeButton) and add it to your overlay view
…
//set target action of you button
[closeButton addTarget:self action:@selector(close:) forControlEvents:UIControlEventTouchUpInside];
….
After that the method "close" is called when you touch your close button.
Cheers,
Andreas