Building iOS QR Code Scanner with SwiftUI on M1 Mac

Dev Environment on M1 Mac mini

  • Xcode 13.2.1
  • Cocoapods
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew install cocoapods
  • Dynamsoft Camera Enhancer and Dynamsoft Barcode Reader for iOS
pod init
platform :ios, '9.0'

target 'qrscanner' do
use_frameworks!

pod 'DynamsoftCameraEnhancer','2.1.1'
pod 'DynamsoftBarcodeReader','8.9.1'
end
pod install
let barcodeReader = DynamsoftBarcodeReader.init(license: "license-key")

Project Configuration in Xcode 13.2.1

  1. After running pod install, we can start the Xcode project as follows:
open qrscanner.xcworkspace 
Privacy - Camera Usage Description

Implementing iOS SwiftUI Camera

4 Steps to Open Camera in SwiftUI

  1. Create a new iOS SwiftUI project named qrscanner.
  2. Create a CameraManager.swift file, which contains a camera view and a callback function for continuously receiving camera frames:
import Foundation
import UIKit
import DynamsoftCameraEnhancer

class CameraManager: NSObject, ObservableObject, DCEFrameListener {

private var dce: DynamsoftCameraEnhancer! = nil
private var dceView: DCECameraView! = nil

init(frame: CGRect) {
super.init()
configureDCE(frame: frame)
}

func configureDCE(frame: CGRect) {
dceView = DCECameraView.init(frame: frame)
dce = DynamsoftCameraEnhancer.init(view: dceView)
dce.open()
dce.setFrameRate(30)
dce.addListener(self)
}

func getCameraView() -> DCECameraView {
return dceView
}

func frameOutPutCallback(_ frame: DCEFrame, timeStamp: TimeInterval) {

}
}
import Foundation
import SwiftUI
import DynamsoftCameraEnhancer

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

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

}
}
import SwiftUI
import DynamsoftCameraEnhancer

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() {
CameraView(cameraManager: cameraManager)
}
}
}

Turning iOS Camera into iOS QR Code Scanner

2 Steps to Integrate QR Code Scanning into the SwiftUI Camera View

  1. Decode the QR code from the camera frame and assign the decoding results to a @Published variable in the frameOutPutCallback function:
@Published var results = "No QR Code found"
func frameOutPutCallback(_ frame: DCEFrame, timeStamp: TimeInterval) {
var image:UIImage!
image = frame.toUIImage()
let results = try! barcodeReader.decode(image, withTemplate: "")
var output = "No QR Code found"
if (results.count > 0) {
output = ""
for item in results {
let format = item.barcodeFormatString ?? ""
let text = item.barcodeText ?? ""
output += "Format: " + format + ", Text: " + text + " \n\n "
}
}

DispatchQueue.main.async {
self.results = output
}
}
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() {
CameraView(cameraManager: cameraManager)
Text(cameraManager.results).font(.subheadline).foregroundColor(.blue).fontWeight(.heavy)
}
}
}

Source Code

--

--

--

Manager of Dynamsoft Open Source Projects | Tech Lover

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

An introduction to app install attribution on iOS

Building Dynamic Lists in SwiftUI for iOS 15

A splash of water

Interviewing for an iOS Design System Engineer role at Spotify

Subscriptions with Stripe using a Custom UI

Wishful thinking

Sweet Swift 5.3

LessImage —  An advanced online image compression app

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Xiao Ling

Xiao Ling

Manager of Dynamsoft Open Source Projects | Tech Lover

More from Medium

Using Realm Flexible Sync in Your App

Firebase Authentication for Swift

Add Buttons to Navigation Bar in SwiftUI

Journey to the Center of SwiftUI with Firebase