IOS Tutorial: Building a Full Screen Camera with Swift/Xcode (Part 1)
How to create custom camera app in Xcode for taking photos.
Today we are going to build a custom full-screen camera application. The app provides a minimalistic UI with a single capture button at the bottom of the screen.
To begin, you can download the Starter project template from https://github.com/m-sukiasyan/CameraApp.git . The template includes a pre-built storyboard and custom classes. If you open the Storyboard, you will find two view controllers. The Custom Camera Controller is used to show the camera interface, while the Photo View Controller is constructed for showing a captured photo. Both view controllers are associated with the corresponding class.
Configuring a Session
Firstly, open CustomCameraController.swift and declare a variable of the type AVCaptureSession:
Since the APIs is available in the AVFoundation framework, make sure you import the package in order to use it:
Create a configure() method to configure the session and insert the following code:
You use the sessionPreset property to specify the image quality and resolution you want. Here we preset it to AVCaptureSession.Preset.photo , which indicates a full photo resolution.
Selecting the Input Device
The next step is to find out the camera devices for taking photos. First, declare the following instance variables in the CustomCameraController.swift class:
We create two separate variables for storing the AVCaptureDevice objects, because the camera app supports both front & back-facing cameras. The currentDevice variable is used for storing the current device that is selected by the user. Insert the following code in the configure() method:
- In the AVFoundation framework, a physical device is abstracted by an AVCaptureDevice object.
- Evidently, an iPhone has more than one input (audio & video). Therefore, the AVCaptureDevice.DiscoverySession class is destined to find all available capture devices matching a specific device type (e.g. wide-angle camera), supported media types for capture (such as audio / video), and position (front- or backfacing).
- In the code snippet, we create a device discovery session to find the available capture devices that are capable of capturing image (i.e. AVMediaType.video ).
- The iPhone device now comes with several cameras: wide angle camera, telephoto, and true depth camera. Here we specify to find the wide angle camera (i.e. .builtInWideAngleCamera ) without a specific position. With the cameras returned, we examine its position property to determine if it is a frontfacing or back-facing camera.
- By default, the camera app uses the back-facing camera when it’s first started. Thus, we set the currentDevice to the back-facing camera. Lastly, we create an instance of AVCaptureDeviceInput with the current device so that you can capture data from the device.
Configuring an Output Device
With the input device configured, declare the following variable in the CustomCameraController.swift class for the device output:
Insert the following code in the configure() method
Here we create an instance of AVCapturePhotoOutput for capturing still images. This class supports the basic capture of still images, RAW-format capture, and Live Photos.
Coordinating the Input and Output using Session
After all configuration of both input and output, you need to attach them to the capture session so that it can coordinate the data between them. Insert the following code in the configure() method:
You have now configured the AVCaptureSession object and are ready to present the camera preview. First, declare an instance variable:
And insert the following code in the configure() method:
- AVCaptureVideoPreviewLayer displays video as it is being captured by an input device.
- After, the layer is added to the view’s layer to display on the screen. videoGravity property in preview layer indicates how the video preview is displayed.
- For setting full-screen camera interface we set it to AVLayerVideoGravity.resizeAspectFill. You’re free to try the other two options ( AVLayerVideoGravity.resize & AVLayerVideoGravity.resizeAspect ) and watch out how the camera interface presentetion changes.
- Lastly, we call the startRunning method of the session to start capturing data.
Before you test the app, insert the following code in the viewDidLoad() method to call the configure() method:
Lastly, you have to specify the reason why you need to access the camera in the Info.plist. The message will be displayed to the user when the app is first used. It is required to ask for the user’s permission, otherwise, your app will not be able to access the camera.
So, in the Info.plist file, insert a key named Privacy — Camera Usage Description and specify the reason (e.g. for capturing photos) in the value field.
Capture a Photo
To capture a image when the camera button is tapped, update the capture() method of the CustomCameraController.swift file to the following:
To capture a photo using AVCapturePhotoOutput , the first thing you need to do is create an AVCapturePhotoSettings object to specify settings for the capture.
With the photo settings, you can then call the capturePhoto() method to begin capturing the photo. CustomCameraController should implement the AVCapturePhotoCaptureDelegate protocol. Then create an extension to adopt the protocol. Insert the following code in the CustomCameraController.swift file:
The photoOutput(_:didFinishProcessingPhoto:error:) method is called after the capture is complete . Firstly, we check if there is any error. If not, then the captured photo is embedded in the photo parameter. To access the image data you need to call the fileDataRepresentation() method. Use UIImage to construct the image from data.
Now you’re ready to test the app. Hit the Run button and test out the camera. You should now able to capture a photo. See Final Project.
In Part 2, I will talk about Front and Back Facing Cameras, Zoom in & Out, Saving Images to the Photo Album. It actually not that difficult.
