カメラからQRコードの検出、ハイライト表示、SwiftUI対応ビューの作成

2022年12月25日 • 2 min read

この記事では、カメラからのビデオストリームを表示し、
QRコード（または他のタイプのコード）を検出し、
その周りに矩形を表示することによってコードを強調するビューを作成することについて話します。
また、SwiftUI互換のビューを作成し、SwiftUIのビュー内で使用できるようにします。

変数を用意する

まず、スキャンした結果とカメラプレビューレイヤーを保存するために、以下の変数を追加します。

viewSize はカメラプレビューレイヤーのサイズを表します。

ビデオプレビューレイヤーを初期化し、サイズを設定します。

qrCodeFrameView は、検出されたQRコードに重ねて表示される (オーバーレイ) ビューです。
現在はフレームを持ちません。
しかし、QRコードを検出したときに、そのビューの位置とサイズを設定することになります。

ビデオキャプチャーのためのデフォルトのカメラデバイスを取得します。
そして、ビデオキャプチャセッションにカメラ入力を追加します。

** do と catch ブロックの使い分けを忘れないように。

バーコードや物体検出にもVisionフレームワークを利用することができます。

しかし、この機能はすでにAVFoundationフレームワークの中で提供されているので、代わりにAVCaptureMetadataOutputを使用することにします。

AVCaptureMetadataOutput を使用すると、検出されたメタデータオブジェクトは setMetadataObjectsDelegate 関数で定義されたデリゲートに報告されます。

metadataObjectTypes は、QRコードを探すためのコードを定義していますが、
バーコードや他の多くの種類を検出するように設定することも可能です。

ビデオのプレビューをレイヤーとしてビューに追加します（ユーザーは何がスキャンされているのか見ることができます）。

その後、ビデオセッションの実行を開始します。

また、qrCodeFrameView をビューに追加します。
また、他のビューの上にオーバーレイビューを表示 (bringSubviewToFront) しています
この時点では、サイズを持たないので、qrCodeFrameViewが画面には表示されません。

QRコードのメタデータが検出されたら、
qrCodeFrameView のフレームを検出されたバーコードオブジェクトのバウンドに設定し、
ビューの境界の色を緑に設定することができます。

コードが検出されない場合は、
フレームを0に設定してビューを非表示にすることができます。

** ここで、デバイスの向きの変更も検知し、それを利用してプレビューの向きを変更する必要の場合があります。

SwiftUIでUIKitの UIView を互換性のあるものにするために、
UIViewRepresentableを使用することにします。

初期化するために func makeUIView(context: Context) -> UIView 関数が必要です。

デリゲート関数は Coordinator クラス内に配置されることになる。 class Coordinator: NSObject, AVCaptureMetadataOutputObjectsDelegate

そして、func makeCoordinator() -> QRCodeScanner.Coordinator 関数内で Coordinatorを初期化します。

また、変数の更新に基xづいてUIKitビューを更新する関数 func updateUIView(_ view: UIView, context: Context) を用意する必要があります。
ここでは、スキャンしたQRコードの値を更新しているので、その関数内では何もする必要がありません。

完成したSwiftUI互換のビューはこちらです。

このコードをSwiftUIで使用するために

また、Info.plistファイル内にカメラの使用の説明テキストを追加することを忘れないでください。

お読みいただきありがとうございました。