[FREQ] Cropped preview?

[feelingsonice]

Is there a way to crop the preview and capture photos exactly like the cropped preview?

[deden]

@feelingsonice, I think you should implement Custom Preview for that

MCameraController()
    .outputType(.video)
    .gridVisible(false)
    .cameraPosition(.back) 
    .mediaPreviewScreen(CroppedPreview.init)
                

struct CroppedPreview: MCameraPreview {
    let capturedMedia: MijickCameraView.MCameraMedia
    let namespace: Namespace.ID
    let retakeAction: () -> ()
    let acceptMediaAction: () -> ()
// crop implementation
}

[feelingsonice]

@deden any tip on how to actually do that? I ran into a wall trying to do that with my own AVCaptureVideoPreviewLayer and couldn’t figure it out. Hence I’m now trying to see if there’s any third party libraries that could support this :(

[FulcrumOne]

@feelingsonice, were you able to solve your problem on your own?

If not please let me know, I'll try to create a demo project for you this week.

[feelingsonice]

I ended up not actually "cropping" the preview but fitFill a smaller rectangle on screen. When the user captures a photo, I crop it to the preview frame with something like this.

I think this works fine for my use case but would love to know how to actually crop out of curiosity. If it's a lot of work for you don't worry about it though :)

Thanks for the help!

[bogdan]

My guess is that because CameraBridgeView goes offscreen because it doesn't maintain a proper aspect ratio.

Here is how I fixed it:

import SwiftUI
import AVFoundation

public struct DefaultCameraScreen: MCameraScreen {
    @ObservedObject public var cameraManager: CameraManager
    public let namespace: Namespace.ID
    public let closeMCameraAction: () -> ()
    var config: Config = .init()


    public var body: some View {
        VStack {
            createTopBar()
            Spacer()
            createContentView()
                // hardcode aspect ratio is good enough for my case, but I am not sure about you
                .aspectRatio(3.0 / 4.0, contentMode: .fit)
            Spacer()
            createBottomBar()
        }
        .ignoresSafeArea()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.mijickBackgroundPrimary).ignoresSafeArea())
        .statusBarHidden()
        .animation(.mSpring)
    }
}
private extension DefaultCameraScreen {
    func createTopBar() -> some View {
        DefaultCameraScreen.TopBar(parent: self)
            .frame(alignment: .top)
    }
    func createContentView() -> some View {
        createCameraOutputView()
            .ignoresSafeArea()
    }
    func createBottomBar() -> some View {
        DefaultCameraScreen.BottomBar(parent: self)
            .frame(alignment: .bottom)
    }
}