IOS 5 viewfinder and real-time filter Creation

1. Use UIImagePickerController to capture the media and create a viewfinder

UIImagePickerController is a subclass of UINavigationController, which is part of UIKit. Therefore, you do not need to add additional frameworks. It is easy to use, but powerful. We can use it to select the source media type. UIImagePicker has three media sources to choose from: UIImagePickerControllerSourceTypePhotoLibrary (select a photo in the photo library of the system) and photo (only select a photo in the saved album ), UIImagePickerControllerSourceTypeTypeCamera (use a camera to get an image or video ). Therefore, we can obtain images from the local device or call the camera to capture new media. When we select the captured media, it will call its proxy's didFinishPickingMediaWithInfo: method. UIImagePickerControllerSourceType also allows developers to provide a view that is superimposed on the preview view. Therefore, we can customize a view to create a beautiful viewfinder.

Step 1: Create a UIImagePickerController and use the camera as the source; 2. Add a method for users to take photos before displaying the image selector; 3. Resume A Uiview as the stack layer, you can process this stack layer like any other UIView. You can add animations and any sub-views. The following code demonstrates a simple viewfinder.

-(Void) showCustomCamera
{
// Create a UIImagePickerController
Picker = [[UIImagePickerController alloc] init];
Picker. sourceType = UIImagePickerControllerSourceTypeCamera; // select the camera as the source
[Picker setDelegate: self];

Picker. cameraDevice = UIImagePickerControllerCameraDeviceFront; // force select the front camera;
Picker. showsCameraControls = NO; // disable camera empty parts

// Create a stack Layer
UIView * overLayView = [[UIView alloc] initWithFrame: self. view. bounds];
// The background image of the viewfinder. The image is transparent and used to display the image obtained by the camera;
UIImage * overLayImag = [UIImage imageNamed: @ "overLay.png"];
UIImageView * bgImageView = [[UIImageView alloc] initWithImage: overLayImag];
[OverLayView addSubview: bgImageView];

// Customize a photo button on the overlay View
UIButton * takePhotoBtn = [UIButton buttonWithType: UIButtonTypeCustom];
[TakePhotoBtn setFrame: CGRectMake (74,370,178, 37)];
[TakePhotoBtn addTarget: self action: @ selector (takePhoto :) forControlEvents: UIControlEventTouchUpInside];
[OverLayView addSubview: takePhotoBtn];

// Set the view to the overlapping layer of the camera
Picker. cameraOverlayView = overLayView;

// Display Selector
[Self presentModalViewController: picker animated: YES];
}

-(Void) takePhoto :( id) sender
{
[Picker takePicture]; // it will automatically call the proxy method to take the photo;
}

2. Use the AV Foundation framework to implement real-time Filters

UIImagePickerController does not process the original camera data. It is accessed only after the original data is processed as an image. The AV Foundation can directly access the original data before it becomes an image, which enables us to perform some additional dark box operations to implement real-time filter creation.

AVCaptureSession is used to control the process from an input device (AVCaptureDeviceInput) to an inbound output buffer (AVCaptureOutput. Once AVCaptureSession is started, it collects information from the input device and outputs the information to the data buffer when appropriate.

AVCaptureVideoPreviewLayer displays raw data from the input device by default. To implement real-time filters or draw additional objects on this layer, You need to obtain data frame data from the video output buffer, after processing, the pixel data can be output to another layer or OpenGL context.

AVCaptureConnection is a class used to establish a connection between AVCaptureInput and AVCaptureOutput. AVCaptureSession must obtain actual data from AVCaptureConnection.

Real-time camera effect preparation process: Create a New AVCaptureSession; Set preset values for image quality; Use AVCaptureDevice to create necessary input capturing devices such as cameras; use AVCaptureStillImageOutput or AVCaptureVideoDataOutput to add an output buffer. Create an AVCaptureVideoPreviewLayer (Preview layer) and add it to the view associated with the View Controller to form a subview. Start AVCaptureSession; obtain a reference of AVCaptureConnection. The link is located between AVCaptureInput and AVCaptureVideoDataOutput. capture data of individual frames from AVCaptureVideoDataOutput and display the data in the Custom preview layer.

 

Summary:

UIImagePickerController can be used for simple media capturing. By setting sourceType and captureMode, you can configure UIImagePickerController to capture static images or videos at different resolutions.

AVFoundation can be used to create our own custom capture solution. We can access the data when frame data is captured from the device, instead of waiting until the image data is finalized, this provides us with real-time camera effects and other filter operations.