1. HOME
  2. ブログ
  3. IT技術
  4. 【iOS】Vision Frameworkを使ってリアルタイム顔検出アプリを作ってみた
【iOS】Vision Frameworkを使ってリアルタイム顔検出アプリを作ってみた

【iOS】Vision Frameworkを使ってリアルタイム顔検出アプリを作ってみた

Vision Framework を使ってみた!

小林先生

(株)ライトコードの小林です!

皆さんは、iOS の標準フレームワーク「Vision Framework」をご存知でしょうか?

「顔検出」や「テキスト検出」など、高度な画像解析処理ができるフレームワークです。

今回は、その Vision Framework を使って、「リアルタイム顔検出アプリ」を作っていきます!

開発環境

開発環境は、下記のとおりです。

MacOS10.15.4
Swift5.3
Xcode12.0
CocoaPods1.8.4
RxSwift, RxCocoa5.1.1

こちらの記事もオススメ!



Vision Framework とは?

「Vision Framework」とは、Apple が標準で提供している、高度な画像解析処理を行うフレームワークです。

【公式ドキュメント】
https://developer.apple.com/documentation/vision

iOS 11の SDK から追加されたものですが、WWDC 2020 では、「体や手のポーズを検出してジェスチャーで命令できる機能」や、「空中に文字を描くことができる機能」が発表されたりと、まだまだ進化を続けています。

参考:【Detect Body and Hand Pose with Vision】
https://developer.apple.com/videos/play/wwdc2020/10653/

具体的には何が出来るの?

このフレームワークには、以下のような画像解析に関する様々な機能が備わっています。

  1. 顔検出
  2. テキスト検出
  3. バーコード認識

今回は、「顔検出機能」に焦点を当てて、実装してみたいと思います。

でも、ただ顔を検出するだけでは物足りないので、検出された顔に好きな画像を重ねるようにしてみましょう!

リアルタイムで顔検出を行うアプリを作る

すべて ViewController 内に処理を書いてもいいのですが、FatViewController になるのを防ぐため、RxSwift を使って MVVM で実装していきます。

ViewModel の実装

まずは、今回の肝となる「顔検出処理」と「検出した部分に画像を重ねる処理」を実装していきましょう。

Input と Output を定義

ViewModel のファイルを作成し、Input と Output を定義します。

Inputカメラの出力内容
Output顔検出結果画像

顔検出処理を実装

顔検出を行うには、下記の Vision Framework クラスを使います。

VNDetectFaceRectanglesRequest画像内から顔を検出する処理をリクエスト
VNImageRequestHandler画像に対してリクエストされた処理を実行
VNFaceObservation画像解析処理リクエストによって検出された顔に関する情報

今回は、受け取った画像に対して顔検出処理を要求し、処理が完了したら Observable に解析結果を流すように実装しています。

検出した顔に画像を重ね、出来た画像を返す処理を実装

今回は、猫のイラストを顔に重ねたいので、イラスト画像を用意して、同プロジェクト内に置いておきます。

簡単に説明すると、カメラから出力された画像データをもとに、画像を再生成します。

その過程の中で、顔検出で取得した顔の位置情報をもとに、画像を重ねる処理をするという形になっています。

※1 Extension

※1では、下記のような Extension を作り、CGRect を取得しています。

バインディング

最後に、これまで実装した処理を使い、初期化処理の中で Input と Output のバインディングをします。

これで、ViewModel の実装は完了です!

ViewController の実装

続いて、ViewController の実装を行っていきます。

初期化処理を実装

まずは、ViewModel を ViewController に注入するための初期化処理を実装します。

カメラの設定

フロントカメラから取得した画像データを Stream で流すようにしています。

また、カメラのプライバシーアクセスの許可を取得するために、 Info.plistPrivacy - Camera Usage Description を設定します。

(この設定を忘れるとクラッシュします!)

バインディング

次に、ViewModel とのバインディングを行います。

ViewModel を注入し、ViewController を設定

最後に、 SceneDelegate 内で ViewController に ViewModel を注入し、rootViewController に先程作った ViewController を設定します。

お疲れさまでした、これで実装完了です!

動作確認

さっそく動作確認してみましょう!

ビルドして、実機を起動してみた結果…

顔検出結果gif

無事、リアルタイムで顔を検出し、検出された顔に猫のイラストを重ねることができました!

さいごに

今回は、Vision Framework を使って「リアルタイム顔検出アプリ」を作ってみました。

同じ要領で、顔部分にモザイクをかけたりなんかもできそうですね!

AWS 等のクラウドサービスでも様々な顔認識サービスを提供していますが、Vision はネットワークを経由せず、ローカル内で完結するため、場所や時間を問わず使えるのが大きなメリットです。

気になった方は、ぜひ試してみてください!

記事を書いた人

\ 3度のメシより技術が好き /
(株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
システム開発依頼・お見積もりはこちらまでお願いします。
また、WEB・スマホ系エンジニアを積極採用中です!
※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

こちらの記事もオススメ!



ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界はお前の手の中に・・・ /

モバイルエンジニア

\ サービスの守り神! /

インフラエンジニア