VisionKitで機械可読コードやテキストをキャプチャする

VisionKitで機械可読コードやテキストをキャプチャする

VisionKitのData Scannerとは：このフレームワークは、AVCaptureとVisionを組み合わせて、シンプルなSwift APIで機械可読コードやテキストをライブキャプチャできるようにするものです。ここでは、バーコードの種類や言語選択を指定して、Appがキャプチャできるコンテンツの種類を制御する方法を紹介します。また、Appのガイダンスを有効化したり、項目のハイライト表示や関心領域をカスタマイズしたり、Appで項目が検出されたときにインタラクションを処理したりする方法も紹介します。静止画または一時停止したビデオフレームでのLive Textとのインタラクションの詳細については、WWDC22の「Live TextのインタラクションをAppに追加する」をご覧ください。

リソース
- Scanning data with the camera
- - HDビデオ
  - SDビデオ
関連ビデオ

Tech Talks
- エンタープライズデベロッパ向けの最新情報
WWDC22
- Live TextのインタラクションをAppに追加する
- Visionの最新情報
ダウンロード

(軽快な音楽)
こんにちは　Ron Santos です input engineer をしています本日お話するのは機械可読コードや文字をビデオフィードからキャプチャすることつまりデータスキャンについてですではデータスキャンとは何なのでしょうか? それはカメラなどのセンサーを使いデータを読み取る方法です
通常データは文字の形で出てきます例えば人の関心を引く情報で例を挙げると電話番号や日付や値段ですね
あるいは機械可読コードはどこでも見られるようになった QR コードなどです皆さんデータスキャナはすでにご存じでしょうかカメラ App や iOS15 で導入された Live Text 機能などで使われていますご自身のスキャン方法で日常生活で独自のスキャン機能を持つ App を使われたことと思いますですが自分でデータスキャナを作成しなければならなかったら? どのようにやりますか? iOS SDKなら要求に応じてソリューションがいくつかあります AVFoundationフレームワークを使ってカメラグラフを設定し入力出力を繋げバーコードなどの AVMetadataObjects を生成します文字をキャプチャしたい場合は AVFoundation と Vision を組み合わせますこの図ではメタデータの出力の代わりにビデオデータ出力を作成します出力にはサンプルバッファが生成されそれが Vision で文字やバーコードの認識リクエストに使われます Vision のデータスキャンに関する詳細は下に出ているセッションをご覧ください AVFoundation と Vision を使ったデータスキャンのお話でした iOS16 ではそれを全て統合した新しいオプションがあります DataScannerViewController です AVFoundation と Vision の機能を合わせ持ちデータスキャンの目的に最適だと言えます DataScannerViewControllerが提供する機能のにはライブカメラのプレビューや有用なガイダンスのラベル表示アイテムのハイライトに加え対象を選択するタップフォーカスやピンチアウトで拡大する機能ですね
デベロッパ向けの機能としてはまず DataScannerViewController は UIViewController のサブクラスでなので自由に表示できます認識されたアイテムの座標は常にビュー座標なので画像スペースからVision座標に変換したりビュー座標に変換する必要はありません対象エリアを指定することでビューの有効範囲も制限できこれもまたビュー座標が使えます文字認識に関してはコンテンツタイプを特定して見つけたい文字のタイプを制限できます機械可読コードの場合はどのシンボル体系が対象か正確に特定できます App を使う中でデータスキャンは App の機能のほんの一部ですよねですが実装にはかなりのコードを要します DataScannerViewController なら一般的なタスクを代わりにやってくれるので皆さんは他の部分に時間をかけられるようなります次は App への追加方法をお話していきますプライバシーの記述から始めましょう App がビデオのキャプチャを試みると iOS がユーザーにカメラへのアクセスの明示的許可を求めます許可の必要性を正当化する記述を提供しましょうそのためには “privacy camera usage description” を App の Info.plist ファイルに加えてくださいユーザーに分かりやすいようできるだけ明確にしましょう次はコードですデータスキャナを表示したい場合は VisionKit のインポートから始めましょう
データスキャンは全てのデバイスでサポートされているわけではないので isSupported が false の場合は機能を表示するボタンやメニューを全て隠し使用できないものはユーザーに見えないようにしましょう
2018年以降の iPhone や iPad で Apple Neural Engine 搭載ならデータスキャンをサポートしています可用性のチェックも必要です先ほどのプライバシーの記述でありましたねスキャンが使えるのはユーザーがカメラへのアクセスを許可しこの画面にあるようなスクリーンタイムのコンテンツおよびプライバシー制限でのカメラアクセス制限が無い場合だけですではインスタンスの作成です対象としたいデータタイプを指定することから始めます例えばこの指定なら QRコードと文字の両方のスキャンが可能です
また文字認識に言語リストを指定するとテキスト認識エンジンで言語修正など様々な処理でヒントとなりますどの言語か予測可能であればリストを作りましょう特に 2つの言語の外見が似ている場合は有用です何の言語も記載しなければユーザー設定の言語がデフォルトで使われます特定のテキストコンテンツのタイプもリクエスト可能ですこの例ではスキャナの対象は URL になっています認識したいデータのタイプが記述されたところで DataScanner のインスタンスを作成します前の例ではバーコードのシンボル体系や認識言語そしてテキストコンテンツのタイプを指定しましたこれらの他の選択肢について少し説明しますバーコードのシンボル体系は Vision のバーコード検出器と同じ全てのシンボル体系をサポートしています言語の観点から言うと DataScannerViewController は LiveText 機能の一部なので全く同じ言語をサポートします iOS 16 では嬉しいことに日本語と韓国語が追加されましたもちろんまた将来変わるでしょう supportedTextRecognitionLanguages のクラスプロパティから最新のリストを取得してください特定の意味を持つテキストをスキャンする時は DataScannerViewController は次の７種類を見つけ出しますこれで Data Scannerをユーザーに表示できます他のビューコントローラと同様にフルスクリーンやシートでの使用別のビューの階層に使うなど色々できますご自由に決めてください表示が完了したら startScanning() を呼び出しデータ探索を開始しますでは1つ前の段階に戻り Data Scanner の初期化パラメータについて少しお話しますここで使ったのは recognizedDataTypes ですが他にもカスタムマイズに使えるものがあります 1つずつ見ていきましょう recognizedDataTypes は認識するデータの種類を指定します文字や機械可読コードそしてそれぞれのタイプの指定です qualityLevel は balanced fast accurate のいずれかです fast は標識のテキストのような大きくて読みやすいものを想定していて速度を優先して解像度を犠牲にします accurate 正確さはマイクロ QR コードや極小のシリアル番号でも最高の精度です balanced バランスから始めると大半のケースで上手くいきます recognizesMultipleItems は一度に複数のバーコードをスキャンする場合などフレーム内の1つまたは複数のアイテムを探すためのオプションです false の場合はユーザーが他の場所をタップするまで中央のアイテムが認識されるのがデフォルトですハイライトを描画する時はハイフレームレートトラッキングを有効にしますカメラが動いたりシーンが変わってもハイライト表示が可能な限りアイテムに追従するようになりますピンチアウトでズームも有効無効を設定できますズームのレベルを指定する方法もありますガイダンスを有効にすると画面上部のラベルでうまくスキャンできる様ユーザーを導いてくれますシステムのハイライト表示を無効にして自分でハイライトを描画することもできますデータスキャナの表示法が分かった所で今度は認識したアイテムの取り込み方と自分でカスタム化したハイライト表示について見ましょう
まずデータスキャナにデリゲートを設定しますデリゲートができたので dataScanner didTapOnメソッドを実装しますこれはユーザーがアイテムをタップした時に呼び出されます新らしく定義された RecognizedItem のインスタンスを受け取ります RecognizedItem は文字やバーコードを associated value として保持する enum です認識されたものが文字列なら transcript でバーコードならペイロードに文字列があれば payloadStringValue で取得できます RecognizedItem についてもう2つ知っておきましょうまず認識されたアイテムにはそれぞれ独自の識別子があり存続中はそのアイテムの追跡に使えます存続期間はアイテムが最初に見えた時から見えなくなった時までですまた RecognizedItem にはそれぞれの bounds 境界プロパティがあります境界は長方形ではなく各コーナーの 4つの座標で構成されます次に話すのは3つのデリゲートメソッドでシーンで認識されたアイテムの状況が変化した時に呼び出されます最初は didAdd でアイテムが新たに認識された時に呼び出されます独自のハイライト表示を描画したい場合はここで新らしいアイテムが加わる度に 1つ作成することになりますアイテムのIDを使ってハイライト表示の識別が可能です DataScanner のビュー階層に新たなビューとして追加する時は overlayContainerView に追加すればカメラプレビューの上かつ他の UI の下に表示されます
次のデリゲートメソッドは didUpdate でアイテムまたはカメラが動くと呼び出されます認識された文字列が変わった時も呼び出されます認識された文字列が変わるのはスキャナが文字を長く見ていると正確さが増していきそれが反映されるからです更新されたアイテムのIDを使って保存しておいた Dictionary から該当のハイライト表示を取得して更新された bounds にビューを動かします最後に didRemove デリゲートメソッドでアイテムがシーンから見えなくなると呼び出されます見えなくなったアイテムのハイライト表示のビューをビュー階層から取り除きますまとめると対象アイテムに独自のハイライト表示をする場合シーンにハイライトを登場させ動かしたり削除したりするのにこの3つのデリゲートメソッドが必要ですこの3つのデリゲートメソッドには現在認識されている全てのアイテムが配列として与えられます認識された順で渡されますので自然な読み順となりこれは文字認識で便利です DataScannerViewController の使用方法の概要でしたまとめに入る前にいくつか他の機能を簡単に紹介します例えば写真のキャプチャです capturePhoto 方法を呼び出し高品質の UIImage を非同期で取得できます
独自のハイライト表示をしないならこれら3つのデリゲートメソッドは不要かもしれません代わりに使えるのが recognizedItems プロパティでシーンの変化に合わせて更新され続ける AsyncStream です
お話は以上です iOS SDK は AVFoundation と Vision フレームワークを使ってコンピュータビジョンのワークフローを作成するのに様々なオプションを与えてくれる事をお忘れなくライブビデオのプレビューで文字や機械可読コードをスキャンする App を作っているかもしれませんね集荷梱包 App か倉庫業務や POS の App でしょうかその場合は VisionKit の DataScannerViewController を試してみてください本日お話したように App のスタイルや需要に合った顧客体験を提供するための初期化パラメータやデリゲートメソッドが数多くあります
最後にお知らせしたいのは下に出ているセッションに参加して VisionKit の静止画用 Live Text 機能をご覧ください
それではまた次回 (軽快な音楽)

4:40 - Creating a data scanner instance and present it

import VisionKit

// Specify the types of data to recognize
let recognizedDataTypes:Set<DataScannerViewController.RecognizedDataType> = [
    .barcode(symbologies: [.qr]),
  	// uncomment to filter on specific languages (e.g., Japanese)
    // .text(languages: ["ja"])
    // uncomment to filter on specific content types (e.g., URLs)
		// .text(textContentType: .URL)
]

// Create the data scanner, present it, and start scanning!
let dataScanner = DataScannerViewController(recognizedDataTypes: recognizedDataTypes)
present(dataScanner, animated: true) {
    try? dataScanner.startScanning()
}

8:11 - Set a delegate

// Specify the types of data to recognize
let recognizedDataTypes:Set<DataScannerViewController.RecognizedDataType> = [
    .barcode(symbologies: [.qr]),
    .text(textContentType: .URL)
]

// Create the data scanner, present it, and start scanning!
let dataScanner = DataScannerViewController(recognizedDataTypes: recognizedDataTypes)
dataScanner.delegate = self.present(dataScanner, animated: true) {
    try? dataScanner.startScanning()
}

8:19 - Handling tap interactions

func dataScanner(_ dataScanner: DataScannerViewController, didTapOn item: RecognizedItem) {
    switch item {
    case .text(let text):
        print("text: \(text.transcript)")
    case .barcode(let barcode):
        print("barcode: \(barcode.payloadStringValue ?? "unknown")")
    default:
        print("unexpected item")
    }
}

9:11 - Adding custom highlights via the didAdd delegate method

// Dictionary to store our custom highlights keyed by their associated item ID.
var itemHighlightViews: [RecognizedItem.ID: HighlightView] = [:]

// For each new item, create a new highlight view and add it to the view hierarchy.
func dataScanner(_ dataScanner: DataScannerViewController, didAdd addItems: [RecognizedItem], allItems: [RecognizedItem]) {
    for item in addedItems {
        let newView = newHighlightView(forItem: item)
        itemHighlightViews[item.id] = newView
        dataScanner.overlayContainerView.addSubview(newView)
    }
}

9:37 - Animating custom highlights during the didUpdate delegate method

// Animate highlight views to their new bounds
func dataScanner(_ dataScanner: DataScannerViewController, didUpdate updatedItems: [RecognizedItem], allItems: [RecognizedItem]) {
    for item in updatedItems {
        if let view = itemHighlightViews[item.id] {
            animate(view: view, toNewBounds: item.bounds)
        }
    }
}

10:03 - Removing custom highlights during the didRemove delegate callback

// Remove highlights when their associated items are removed.
func dataScanner(_ dataScanner: DataScannerViewController, didRemove removedItems: [RecognizedItem], allItems: [RecognizedItem]) {
    for item in removedItems {
        if let view = itemHighlightViews[item.id] {
            itemHighlightViews.removeValue(forKey: item.id)
            view.removeFromSuperview()
        }
    }
}

10:54 - Take a still photo and save it to the camera roll

// Take a still photo and save to the camera roll
if let image = try? await dataScanner.capturePhoto() {
    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
}

11:10 - Using the recognizedItems async stream to keep track of items

// Send a notification when the recognized items change.
var currentItems: [RecognizedItem] = []

func updateViaAsyncStream() async {
    guard let scanner = dataScannerViewController else { return }
    
    let stream = scanner.recognizedItems
    for await newItems: [RecognizedItem] in stream {
        let diff = newItems.difference(from: currentItems) { a, b in
            return a.id == b.id
        }
        
        if !diff.isEmpty {
            currentItems = newItems
            sendDidChangeNotification()
        }
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

Tech Talks

WWDC22