スーパークイックスマイルトラッキングアプリを構築する方法

ARKit は難しそうに見えるかもしれませんが、iOS アプリの基本的な作成経験があれば、それほど悪くはありません。

私はやってみるタイプなので、ARKit をいじって、慣れるために基本的なアプリを作成しています。この投稿では、単純な顔追跡アプリを作成して学んだことを復習します。

これを 3 つの部分に分けて説明します:

<オール>

初期設定 → まず最初に、カメラのアクセス許可を取得し、デバイスが ARKit を使用できることを確認してください。

スマイル トラッキング → ARKit で笑顔の追跡を開始します。これがおそらくあなたがここにいる目的です。

ユーザー インターフェース → 笑顔に反応するアプリの UI を追加します。

この記事の執筆時点では、Xcode シミュレーターは前面カメラをサポートしていませんので、アプリを実行するには実際のデバイスが必要です。デバイスには TrueDepth カメラも必要です (iPhone X 以降で問題ありません)。

最後に、Copy Paste Club の仲間のメンバーのために、すべてのコードは Github で入手できます。

初期設定

まず、Xcode を開き、「SmileTracker」という名前 (または任意の名前) の新しいプロジェクトを作成します。

フェイス トラッキングを開始する前に、次の 2 つのことを行う必要があります。

<オール>

お使いのデバイスが ARKit をサポートしていることを確認してください

デバイスのカメラにアクセスする許可を得る

新しいプロジェクトで、ViewController.swift を開きます . import UIKit の下のファイルの上部付近 、次の行を追加します:import ARKit .これにより、Apple が提供しているフェイス トラッキングを非常に簡単にするすべての機能にアクセスできるようになります。

viewDidLoad の中に次のコードを追加します。 :

guard ARFaceTrackingConfiguration.isSupported else {
    fatalError("Device does not support face tracking")
}

ARFaceTrackingConfiguration.isSupported アプリを実行しているデバイスがフェイス トラッキングをサポートできる場合は true、そうでない場合は false になるブール値です。この場合、デバイスがフェイス トラッキングをサポートできない場合、致命的なエラーでアプリをクラッシュさせます。

次に、カメラの使用許可を取得しましょう。 viewDidLoad に以下を追加します guard 未満 ステートメント:

AVCaptureDevice.requestAccess(for: AVMediaType.video) { granted in
   if (granted) {
      Dispatch.main.sync {
          // We're going to implement this function in a minute
          self.setupSmileTracker()      
      }
   } else {      
      fatalError("User did not grant camera permission!")   
   }
}

ここでは、カメラのアクセス許可を要求するようデバイスに求めています。ユーザーが権限を付与すると、笑顔の追跡をセットアップする関数が実行されます (エラーについて心配する必要はありません。この関数はすぐに実装します)。

関数を Dispatch.main.sync でラップします この関数に UI 要素を追加するため、これはメイン スレッドでのみ実行できます。

Info.plist に Camera Usage Description を追加する必要もあります。 . Info.plistを開く 新しい行を追加します (これを行うには、最後の行を強調表示して enter を押します) ).

作成した行に Privacy — Camera Usage Description を追加します Key に 列と Type を確認してください 列は文字列に設定されます。 Value を残すことができます 列を空白にするか、カメラの使用方法をユーザーに説明するメッセージを追加してください。

あなたの Info.plist 次のようになります:

これまでのアプリをテストしたい場合は、setupSmileTracker() と呼ばれる行をコメントアウトしてください。 .後でコメントを外すことを忘れないでください。

ここでアプリを実行すると、カメラのアクセス許可を有効にするよう求めるポップアップが表示されます。 「いいえ」と答えた場合は、アプリケーションの設定に移動して、アプリを実行するためにこれらの権限を有効にする必要があります。

アプリがクラッシュした場合は、コンソールで 2 つのエラー メッセージのいずれかをチェックして、何が問題なのかを確認してください。

スマイル トラッキング

ViewController.swiftを開く 次の変数を ViewController の先頭に追加します :

class ViewController: UIViewController {   
   let sceneView = ARSCNView()
   
   override func viewDidLoad() {...}
}

ARSCNView ARSession が装備されています iPhone が AR 体験を調整するために使用するものです。 sceneView を使用します の ARSession 正面カメラを通してユーザーの顔を分析します。

この関数をファイルの viewDidLoad の下に追加します :

func setupSmileTracker() {   
   let configuration = ARFaceTrackingConfiguration()   
   sceneView.session.run(configuration)   
   sceneView.delegate = self   
   view.addSubview(sceneView)
}

ここでは、顔追跡を処理する構成を作成し、それを使用して sceneView を実行しました。 の ARSession .

次に、sceneView を設定します のデリゲートを自分自身に渡し、それをビューに追加します。

Xcode は、ViewController 以降に問題があることを通知します。 ARSCNViewDelegate に準拠していません .どこ ViewController に行く ファイルの先頭付近で宣言されているので、その行を次のように変更します:

class ViewController: ViewController, ARSCNViewDelegate {   
   ...
}

このARSCNViewDelegateを追加します ViewController の関数 クラス setupSmileTracker :

func renderer(_renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) {
   ...
}

renderer シーンが更新されるたびに実行され、ARAnchor が提供されます ユーザーの顔に対応します。

フェイス トラッキング エクスペリエンスを簡単に作成できるようにするために、Apple は自動的に を作成します。 ARFaceAnchor を使用するときにそれをセッションに追加します ARFacetrackingConfiguration それを実行します。 この ARFaceAnchor は renderer に渡されます ARAnchor として .

次のコードをレンダラーに追加します:

func renderer(_renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) {   
   // 1      
   guard let faceAnchor = anchor as? ARFaceAnchor else { return }
   
   // 2   
   let leftSmileValue = faceAnchor.blendshapes[.mouthSmileLeft] as! CGFloat
   let rightSmileValue = faceAnchor.blendShapes[.mouthSmileRight] as! CGFloat
   
   // 3
   print(leftSmileValue, rightSmileValue)
}

この関数の内部では多くのことが行われているため、ステップに番号を付けました (Ray Wenderlich スタイル)。

ステップ 1 ARAnchor を変換します ARFaceAnchor に faceAnchor に割り当てます

ARFaceAnchor 現在の位置と向き、トポロジー、顔の表情に関する情報が含まれています

ARFaceAnchor 顔の表情に関する情報を変数 blendShapes に格納します . blendShapes は、さまざまな顔の特徴に対応する係数を格納する辞書です。興味がある場合は、Apple のドキュメントで顔の特徴の完全なリストを確認することをお勧めします。 (ヒント :しかめっ面のトラッキングを追加したい場合は、ここでその方法を見つけることができます。)

ステップ 2 で 、 faceAnchor.blendShapes を使用します キー mouthSmileLeft を使用して、ユーザーの口の左側と右側がどれだけ笑っているかに対応する CGFloat を取得します。 そして mouthSmileRight .

最後に、ステップ 3 2 つの値を出力するだけで、正しく機能していることを確認できます。

この時点で、アプリは次のようになっているはずです:

• ユーザーからカメラと顔追跡の許可を取得します
• ARKit を使用してユーザーの表情を追跡します
• ユーザーが口の左右でどれだけ笑っているかをコンソールに出力します

私たちは多くの進歩を遂げたので、少し時間を取って、すべてが適切に実行されていることを確認しましょう.

アプリを初めて実行すると、カメラのアクセス許可を付与するかどうかを尋ねられるはずです。はいと言ってください。

その後、空白の画面が表示されますが、CGFloat 値がコンソールに出力されているのを確認できるはずです (表示されるまで少し時間がかかる場合があります)。

携帯電話に微笑むと、表示される値が上昇していることに気付くはずです。笑顔が多ければ多いほど、数値が高くなります。

正常に動作している場合は、おめでとうございます ?!エラーが発生した場合は、デバイスがフェイス トラッキングをサポートしていることと、カメラのアクセス許可がオンになっていることを再確認してください。最初からこの記事に従っている場合、コンソールはどちらの場合もエラーを出力します。

ユーザー インターフェース

顔を追跡しているので、笑顔に反応する UI を作成しましょう。

最初に新しい UILabel を追加します smileLabel と呼ばれる ファイルの先頭、sceneView のすぐ下 .

class ViewController: UIViewController {   
   let sceneView = ARSCNView()      
   let smileLabel = UILabel()
   
   ...
}

これは、ユーザーの表情に反応するビューになります。

setupSmileTracker の末尾に次のコードを追加します。 関数:

smileLabel.text = "?"smileLabel.font = UIFont.systemFont(ofSize: 150) 

view.addSubview(smileLabel)

// Set constraints
smileLabel.translatesAutoresizingMaskIntoConstraints = false
smileLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
smileLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

ここでは、基本的な UI プロパティを smileLabel に追加しています。 画面の中央になるように制約を設定します。アプリを実行すると、巨大な ? が表示されるはずです。真ん中に絵文字。

絵文字が表示されたら、次の関数を ViewController に追加します :

func handleSmile(leftValue: CGFloat, rightValue: CGFloat) {
   let smileValue = (leftValue + rightValue)/2.0
   switch smileValue {      
   	  case _ where smileValue > 0.5:         
      	 smileLabel.text = "?"      
      case _ where smileValue > 0.2:         
         smileLabel.text = "?"      
      default:         
         smileLabel.text = "?"      
   }
} 

この関数は smileLabel の絵文字を変更します ユーザーがどれだけカメラに向かって微笑んでいるかによって異なります。 smileValue を計算します ARFaceAnchor によって与えられた左右のスマイル値の平均を取ることによって (非常に科学的です、私は知っています)。

その値を switch ステートメントに差し込むと、ユーザーが笑顔になればなるほど、絵文字はより幸せになります。

最後に、renderer に戻ります。 これを一番下に追加して、左右のスマイル値を handleSmile に差し込みます :

DispatchQueue.main.async {   
   self.handleSmile(leftValue: leftSmileValue, rightValue: rightSmileValue)
}

ここでも DispatchQueue を使用します UI に変更を加えているためです。変更はメイン スレッドで行う必要があります。

アプリを実行すると、笑顔の度合いに応じて絵文字が変化することがわかります。

下の gif では、顔を追加して、絵文字と一緒にカメラ出力で動作していることを確認できるようにしています。

アプリにはカメラ出力がありませんが、 ARSCNView を追加することで追加できます 、 sceneView 、スーパービューに追加し、ディメンションを指定します。

まとめ

この投稿が、ARKit を使ったアプリの作成を開始するのに役立つことを願っています。

このアプリをさらに拡張したい場合は、上記のリストをチェックして、追跡できる他のすべての顔の特徴を確認してください。これを拡張してしかめっ面もチェックする方法のヒントを残しました.

戻ってきて、自分で作成したクールなプロジェクトについてコメントしてください。私はまだこのようなものに慣れていないので、もっと複雑なアプリを見るのが楽しみです.

フィードバックと質問のために、このアプリのすべてのコードを Github に投稿しました。読んでくれてありがとう。幸運を祈ります!

読んでくれてありがとう！このストーリーが気に入った場合は、Twitter でフォローしてください。私が取り組んでいるストーリーや現在行っていることに関する最新情報を投稿しています。