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

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

変数を用意する

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

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

プレビューレイヤーと検出されたQRコードのオーバーレイビューを初期化

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

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

ビデオ撮影用カメラデバイスを取得

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

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

メタデータ出力の追加(QRコード検出用)

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

VNDetectTextRectanglesRequest: 機械学習を用いて日本語の単語の領域を検出します。 - Qiita
「Vision」について: 「Vision」は、画像や動画などの入力を処理できる多くの機械学習アルゴリズムを含むフレームワークです。テキストを処理する既存の関数「VNRecognizeTextRequest」がありますが、これ…

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

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

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

ビデオセッションを開始

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

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

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

メタデータ出力デリゲートを設定

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

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

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

SwiftUIでUIKitのビューを対応させる

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ファイル内にカメラの使用の説明テキストを追加することを忘れないでください。


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

🐘 マストドン @[email protected]

☺️ Twitter @MszPro

☺️ サイト https://MszPro.com