Introduction

In this blog post we will look at creating a custom camera session and adding a blur effect over it. This effect can be seen in apps like Snapchat while shipping down to show the user profile view.

Example (Snapchat)

Camera View

With iOS 10 and Swift 3, Apple has simplified the process of creating your custom camera implementation. We begin by creating reference to our AVCaptureSession.

let session: AVCaptureSession = AVCaptureSession()

In our viewDidLoad() or viewWillAppear() we begin the setup of our session, and capture device.

session.sessionPreset = AVCaptureSessionPresetHigh
if let device = AVCaptureDevice.defaultDevice(withMediaType: AVMediaTypeVideo) {
    do {
        try session.addInput(AVCaptureDeviceInput(device: device))
    } catch {
        print(error.localizedDescription)
    }            
}

Now we setup our preview layer which will show the preview from our camera.

guard let previewLayer = AVCaptureVideoPreviewLayer(session: session) else {
    return
}

// Add the preview layer to our view
self.view.layer.addSublayer(previewLayer)
previewLayer.frame = self.view.layer.bounds

Once the preview layer is setup calling session.startRunning() should start the camera and display the output from the camera on our view.

Blur View

Once we have our camera setup, adding the blur view is quite simple. UIKit provides a visual effects view API that allows us to add some interesting effects to our views.

let blur = UIBlurEffect(style: .dark)
let blurView = UIVisualEffectView(effect: blur)
blurView.frame = self.view.bounds
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.view.addSubview(blurView)

In the code above we start by creating a blur effect with a dark style and then instantiate a visual effects view with the blur effect. Finally we add the visual effects view to our main view. The results are pretty awesome.

Blur Effect

Conclusion

Adding a blur effect to a realtime camera output is quite easy and can really enhance the user experience. This effect can be used as a background view, you can add a pan gesture recognizer and change the alpha values of the blur view to control the blur effect (like how snapchat does). The possibilities are endless.

Source Code

Here is the full view controller source code.

import UIKit

class ViewController: UIViewController {
    
    let session: AVCaptureSession = AVCaptureSession()

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        session.sessionPreset = AVCaptureSessionPresetHigh
        
        if let device = AVCaptureDevice.defaultDevice(withMediaType: AVMediaTypeVideo) {
            do {
                try session.addInput(AVCaptureDeviceInput(device: device))
                
            } catch {
                print(error.localizedDescription)
            }
            
            guard let previewLayer = AVCaptureVideoPreviewLayer(session: session) else {
                print("no preview layer")
                return
            }
            
            self.view.layer.addSublayer(previewLayer)
            previewLayer.frame = self.view.layer.bounds
            
        }
        
        
        session.startRunning()
        
        let blur = UIBlurEffect(style: .regular)
        let blurView = UIVisualEffectView(effect: blur)
        blurView.frame = self.view.bounds
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.view.addSubview(blurView)
        
        
    }

}