Tech

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

投稿日:

はじめに

今回は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を作成したらFaceDetectorOptionsを作成し、faceDetectorで顔認識をおこないます。

これで、facesに顔認識情報のFaceがListで取得できます。複数の顔認識ができた場合は、認識できた数分取得できます。

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

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

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

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

ランドマークと輪郭の検出

上記までのサンプルコードだと、顔の位置を四角く検出するだけでしたが、FaceDetectorOptionsを指定することで、さらにランドマークの位置や、顔の輪郭や目の輪郭なども取得することができます。まずはFaceDetectorOptionsに「enableLandmarks」「enableContours」を指定します。

これでFace情報の中にランドマークと、各パーツの輪郭が入ってくるようになるので、上記サンプルのFacePainterを修正して、ランドマークと輪郭を表示できるようにします。

_drawLandmarkを有効化した場合

_drawContourを有効化した場合

おすすめ書籍

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

blog-page_footer_336




blog-page_footer_336




-Tech
-

執筆者:


comment

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

CAPTCHA


関連記事

[C#]Genericsの使い方をまとめてみた。その2

1 はじめに2 Genericsの構文3 型パラメーター4 制約条件5 規定値6 さいごに7 おすすめ書籍 はじめに こんにちはsuzukiです。ブログを書いているときAndroid10が発表され、ア ...

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

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

Firestoreのルール設定とdumpやrestoreが簡単に行えるfsrpl

1 はじめに2 Firestoreのルール設定2.1 全て許可2.2 本番環境でのルール設定例3 fsrpl3.1 fsrplとは3.2 インストール3.3 秘密鍵3.4 copy3.5 開発環境から ...

ReactNative入門

1 はじめに2 そもそもReact Nativeとは3 JSXとは3.1 JSXに値を埋め込む3.2 属性の値を設定する3.3 関数でJSXを作る4 コンポーネントとは4.1 再利用性4.2 新規コン ...

【Unity】TextMeshProで文字の表示と日本語入力

1 はじめに2 プロジェクトに追加3 TextMeshProのプロパティ4 日本語を使うには5 さいごに6 おすすめ書籍 はじめに こんにちはsuzukiです。unityをアップデートしたらTextが ...

フォロー

blog-page_side_responsive

2022年10月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

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