ios - 在大部分屏幕模糊的 iOS 应用上显示相机

Question

我想创建一个能够通过它扫描二维码的 iOS 应用程序。我已经能够添加扫描代码本身的逻辑，但我遇到了这个屏幕的 UI 问题。我想要实现的是在模糊模式下显示相机显示，并在屏幕中心有一个小方块，实际显示相机正在看到的内容。

让我们来看一些代码：

class ScannerViewController: UIViewController, AVCaptureMetadataOutputObjectsDelegate {
    var captureSession: AVCaptureSession!
    var previewLayer: AVCaptureVideoPreviewLayer!

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = UIColor.orange
        captureSession = AVCaptureSession()

        guard let videoDevice = AVCaptureDevice.default(for: .video),
            let deviceInput = try? AVCaptureDeviceInput(device: videoDevice) else {
                return
        }

        captureSession = AVCaptureSession()
        captureSession?.addInput(deviceInput)

        let captureMetadataOutput = AVCaptureMetadataOutput()
        captureSession?.addOutput(captureMetadataOutput)
        captureMetadataOutput.setMetadataObjectsDelegate(self, queue: DispatchQueue.main)
        captureMetadataOutput.metadataObjectTypes = [.qr]

        guard let captureSession = captureSession else { return }
        previewLayer = AVCaptureVideoPreviewLayer(session: captureSession)
        previewLayer.frame = CGRect(x: view.frame.width / 2 - 80, y: view.frame.height / 2 - 80, width: 160, height: 160)
        previewLayer.videoGravity = .resizeAspectFill
        view.layer.addSublayer(previewLayer)

        captureSession.startRunning()

    }
}

此代码允许我呈现一个橙色背景的屏幕，屏幕中间有一个 160x160 的正方形，将显示正在搜索 QR 码的相机。在设备上看起来像这样

然后，我更新了代码，以便previewLayer.frame占据整个屏幕，并且可以添加蓝色效果：

//      previewLayer.frame = CGRect(x: view.frame.width / 2 - 80, y: view.frame.height / 2 - 80, width: 160, height: 160)  
        previewLayer.frame = view.layer.bounds

        let blur = UIBlurEffect(style: .regular)
        let blurView = UIVisualEffectView(effect: blur)
        blurView.frame = self.view.bounds
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.view.addSubview(blurView)

这是它在第二个版本上的样子。

我的问题是：我怎样才能实现两者的混合？让整个屏幕显示相机输出的模糊视图，而屏幕中心呈现一个正方形，可以清楚地看到相机可以扫描的内容？像这样的东西

标签： iosswiftcameraqr-code