How to display overlay over AVCaptureVideoPreviewLayer

Question

I need to display image(frame) overlay over AVCaptureVideoPreviewLayer. How can i do this?

-(void) viewDidAppear:(BOOL)animated
{
    AVCaptureSession *session = [[AVCaptureSession alloc] init];
    session.sessionPreset = AVCaptureSessionPresetPhoto;
    [session commitConfiguration];

    CALayer *viewLayer = self.vImagePreview.layer;
    NSLog(@"viewLayer = %@", viewLayer);

    AVCaptureVideoPreviewLayer *captureVideoPreviewLayer = [[AVCaptureVideoPreviewLayer alloc] initWithSession:session];

    captureVideoPreviewLayer.frame = self.vImagePreview.bounds;
    [self.vImagePreview.layer addSublayer:captureVideoPreviewLayer];

    AVCaptureDevice *device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];

    NSError *error = nil;
    AVCaptureDeviceInput *input = [AVCaptureDeviceInput deviceInputWithDevice:device error:&error];
    if (!input) {
        // Handle the error appropriately.
        NSLog(@"ERROR: trying to open camera: %@", error);
    }
    [session addInput:input];

    _stillImageOutput = [[AVCaptureStillImageOutput alloc] init];
    NSDictionary *outputSettings = [[NSDictionary alloc] initWithObjectsAndKeys: AVVideoCodecJPEG, AVVideoCodecKey, nil];
    [_stillImageOutput setOutputSettings:outputSettings];

    [session addOutput:_stillImageOutput];

    [session startRunning];

}

Adding new view over the video output layer does not work. The preview layer appear on top of all views.

My view hierarchy:

• MainView
  • OverlayView
  • VideoOutputView

Hypsometer

Answer 1

Solved by creating all views programmatically (without storyboard)

Hypsometer

If you're going to solve the solution yourself please demonstrate the solution in your answer – Prosper

Answer 2

Even though this question was asked N years ago, I would like to share my exact answer. After few minutes, I was able to comprehend what Gujamin said. Indeed, the solution can be do it programmatically. But in case you're doing in XIB or Storyboard, check this kind of hierarchy. Don't put any subviews to your CameraPreviewView (the uiview which its layer will be the camera).

Brede

Answer 3

I figured it out. The trick was to have the video scan view as it's own view with nothing inside it (no subviews) and then add the overlays as sibling views (instead of as child views).

This solution works within Interface Builder without having to resort to programmatically creating the views.

Cyprinoid

Answer 4

Currently using iOS 8.4 and Xcode 6.4

It worked for me to add two sublayers to self.view, both added in the storyboard. In the document outline I now have: (order is critical - unfortunately the lower views are drawn ON TOP of the views above them - not confusing at all. Make sure overlayView is not opaque)

View
    previewView
    overlayView

I kept outlets to both subviews in my code so I could add the AVCaptureVideoPreviewLayer directly as a sublayer of previewView and set the datasource of my overlayView

For overlayView I made a custom subclass of UIView so I could implement drawRect:

In drawRect: I was able to draw rectangles around captured barcodes identified in my AVCaptureSession while it was still running and showing the preview.

Tavy