Xiao Ling

Posted on Mar 4, 2022 • Edited on Mar 28, 2024 • Originally published at dynamsoft.com

Creating an iOS Barcode and QR Code Scanner with SwiftUI on M1 Mac

#ios #swiftui #qrcode #swift

SwiftUI is a robust UI framework designed for constructing native applications across all Apple platforms. This article will guide you through developing an iOS QR code scanner utilizing SwiftUI, Dynamsoft Camera Enhancer and Dynamsoft Barcode Reader on an M1 Mac mini.

Prerequisites

Before starting, ensure you have the following tools and resources:

Xcode: The integrated development environment (IDE) for macOS, required for iOS app development.
CocoaPods: A dependency manager for Swift and Objective-C Cocoa projects. Follow these steps to install:
1. Install Homebrew (if not already installed) by running the following command in your terminal:
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
2. Install CocoaPods using Homebrew with the command below:
```
brew install cocoapods
```
A Trial License Key for the Dynamsoft iOS Barcode SDK is available here. This key is necessary to unlock the full capabilities of the SDK for development and testing purposes.

Crash Course for Implementing an iOS Barcode QR Code Scanner with SwiftUI

Dynamsoft Camera Enhancer provides a camera view that simplifies starting a camera session with just a few lines of Swift code. The SDK can work alongside Dynamsoft Barcode Reader to decode various barcode types, including QR codes, DataMatrix, PDF417, and more, directly from the camera frame. The following sections will guide you through integrating the camera view and barcode reader into a SwiftUI project step by step.

Step 1. Initialize CocoaPods in Your Project

Create a new iOS SwiftUI project and name it qrscanner.
Navigate to your Xcode project directory in the terminal.
Execute the following command to create a Podfile file, which will manage your project's dependencies:
```
pod init
```

In the Podfile, include the DynamsoftCore, DynamsoftImageProcessing, DynamsoftLicense, DynamsoftBarcodeReader, DynamsoftCaptureVisionRouter and DynamsoftCameraEnhancer modules:

target 'qrscanner' do
    use_frameworks!

    pod 'DynamsoftCore','3.0.20'
    pod 'DynamsoftImageProcessing','2.0.21'
    pod 'DynamsoftLicense','3.0.30'
    pod 'DynamsoftBarcodeReader','10.0.21'
    pod 'DynamsoftCaptureVisionRouter','2.0.21'
    pod 'DynamsoftCameraEnhancer','4.0.2'
end

Install the specified dependencies:
```
pod install
```
To proceed, open the qrscanner.xcworkspace file in Xcode:
```
open qrscanner.xcworkspace
```

Step 2. Configure Camera Access Permission for SwiftUI Project

Navigate to TARGETS > Info tab in Xcode and add the key Privacy - Camera Usage Description:

Privacy - Camera Usage Description

Step 3. Set the License Key for Dynamsoft Barcode Reader

The official sample code for the Dynamsoft iOS Barcode SDK is written using Storyboard and UIKit, initializing the license key in the AppDelegate.swift file. Unlike UIKit, SwiftUI does not use an AppDelegate.swift file by default for app lifecycle management. However, you can still implement similar functionality in SwiftUI using the App protocol and the @UIApplicationDelegateAdaptor property wrapper to integrate UIKit AppDelegate functionality.

Add an AppDelegate.swift file to your project and configure the DynamsoftBarcodeReader license key within the application(_:didFinishLaunchingWithOptions:) method:

import UIKit
import DynamsoftLicense

class AppDelegate: UIResponder, UIApplicationDelegate, LicenseVerificationListener {

    func onLicenseVerified(_ isSuccess: Bool, error: Error?) {
        if !isSuccess {
            if let error = error {
                print("\(error.localizedDescription)")
            }
        }
    }

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Request a trial license: https://www.dynamsoft.com/customer/license/trialLicense?product=dbr
        LicenseManager.initLicense("LICENSE-KEY", verificationDelegate: self)
        return true
    }
}

Remember to replace LICENSE-KEY with your actual Dynamsoft Barcode Reader license key.

In your qrscannerApp.swift file, utilize the @UIApplicationDelegateAdaptor to designate your AppDelegate class as the delegate for UIApplication. This step integrates your AppDelegate with the SwiftUI app lifecycle.

import SwiftUI

@main
struct qrscannerApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Step 4. Integrate Dynamsoft Barcode Reader and Dynamsoft Camera Enhancer

Create a CameraManager.swift file:

import Foundation
import UIKit
import DynamsoftCameraEnhancer
import DynamsoftCaptureVisionRouter
import DynamsoftBarcodeReader
import DynamsoftCore

class CameraManager: NSObject, ObservableObject, CapturedResultReceiver {
    @Published var results = "No QR Code found"
    private var cameraView:CameraView!
}

The CapturedResultReceiver protocol is utilized to receive captured results from the camera frame.

func onDecodedBarcodesReceived(_ result: DecodedBarcodesResult) {
    var message = ""

    if let items = result.items, items.count > 0 {
        let layer = cameraView.getDrawingLayer(DrawingLayerId.DBR.rawValue)
        layer?.clearDrawingItems()
        for item in items {
            message += String(format:"\nFormat: %@\nText: %@\n", item.formatString, item.text)
            let quadDrawingItem = QuadDrawingItem.init(quadrilateral: item.location)
            let textDrawingItem = TextDrawingItem.init(text: item.text, topLeftPoint: item.location.points[0] as! CGPoint, width: 100, height: 10)
            layer?.addDrawingItems([quadDrawingItem, textDrawingItem])
        }
    }

    DispatchQueue.main.async {
        self.results = message
    }
}

Instantiate DynamsoftCameraEnhancer and bind it with a CameraView instance. The CameraView is a UIView subclass that contains the camera view and drawing layers for displaying the barcode results. The DynamsoftCaptureVisionRouter wraps the barcode reader to process the camera frames and decode the barcodes:

private var dce = CameraEnhancer()
private var cvr = CaptureVisionRouter()

init(frame: CGRect) {
    super.init()
    setUpCamera(frame: frame)
    setUpDCV()
}

func setUpCamera(frame: CGRect) {
    cameraView = .init(frame: frame)
    cameraView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    let layer = cameraView.getDrawingLayer(DrawingLayerId.DBR.rawValue)
    layer?.visible = true
    dce.cameraView = cameraView
}

func setUpDCV() {
    // Set the camera enhancer as the input.
    try! cvr.setInput(dce)
    // Add CapturedResultReceiver to receive the result callback when a video frame is processed.
    cvr.addResultReceiver(self)
}

func getCameraView() -> CameraView { 
    return cameraView
}

Manage the view lifecycle to switch the camera session on and off:

func viewDidAppear() {
    dce.open()
    cvr.startCapturing(PresetTemplate.readBarcodes.rawValue) { isSuccess, error in
        if (!isSuccess) {
            if let error = error {
                self.showResult("Error", error.localizedDescription)
            }
        }
    }
}

func viewDidDisappear() {
    dce.close()
    cvr.stopCapturing()
}

Step 5. Create a SwiftUI Camera View Capable of Scanning QR Codes

Since CameraView is a UIView subclass, it needs to be wrapped in a UIViewRepresentable struct for use in SwiftUI.

import Foundation
import SwiftUI
import DynamsoftCameraEnhancer

struct DynamsoftCameraView: UIViewRepresentable {
    var cameraManager: CameraManager
    func makeUIView(context: Context) -> CameraView {
        let dceView = cameraManager.getCameraView()
        return dceView
    }

    func updateUIView(_ uiView: CameraView, context: Context) {

    }
}

Step 6. Construct the SwiftUI View Hierarchy

In the ContentView.swift file, create a ContentView struct containing a DynamsoftCameraView instance.

import SwiftUI

struct ContentView: View {
    @ObservedObject private var cameraManager = CameraManager(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))

    var body: some View {
        ZStack() {
            DynamsoftCameraView(cameraManager: cameraManager).onAppear() {
                cameraManager.viewDidAppear()
            }.onDisappear(){
                cameraManager.viewDidDisappear()
            }
            VStack {
                Text("iOS QR Code Scanner").font(.title).foregroundColor(.orange)
                Spacer()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}