Tech

[Flutter]カメラのフレームデータを使ってリアルタイム画像認識

投稿日:

はじめに

今回はFlutterでカメラのフレームデータを取得して、リアルタイムで画像認識を行いたいと思います。

準備

まずはパッケージのcameraをpubspec.yamlに追加しましょう。

pubspec.yamlに追加されていれば成功です。

次は、iOSでカメラを使用するために、Info.plistに以下の内容を追加します。
cameraパッケージでは動画も扱える関係で、カメラとマイク二つの許可が必要になります。

また、cameraパッケージの動作環境は、iOSでは10以上、Androidは21以上になっています。それ以下のバージョンでは動作しません。

そうしたら次は、画像認識のためにgoogle_ml_kitパッケージを追加します。

こちらも、pubspec.yamlに追加されていれば成功です。

最後にカメラから取得した画像をgoogle_ml_kitに渡す際に
画像の回転処理などをスムーズに行うためにimageパッケージを追加します。

こちらも、pubspec.yamlに追加されていれば成功です。

実装

カメラプレビューの作成

最初に、カメラのプレビューをアプリで表示したいと思います。
まずは、デバイスで使用できるカメラの一覧を取得します。

CameraDescriptionの中身は以下のようになっており、バックカメラやフロントカメラを取得することができます。

次にカメラを制御するためのCameraControllerを作成します。

CameraControllerの第一引数に最初に取得したCameraDescriptionを、第二引数に解像度の指定を入れます。ResolutionPreset.maxを指定することで使用できる最大の解像度を設定してくれます。CameraControllerを生成したらinitializeを行い、CameraControllerの準備は完了です。

最後にCameraPreviewにCameraControllerをセットすれば、カメラのプレビュー表示は完了です。

またカメラプレビューやカメラを使っての写真撮影は過去記事をご確認ください。

プレビューからフレームデータ取得

次はプレビューからフレームデータを取得したいと思います。プレビューの初期化が完了している状態なら、CameraControllerのstartImageStreamを使用することでプレビュー画像の更新を受け取ることができます。

フレームデータから画像認識

それでは早速、_processImageで画像認識をおこないと思います。サンプルでは文字認識をおこないます、以下はサンプルソースです。

まずは取得したCameraImageを画像認識で使用するInputImageに変換します。CameraImageからInputImageへの変換はgoogle_mlkit_commonsで載せられているソースをほぼそのまま使用しています。具体的には以下の箇所になります。

InputImageを作成したらTextRecognizerを使用して画像認識をおこないます。

画像認識を行なったらRecognizedTextに結果が返ってくるのでそれを取得します。上記で取得しているTextBlockには複数行含む、文字認識では最大構成の文字データ、TextLineは1行の文字データ、TextElementは認識した文字の最小構成のデータになっています、TextElementは1文字のみのデータというわけではなく、スペースなどを考慮してmlkitが判断した最小構成になります。
例えば「MackBook Pro」というロゴを認識した際はTextBlockとTextLineでは「MackBook Pro」ですが、TextElementでは「MackBook」「Pro」という構成になります。

上記部分に関しては次の項目で画像認識した箇所に枠線を表示するための準備なので、文字認識だけ認識だけ行いたいという方はスルーして大丈夫です。

画像認識した箇所に枠線の表示

CustomPaintを使用してカメラプレビューの上に文字認識を表示したいと思います。CustomPaintについては過去記事をご確認ください。まずはカメラプレビューをCustomPaintのchildにして、foregroundで枠線を書いていきたいと思います。

_imageSizeと_elementsひとつ前の項目のサンプルソースで保持していますので、ご確認ください。
描画処理自体は単純で、保持したTextElement情報をもとに、認識した文字と位置を表示しているだけです。
気をつける箇所は、画像認識で使用しているカメラの解像度とCanvasのサイズが異なるので、_imageSizeで保持しているカメラの解像度に基づいてscale処理を行うようにしています。

さいごに

mlkitで出来ることはいっぱいありそうなので、色々遊んでみたいです。次は顔認識でもやってみようかと思います。

おすすめ書籍

現場で使える Flutter開発入門 (Compass Booksシリーズ) はじめてのFlutter入門: iOS/Androidアプリ開発の⼀歩を踏み出そう!

page_footer_responsive




-Tech
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

【Unity】AssetStoreで取得したCharactorにThirdPersonCharacterの動きを設定する。

1 はじめに2 AssetStoreからインポート2.1 RPG Hero PBR HP Polyart2.2 StandardAssets3 ThirdParsonCharactorの動きについて3 ...

iOS13ダークモード対応

1 はじめに2 一時しのぎ3 実装3.1 UI Element Colors3.2 Color Set3.3 コードで描きたい3.4 カスタムのカラーを定義する3.5 画像をモードで動的に変更したい4 ...

Go言語

GoでSMF(MIDI)ファイルを読み込んでみた

1 はじめに2 MIDIとは?2.1 SMFファイルについて2.1.1 Tickと分解能2.1.2 トラックチャンク3 gomidiを使ってSMFファイルを読み込む3.1 gomidiの導入3.2 実 ...

Flutterで生体認証が楽々導入できると噂のlocal_auth

1 はじめに2 準備3 実装3.1 端末が生体認証可能かの確認3.2 生体認証の登録状態の確認3.3 生体認証の実行4 おすすめ書籍 はじめに 最近はFlutterの勉強ばかりしていますが、今回は簡単 ...

icon

ドキュメント作成の技術「テクニカルライティング」とは

1 はじめに2 テクニカルライティングとは3 少しでも分かりやすく、簡潔にする3.1 一文一義3.2 長くしすぎない、繋げすぎない3.3 長さの目安は?4 伝わりやすく書く4.1 まず主題を書く4.2 ...

フォロー

blog-page_side_responsive

2022年9月
 123
45678910
11121314151617
18192021222324
252627282930  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。