Swift live preview cropper - swift

Question

In my application, I am trying to recreate a live preview picture cropper like in the popular application "Photomath".
Initially, I divided my code into three different classes. The Live preview view (a UIView), an Overlay View (a UIView also), and the actual Cropper View.
Currently, my thought process is to add the CropperView into the Overlay and then the Overlay into the Live Preview View. So far that's working.
I have a UIPanGesture hooked up to the CropperView in order to have it move around eventually. However, here is where the problem resides.
The inside of the cropper is clear or less dark than the surrounding overlay. I've heard that you can achieve this using a mask but have not been successful.
Here is the code for the Live Preview View
class NotationCameraView : UIView {
private var session : AVCaptureSession!
private var stillImageOutput : AVCapturePhotoOutput!
private var videoPreviewLayer : AVCaptureVideoPreviewLayer!
private var previewCropper : OverlayCropper!
override init(frame: CGRect) {
super.init(frame: frame)
self.commonInitializer()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
self.commonInitializer()
}
private func commonInitializer() {
if AVCaptureDevice.authorizationStatus(for: .video) == .authorized {
self.setUpLivePreview()
self.setUpOverlayCropper()
print("Set up view")
} else {
AVCaptureDevice.requestAccess(for: .video) { (success) in
if success {
self.setUpLivePreview()
self.setUpOverlayCropper()
} else {
print("Give me your camera REEEEEEEEEEE")
}
}
}
}
/**
Sets up the live preview of the back camera
*/
private func setUpLivePreview() {
self.session = AVCaptureSession()
self.session.sessionPreset = .high
let backCamera = AVCaptureDevice.default(for: AVMediaType.video)
//MARK: Need to have an overlay view so that the user does not see the video preview frame being upscaled
do {
let input = try AVCaptureDeviceInput(device: backCamera!)
self.stillImageOutput = AVCapturePhotoOutput()
if self.session.canAddInput(input) && self.session.canAddOutput(self.stillImageOutput) {
self.session.addInput(input)
self.session.addOutput(self.stillImageOutput)
self.videoPreviewLayer = AVCaptureVideoPreviewLayer(session: self.session)
self.videoPreviewLayer.videoGravity = .resizeAspectFill
self.videoPreviewLayer.connection?.videoOrientation = .portrait
self.layer.addSublayer(videoPreviewLayer)
//Have public methods for starting or stopping the capture session
DispatchQueue.global(qos: .userInitiated).async {
self.session.startRunning()
DispatchQueue.main.async {
self.videoPreviewLayer.frame = self.bounds
}
}
}
} catch {
print("Need to allow permission to the back camera")
}
}
/**
Sets up the overlay cropper for the live preview.
*/
private func setUpOverlayCropper() {
self.previewCropper = OverlayCropper(frame: self.bounds)
self.previewCropper.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(self.previewCropper)
}
}
Here is the code for the Overlay.
class OverlayCropper : UIView {
private var cropperView : CropperView!
override init(frame: CGRect) {
super.init(frame: frame)
self.commonInitializer()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
self.commonInitializer()
}
private func commonInitializer() {
self.cropperView = CropperView(frame: CGRect(x: 50, y: 100, width: 100, height: 100))
self.cropperView.backgroundColor = UIColor.blue
self.cropperView.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(cropperView)
self.backgroundColor = UIColor.black.withAlphaComponent(0.25)
}
}
and lastly here is the code for the CropperView
class CropperView : UIView {
override init(frame: CGRect) {
super.init(frame: frame)
self.commonInitializer()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
self.commonInitializer()
}
private func commonInitializer() {
let panGesture = UIPanGestureRecognizer(target: self, action: #selector(self.handlePanGesture(_:)))
self.addGestureRecognizer(panGesture)
self.makeMask()
}
#objc private func handlePanGesture(_ panGesture : UIPanGestureRecognizer) {
let translation = panGesture.translation(in: self)
//print(translation.x, translation.y)
self.center = CGPoint(x: self.center.x + translation.x, y: self.center.y + translation.y)
panGesture.setTranslation(CGPoint.zero, in: self)
}
private func makeMask() {
let path = CGMutablePath()
path.addRect(CGRect(origin: .zero, size: self.frame.size))
let maskLayer = CAShapeLayer()
maskLayer.backgroundColor = UIColor.clear.cgColor
maskLayer.path = path
maskLayer.fillRule = .evenOdd
self.layer.mask = maskLayer
self.clipsToBounds = true
}
}