How to scan Bar code in a specific area of AVCaptureVideoPreviewLayer using Objective C in iOS?

Question

I am trying to implement Bar code Scanner to my iPhone App using AVFoundation in Objective C. Bar code scanning part is working fine, but the issue is currently preview is displaying in the whole screen of the device and I want scanner preview to be display in a specific area of the device and need to change brightness area of the background (please refer to the below screenshot).

How can I place specific region of the AVCaptureVideoPreviewLayer to get the Bar scanner result with the corners?

Possible duplicate of [How do I use the metadataOutputRectOfInterestForRect method and rectOfInterest property to scan a specific area? (QR Code)](https://stackoverflow.com/questions/32401364/how-do-i-use-the-metadataoutputrectofinterestforrect-method-and-rectofinterest-p) — Tj3n, Jul 13 '17 at 05:26
Thank you for your response @Tj3n. I am newly to iOS, this solution is using Swift. can you please help me to achieve this in Objective C? — Anand Gautam, Jul 13 '17 at 05:35
You can try [this one](https://stackoverflow.com/questions/23284762/how-to-set-scanning-bound-using-avfoundation) also — Tj3n, Jul 13 '17 at 05:45
Hi @Tj3n, I tried to convert Swift code to Objective C and got the specific area to scan bar code. do you have any idea how can I set four corners using UIBezierPath. possible to share any reference. thanks — Anand Gautam, Jul 13 '17 at 06:47

score 4 · Answer 1 · edited Jul 13 '17 at 08:32

I have one example in my pj, it's in Swift but I guess you can convert it fine, tweak the code as you needed, 55 is the length of each line

To create the corner, maybe this will do, scanRectView is the interest rect:

func createFrame() -> CAShapeLayer {
    let height: CGFloat = self.scanRectView.frame.size.height
    let width: CGFloat = self.scanRectView.frame.size.width
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 5, y: 50))
    path.addLine(to: CGPoint(x: 5, y: 5))
    path.addLine(to: CGPoint(x: 50, y: 5))
    path.move(to: CGPoint(x: height - 55, y: 5))
    path.addLine(to: CGPoint(x: height - 5, y: 5))
    path.addLine(to: CGPoint(x: height - 5, y: 55))
    path.move(to: CGPoint(x: 5, y: width - 55))
    path.addLine(to: CGPoint(x: 5, y: width - 5))
    path.addLine(to: CGPoint(x: 55, y: width - 5))
    path.move(to: CGPoint(x: width - 55, y: height - 5))
    path.addLine(to: CGPoint(x: width - 5, y: height - 5))
    path.addLine(to: CGPoint(x: width - 5, y: height - 55))
    let shape = CAShapeLayer()
    shape.path = path.cgPath
    shape.strokeColor = UIColor.white.cgColor
    shape.lineWidth = 5
    shape.fillColor = UIColor.clear.cgColor
    return shape
}

Objective C code :

    CGFloat height = baseScannerView.frame.size.height+4;
    CGFloat width = baseScannerView.frame.size.width+4;

    UIBezierPath* path = [UIBezierPath bezierPath];

    [path moveToPoint:CGPointMake(1, 25)];
    [path addLineToPoint:CGPointMake(1, 1)];
    [path addLineToPoint:CGPointMake(25, 1)];

    [path moveToPoint:CGPointMake(width - 30, 1)];
    [path addLineToPoint:CGPointMake(width - 5, 1)];
    [path addLineToPoint:CGPointMake(width - 5, 25)];

    [path moveToPoint:CGPointMake(1, height - 30)];
    [path addLineToPoint:CGPointMake(1, height - 5)];
    [path addLineToPoint:CGPointMake(25, height - 5)];

    [path moveToPoint:CGPointMake(width - 30, height - 5)];
    [path addLineToPoint:CGPointMake(width - 5, height - 5)];
    [path addLineToPoint:CGPointMake(width - 5, height - 30)];

    CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.path = path.CGPath;
    pathLayer.strokeColor = [[UIColor redColor] CGColor];
    pathLayer.lineWidth = 5.0f;
    pathLayer.fillColor = nil;

    [self.scanRectView.layer addSublayer:pathLayer];

After create, add it like self.scanRectView.layer.addSublayer(self.createFrame()) in viewWillAppear or viewDidLayoutSubView

Result:

let me convert this to Objective C, I will let you know soon. thanks dear :) — Anand Gautam, Jul 13 '17 at 07:23
Hi @Tj3n, I have converted this too with respected coordinates. Now I am trying to change rectOfInterest of AVCaptureMetadataOutput. but can't able to change brightness area of the scanner background. Any idea? — Anand Gautam, Jul 13 '17 at 08:34
Create view2 with lower brightness, then use `view2.layer.mask = rectOfInterestView.layer` and `view2.layer.masksToBounds = YES` to mask your background with your scan view — Tj3n, Jul 13 '17 at 08:38
okey, but view2 will not appear like scanner view, please see this link http://imgur.com/a/qb8jT — Anand Gautam, Jul 13 '17 at 08:42
what is rectOfInterestView here, did you mean scanRectView ? — Anand Gautam, Jul 13 '17 at 08:58
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/149093/discussion-between-anand-gautam-and-tj3n). — Anand Gautam, Jul 13 '17 at 09:03

score 0 · Answer 2 · answered Jul 13 '17 at 06:00

You can change AVCaptureVideoPreviewLayer frame, according to ur needs, like this, this is example,

AVCaptureVideoPreviewLayer *_CaptureLayer;
AVCaptureSession *_Capturesession;
_Capturesession = [[AVCaptureSession alloc] init];
_CaptureLayer = [AVCaptureVideoPreviewLayer layerWithSession: 
                                             _Capturesession];
_CaptureLayer = CGRectMake(self.view.frame.origin.x, 
                    self.view.frame.origin.y+100, 
                    self.view.frame.size.width, 
                    self.view.frame.size.height/2.5);

_CaptureLayer = AVLayerVideoGravityResizeAspectFill;
[self.view.layer addSublayer: _CaptureLayer];

How to scan Bar code in a specific area of AVCaptureVideoPreviewLayer using Objective C in iOS?

2 Answers2

Linked