4

I am building an iOS app using Swift which requires QR code scanner functionality.

I have implemented a QR code scanner using AVFoundation, right now my capture screen looks same as a video recording screen i.e. AVCaptureVideoPreviewLayer shows what is being captured by the camera.

But since it is a QR code scanner and not a regular image or video capture, I would like my VideoPreviewLayer to look like this: camera overlay screenshot

I understand this can be achieved by adding another VideoPreviewLayer on top of one VideoPreviewLayer.

My questions are:

  1. How do I add the borders only to the edges in the upper (or smaller) preview layer?

  2. How do I change the brightness level for the VideoPreviewLayer in the background?

  3. How to ignore media captured by the the background layer?

shim
  • 9,289
  • 12
  • 69
  • 108
RJN_WLY
  • 335
  • 1
  • 4
  • 18
  • I would mix the the tutorial frameview suggested by @Singh and use this post: https://stackoverflow.com/q/44282738/3900902 to create the corners. Hope this helps. – Paulo Jun 11 '17 at 10:35
  • @Paulo : the tutorial frameview suggested by Singh ? – RJN_WLY Jun 12 '17 at 05:17
  • Oh they removed their answer. Here is the tutorial for that: http://www.appcoda.com/barcode-reader-swift/. As far as the gradient layer, I am not that great at iOS/swift, but I assume you would add a sub layer with a lower opacity – Paulo Jun 12 '17 at 05:23

2 Answers2

3

You shouldn't use another VideoPreviewLayer. Instead you should add two sublayers - one for the masked background area and one for the corners.

Have a look at the source code in this repo for an example.

To limit the video capturing to the masked area you have to set the rectOfInterest of your AVCaptureMetadataOutput.

let rectOfInterest = videoPreviewLayer.metadataOutputRectConverted(fromLayerRect: rect)
metadataOutput.rectOfInterest = rectOfInterest
Nayan Dave
  • 1,078
  • 1
  • 8
  • 30
Jan
  • 104
  • 5
1

Long story short: you can use AVCaptureVideoPreviewLayer for video capturing, create another CALayer() and use layer.insertSublayer(..., above: ...) to insert your "custom" layer above the video layer, and by custom I mean just yet another CALayer with let say

layer.contents = spinner.cgImage

Here's a bit more detailed instructions

elp
  • 8,021
  • 7
  • 61
  • 120
Mikita Manko
  • 1,133
  • 9
  • 9