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拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア