creating custom camera with square view on iOS

Question

I am trying to create a custom camera experience on iOS and the following code snippet is as far as I got. Basically I want the usual camera view (i.e. with the following buttons: capture, flash, grid, front/back, cancel). But the only difference between the normal camera and mine is that I want a square for the preview surface; not a rectangle. And then, what you see is what you get (WYSIWYG) such that there is no cropping necessary; as the user would have taken a square picture in the first place.

I have also been looking at the library https://github.com/danielebogo/DBCamera but I am not seeing how to customize it to my end. Any help? Thanks.

MY CODE SO FAR:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    //Capture Session
    AVCaptureSession *session = [[AVCaptureSession alloc]init];
    session.sessionPreset = AVCaptureSessionPresetPhoto;

    //Add device
    AVCaptureDevice *device =
    [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];

    //Input
    AVCaptureDeviceInput *input = [AVCaptureDeviceInput deviceInputWithDevice:device error:nil];

    if (!input)
    {
        NSLog(@"No Input");
    }

    [session addInput:input];

    //Output
    AVCaptureVideoDataOutput *output = [[AVCaptureVideoDataOutput alloc] init];
    [session addOutput:output];
    output.videoSettings =
    @{ (NSString *)kCVPixelBufferPixelFormatTypeKey : @(kCVPixelFormatType_32BGRA) };

    //Preview Layer
    AVCaptureVideoPreviewLayer *previewLayer = [[AVCaptureVideoPreviewLayer alloc] initWithSession:session];
    UIView *myView = self.view;
    previewLayer.frame = myView.bounds;
    previewLayer.videoGravity = AVLayerVideoGravityResizeAspectFill;
    [self.view.layer addSublayer:previewLayer];

    //Start capture session
    [session startRunning];
}

This is the only custom code in a single view project on Xcode

I'm a little confused - do you want to create your own camera-view from scratch, or do you want to use the built-in `UIImagePickerController` and just customize it a bit? — Aleksander, Jan 07 '15 at 18:05
Either one would be okay as long as I get good control over what is happening. I have been looking at the Picker option as well; but there seems to be consensus that it is a poorer approach; which is why I have been researching the "from scratch" approach for the past few days. — Katedral Pillon, Jan 07 '15 at 21:44
Yes, the `UIImagePickerController` is not something I would personally recommend if you want full control. However, it is very quick and easy to implement. It does provide a fair amount of customization options, have a look at this post: [link](http://stackoverflow.com/questions/7639188/ios-camera-with-custom-view) If you want more options, go check out this demo program from Apple on the AV-classes [link](https://developer.apple.com/library/ios/samplecode/AVCam/Introduction/Intro.html#//apple_ref/doc/uid/DTS40010112) — Aleksander, Jan 07 '15 at 22:50
small world: I already tried the AVCam. But when I tried to resize the `AVCamPreviewView` view in the storyboard into a square, itself it becomes the square; however, inside it is a smaller rectangle where the actual image shows up. Do you know how to get the actual image to fill the square (i.e. the resized `AVCamPreviewView`)? Or was I not supposed to resize `AVCamPreviewView` itself? Thanks. — Katedral Pillon, Jan 07 '15 at 23:03
Have you tried setting the `previewLayer.videoGravity = AVLayerVideoGravityResizeAspectFill`? (may be typos there) — Aleksander, Jan 07 '15 at 23:04
that's a bit above my head. Where would I set it? I search the product to see if the variable exists, but it does not. But you sound correct. Since when I tried to resize the AVCamPreviewView into a square, the view resized correctly but inside the AVCamPreviewView the camera feed shows up inside a small rectangle; it likely that some aspect ratio is set in somewhere but I can't find where to override it. — Katedral Pillon, Jan 07 '15 at 23:14
Yes, by setting the `videoGravity` to `AVLayerVideoGravityResizeAspectFill ` on the `AVCaptureVideoPreviewLayer` you fix that aspect-ratio issue. This should be set in-code, for example in `viewDidLoad`. Without being sure, I believe you can set `(AVCaptureVideoPreviewLayer *)self.previewView.layer.videoGravity` if you're using the `AVCam` class from Apple. However, that class is way more in-depth than you will need, so I suggest watching/ reading another tutorial for example this one [link](http://youtu.be/Xv1FfqVy-KM) — Aleksander, Jan 07 '15 at 23:35
Thank you so much for the video tutorial link! Priceless! Completely priceless!! If you don't mind, would you please repost as an answer when you have a chance so I may close this thread as answered. Thanks again for helping out. — Katedral Pillon, Jan 08 '15 at 07:46

score 10 · Accepted Answer · edited May 23 '17 at 12:26

10

You have two options for doing what you want, either stick with and customize a UIImagePickerController, or create your own by using the AVFoundation.

The UIImagePickerController does provide a fair bit of customization options, and this similar thread has some good information on that: link.

If you still want to make your own, I suggest heading over to the Apple Documentation and checking out this demo project called AVCam: link. However, it's way more in-depth than you'll probably need so I can recommend this video tutorial as well: link.

If going for the last option, I would like to mention that to make the "actual camera" fit the frame of your previewLayer, you can set the videoGravity on the AVCaptureVideoPreviewLayer to AVLayerVideoGravityResizeAspectFill.

edited May 23 '17 at 12:26

Community

1
1

answered Jan 08 '15 at 16:36

Aleksander

2,564
5
28
53

4

Is there a way to make the resulting image match what you see in the preview? This worked to give me a square preview layer output, but the image I get out of it is still the original camera aspect ratio. – sak Jan 13 '16 at 19:20
1

@sak Is this solved "square preview layer output, but the image I get out of it is still the original camera aspect ratio"? – iOS Nepal Apr 26 '18 at 03:42
@iOSNepal Can you share the solutions. I face the same problem. – riseres Oct 28 '20 at 18:59

Meet Doshi · Answer 2 · 2016-07-14T06:34:23.430

Working with a custom camera can be a bit of a pain, but it’ll pay dividends given that you’ll really be able to customize your app experience.

The easiest way to do it is to use TGCameraViewController.

Using this TGCameraViewController, you can edit whole camera view. Also, It provides following functionalities:-

Easy way to access album (camera roll)
Flash auto, off and on
Focus
Front and back camera

Also you can refer AVCamManual: Extending AVCam to Use Manual Capture document for creating own custom camera.

creating custom camera with square view on iOS

2 Answers2

Linked