Taking a square photo with Camera App

Question

I am currently building a camera app and want to make the camera take a square image 375x375 like Instagram and save it like that.

I am able to square off the viewfinder of the camera but it is not taking the picture the right way, also when I save it it saves it in full view. I looked around the other Q&As on there but none of them seem to work with my code.

Can someone please help me figure this out.

import Foundation
import UIKit
import AVFoundation

class CameraViewController: UIViewController{

var captureSession = AVCaptureSession()
var frontCameraDeviceInput: AVCaptureDeviceInput?
var backCameraDeviceInput: AVCaptureDeviceInput?
var currentCamera: AVCaptureDevice?

var photoOutput: AVCapturePhotoOutput?

var cameraPreviewLayer: AVCaptureVideoPreviewLayer?

var image: UIImage?

override func viewDidLoad() {
    super.viewDidLoad()

    setupCaptureSession()
    setupDevice()
    setupInputOutput()
    setupPreviewLayer()
    startRunningCaptureSession()
}

func setupCaptureSession() {
    captureSession.sessionPreset = AVCaptureSession.Preset.photo
}

func setupDevice() {
    let frontCamera = AVCaptureDevice.default(.builtInWideAngleCamera, for: .video, position: .front)
    let backCamera = AVCaptureDevice.default(.builtInWideAngleCamera, for: .video, position: .back)

    frontCameraDeviceInput = try? AVCaptureDeviceInput(device: frontCamera!)
    backCameraDeviceInput = try? AVCaptureDeviceInput(device: backCamera!)
}

func setupInputOutput() {
    captureSession.addInput(backCameraDeviceInput!)
    photoOutput = AVCapturePhotoOutput()
    photoOutput?.isHighResolutionCaptureEnabled = true
    photoOutput?.setPreparedPhotoSettingsArray([AVCapturePhotoSettings(format:[AVVideoCodecKey: AVVideoCodecType.jpeg])], completionHandler: nil)
    captureSession.addOutput(photoOutput!)
}

func setupPreviewLayer() {
    cameraPreviewLayer = AVCaptureVideoPreviewLayer(session: captureSession)
    cameraPreviewLayer?.videoGravity = AVLayerVideoGravity.resizeAspectFill
    cameraPreviewLayer?.connection?.videoOrientation = AVCaptureVideoOrientation.portrait
    cameraPreviewLayer?.frame = self.view.frame
    self.view.layer.insertSublayer(cameraPreviewLayer!, at: 0)
}

func startRunningCaptureSession() {
    captureSession.startRunning()
}

@IBAction func camerButton(_ sender: Any) {
    let settings = AVCapturePhotoSettings()
    photoOutput?.capturePhoto(with: settings, delegate: self)
}

@IBAction func switchCamera(_ sender: Any) {
    captureSession.beginConfiguration()
    //Change camera device inputs from back to front or opposite
    if captureSession.inputs.contains(frontCameraDeviceInput!) == true {
        captureSession.removeInput(frontCameraDeviceInput!)
        captureSession.addInput(backCameraDeviceInput!)
    } else if captureSession.inputs.contains(backCameraDeviceInput!) == true {
        captureSession.removeInput(backCameraDeviceInput!)
        captureSession.addInput(frontCameraDeviceInput!)
    }

    //Commit all the configuration changes at once
    captureSession.commitConfiguration();
}

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "previewCameraPhoto" {
        let previewVC = segue.destination as! PreviewViewController
        previewVC.image = self.image
    }
}
}

extension CameraViewController: AVCapturePhotoCaptureDelegate {
func photoOutput(_ output: AVCapturePhotoOutput, didFinishProcessingPhoto photo: AVCapturePhoto, error: Error?) {
    if let imageData = photo.fileDataRepresentation() {
        image = UIImage(data: imageData)
        performSegue(withIdentifier: "previewCameraPhoto", sender: nil)
    }
}

override var prefersStatusBarHidden: Bool
{
    return true
}
}

Answer 1

The below lines of code are used to capture Image. I execute them when the capture button is tapped. In your case it is

func camerButton(_ sender: Any)

The definition of methods used is also there below.

DispatchQueue.global(qos: .default).async {
            let videoConnection = self.imageOutput.connection(with: AVMediaType.video)
            let orientation: UIDeviceOrientation = UIDevice.current.orientation
            switch orientation {
            case .portrait:
                videoConnection?.videoOrientation = .portrait
            case .portraitUpsideDown:
                videoConnection?.videoOrientation = .portraitUpsideDown
            case .landscapeRight:
                videoConnection?.videoOrientation = .landscapeLeft
            case .landscapeLeft:
                videoConnection?.videoOrientation = .landscapeRight
            default:
                videoConnection?.videoOrientation = .portrait
            }

            self.imageOutput.captureStillImageAsynchronously(from: videoConnection!) { buffer, _ in
                self.session.stopRunning()

                guard let b = buffer
                    else { return }

                let data = AVCaptureStillImageOutput.jpegStillImageNSDataRepresentation(b)

                if var image = UIImage(data: data!) {

                    // Crop the image if the output needs to be square.
                    if self.configuration.onlySquareImagesFromCamera {
                        image = self.cropImageToSquare(image)
                    }

                    // Flip image if taken form the front camera.
                    if let device = self.device, device.position == .front {
                        image = self.flipImage(image: image)
                    }

                    DispatchQueue.main.async {
                        self.didCapturePhoto?(image)
                    }
                }
            }
        }

The two methods used in this function -

func cropImageToSquare(_ image: UIImage) -> UIImage {
            let orientation: UIDeviceOrientation = UIDevice.current.orientation
            var imageWidth = image.size.width
            var imageHeight = image.size.height
            switch orientation {
            case .landscapeLeft, .landscapeRight:
                // Swap width and height if orientation is landscape
                imageWidth = image.size.height
                imageHeight = image.size.width
            default:
                break
            }

            // The center coordinate along Y axis
            let rcy = imageHeight * 0.5
            let rect = CGRect(x: rcy - imageWidth * 0.5, y: 0, width: imageWidth, height: imageWidth)
            let imageRef = image.cgImage?.cropping(to: rect)
            return UIImage(cgImage: imageRef!, scale: 1.0, orientation: image.imageOrientation)
        }


// Used when image is taken from the front camera.
func flipImage(image: UIImage!) -> UIImage! {
        let imageSize: CGSize = image.size
        UIGraphicsBeginImageContextWithOptions(imageSize, true, 1.0)
        let ctx = UIGraphicsGetCurrentContext()!
        ctx.rotate(by: CGFloat(Double.pi/2.0))
        ctx.translateBy(x: 0, y: -imageSize.width)
        ctx.scaleBy(x: imageSize.height/imageSize.width, y: imageSize.width/imageSize.height)
        ctx.draw(image.cgImage!, in: CGRect(x: 0.0,
                                            y: 0.0,
                                            width: imageSize.width,
                                            height: imageSize.height))
        let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return newImage
}

I should not forget to give credit to the developers of this library - https://github.com/Yummypets/YPImagePicker/blob/2.5.1/Source/Camera/YPCameraVC.swift