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:

1. Create a custom view with a transparent background.
2. Add controls and/or images to the custom view as you like.
3. Get a new instance of the UIImagePickerController  (picker).
4. Set the source type of the picker to video source.
5. Hide unnecessary controls of the picker.
6. Make the video image full-size (if you wish to).
7. 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.

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.

The only things missing are my defines for the constants I am using, but I don’t wanna keep them away from you:

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.