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 achive. 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, thats 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.
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.