如何用SwiftUI快速创建iOS摄像头QR扫码应用

以前的iOS开发，UI用的是Storyboard。这几年苹果推出了SwiftUI，使用一套代码就可以同时支持iPhone和iPad，节约开发成本。由于很多的iOS SDK都是基于UIKit开发的，要集成到SwiftUI里需要包装下。这篇文章分享下如何使用Dynamsoft Camera Enhancer， Dynamsoft Barcode Reader在SwiftUI中快速实现摄像头QR扫码应用。

在M1 Mac上搭建开发环境 Xcode 13.2.1Cocoapods 安装homebrew

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

如果是Intel CPU的mac，直接按照官方方法安装sudo gem install cocoapods。在M1上推荐通过brew安装。因为这样可以避免后续安装依赖库的很多问题:

 brew install cocoapods

Dynamsoft Camera Enhancer和Dynamsoft Barcode Reader 在工程共目录创建Podfile:

 pod init

打开Podfile添加依赖库:

platform :ios, '9.0'

 target 'qrscanner' do
   use_frameworks!
        
   pod 'DynamsoftCameraEnhancer','2.1.1'
   pod 'DynamsoftBarcodeReader','8.9.1'
 end

安装依赖：

 pod install

注意：Barcode SDK需要申请一个有效的序列号才能使用:

let barcodeReader = DynamsoftBarcodeReader.init(license: "license-key")               

Xcode 13.2.1工程配置

打开工程文件：

open qrscanner.xcworkspace

到工程的Signing & Capabilities选项里设置团队。

添加摄像头权限。在最新版本的Xcode里没有Info.plist文件。在设置里找到TARGETS > Info添加键值:

 Privacy - Camera Usage Description

在SwiftUI中创建摄像头视频流窗口

创建一个叫qrscanner的iOS SwiftUI 工程。

创建一个CameraManager.swift文件。这是一个ObservableObject类，里面包含了通过Dynamsoft Camera Enhancer创建的camera view和用于接收视频帧的回调函数：

 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) {

     }
 }

我们用到的DCECameraView是通过UIKit View实现的，不能直接在SwiftUI中使用。需要通过UIViewRepresentable做个封装：

 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) {
            
     }
 }

最后到ContentView.swift中添加上面定义的CameraManager和CameraView就可以了：

 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)
         }
     }
 }

现在你可以连上iPhone或者iPad来测试下视频流预览效果。

添加二维码识别功能 在刚才实现的回调中添加QR code解码代码，并把结果赋值给@Published变量。这个变量修改之后UI会立刻刷新：

 @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
     }
 }

在UI布局中加入一个Text来显示扫码结果：

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)
         }
     }
 }

最后运行下这个简单的iOS扫码应用。

源码

https://github.com/yushulx/ios-swiftui-camera-qr-code-scanner