Sådan oprettes en Super Quick Smile-app

ARKit kan virke skræmmende, men det er ikke så slemt, hvis du allerede har en grundlæggende erfaring med at opbygge iOS-apps.

Jeg er en lær-ved-gør-type, så jeg har leget rundt med ARKit og bygget basale apps for at blive fortrolig med det. I dette indlæg gennemgår jeg, hvad jeg har lært at oprette en simpel app til ansigtssporing.

Jeg gør det i 3 dele:

  1. Første opsætning → Første ting først, få kameraet tilladelser, og sørg for, at enheden kan bruge ARKit.
  2. Smilsporing → Start sporing af smil med ARKit. Dette er sandsynligvis det, du er her for.
  3. Brugergrænseflade → Tilføj brugergrænsefladen til vores app, der reagerer på smil.

Fra denne skrivning understøtter Xcode-simulatoren ikke det frontvendte kamera, så du har brug for en rigtig enhed til at køre appen. Din enhed skal også have et TrueDepth-kamera (fra 8. maj 2019 er det kun iPhone X og iPhone X Plus, der har et TrueDepth-kamera).

Endelig, for mine kolleger i Copy Paste Club, er al koden tilgængelig på Github.

Første opsætning

Start med at åbne Xcode og oprette et nyt projekt med navnet “SmileTracker” (eller hvilket navn du foretrækker).

Inden vi kan komme i ansigtssporing, bliver vi nødt til at gøre to ting:

  1. Sørg for, at din enhed understøtter ARKit
  2. Få tilladelse til at få adgang til din enheds kamera

I dit nye projekt skal du åbne ViewController.swift. Tilføj toppen af ​​filen under import UIKit, og tilføj linjen: import ARKit. Dette giver os adgang til alle de godbidder, som Apple har leveret os for at gøre ansigtssporing super nem.

Tilføj nu følgende kode inde i viewDidLoad:

vagt ARFaceTrackingConfiguration.isSupportet andet {
   fatalError ("Enhed understøtter ikke ansigtssporing")
}

ARFaceTrackingConfiguration.isSupported er en boolsk, der vil være sandt, hvis enheden, der kører appen, kan understøtte ansigtssporing og falsk, hvis ikke. I dette tilfælde, hvis enheden ikke kan understøtte ansigtssporing, vil vi ødelægge appen med en dødelig fejl.

Lad os derefter få tilladelse til at bruge kameraet. Tilføj følgende i viewDidLoad under vores beskyttelseserklæring:

AVCaptureDevice.requestAccess (til: AVMediaType.video) {tildelt i
   hvis (indrømmes) {
      Dispatch.main.sync {
         // Vi vil implementere denne funktion om et minut
         self.setupSmileTracker ()
      }
   } andet {
      fatalError ("Bruger har ikke givet kameraet tilladelse!")
   }
}

Her beder vi enheden om at anmode om tilladelser til kameraet. Hvis brugeren giver tilladelser, kører vi den funktion, der indstiller vores smile tracking (behøver ikke bekymre dig om fejlen, vi implementerer denne funktion et øjeblik).

Vi indpakker funktionen i Dispatch.main.sync, fordi vi tilføjer UI-elementer i denne funktion, som kun kan udføres på hovedtråden.

Vi bliver også nødt til at tilføje en beskrivelse af kamerabrug til vores Info.plist. Åbn Info.plist og tilføj en ny række (du kan gøre dette ved at fremhæve den sidste række og trykke på Enter).

I den række, du lige har oprettet, skal du føje beskyttelse af personlige oplysninger - Kamerabrugsanvisning til nøglekolonnen og sørge for, at kolonnen Type er indstillet til streng. Du kan lade værdikolonnen være tom eller tilføje en besked for at forklare, hvordan du bruger kameraet til brugeren.

Din Info.plist skal nu se sådan ud:

Hvis du ønsker at teste din app indtil videre, kan du kommentere den linje, hvor vi kalder setupSmileTracker (). Husk bare at fjerne det senere.

Hvis du kører din app nu, skal du se en popup, der beder dig om at aktivere kameratilladelser. Hvis du siger nej, skal du gå til applikationsindstillinger for at aktivere disse tilladelser for at appen kan køre.

Hvis appen går ned, skal du kontrollere konsollen for en af ​​vores to fejlmeddelelser for at se, hvad der gik galt.

Smilsporing

Åbn ViewController.swift og tilføj følgende variabel øverst i ViewController:

klasse ViewController: UIViewController {
   let sceneView = ARSCNView ()
   tilsidesætte func viewDidLoad () {...}
}

ARSCNView er udstyret med en ARSession, som din iPhone bruger til at koordinere AR-oplevelser. Vi bruger sceneViews ARSession til at analysere vores brugers ansigt gennem det frontvendte kamera.

Føj denne funktion til din fil under viewDidLoad:

func setupSmileTracker () {
   lad konfiguration = ARFaceTrackingConfiguration ()
   sceneView.session.run (konfiguration)
   sceneView.delegate = selv
   view.addSubview (sceneView)
}

Her har vi oprettet en konfiguration til at håndtere ansigtssporing og brugt den til at køre vores sceneViews ARSession.

Derefter sætter vi sceneViews delegerede til sig selv og føjer det til vores synspunkt.

Xcode fortæller dig, at der er et problem, da ViewController ikke er i overensstemmelse med ARSCNViewDelegate. Gå til hvor ViewController er erklæret nær toppen af ​​filen, og skift linjen til følgende:

klasse ViewController: ViewController, ARSCNViewDelegate {
   ...
}

Tilføj nu denneARSCNViewDelegate-funktion i din ViewController-klasseopsætningSmileTracker:

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

renderer kører hver gang vores scene opdateres og giver os ARAnchor, der svarer til brugerens ansigt.

For at gøre det lettere at oprette ansigtssporingsoplevelser opretter Apple automatisk en ARFaceAnchor og tilføjer den til vores session, når vi bruger en ARFacetrackingConfiguration til at køre den. Denne ARFaceAnchor overføres derefter til rendereren som en ARAnchor.

Tilføj følgende kode til rendereren:

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

Der foregår meget inden for denne funktion, så jeg har nummereret trinnene (Ray Wenderlich-stil).

I trin 1 konverterer vi ARAnchor til en ARFaceAnchor og tildeler den til faceAnchor-variablen.

ARFaceAnchor indeholder oplysninger om den aktuelle position og orientering, topologi og ansigtsudtryk for det ansigt, vi sporer.

ARFaceAnchor gemmer information om ansigtsudtryk i dets variabel blandingsformer. blendShapes er en ordbog, der gemmer koefficienter, der svarer til forskellige ansigtstræk. Hvis du er interesseret, foreslår jeg, at du tjekker den fulde liste over ansigtsfunktioner i Apples dokumentation. (Tip: Hvis du vil tilføje rynke spor, finder du en måde at gøre det her på.)

I trin 2 bruger vi faceAnchor.blendShapes til at få en CGFloat, der svarer til hvor meget venstre og højre side af brugerens mund smiler ved at bruge tasterne mouthSmileLeft og mouthSmileRight.

Endelig udskriver trin 3 bare de to værdier, så du kan sikre dig, at det fungerer korrekt .

På dette tidspunkt skal du have en app, der:

  • Henter kamera- og ansigtssporingstilladelser fra brugeren
  • Bruger ARKit til at spore brugernes ansigtsudtryk
  • Udskriver hvor meget brugeren smiler på venstre og højre side af deres mund til konsollen

Vi har gjort meget fremskridt, så lad os tage et øjeblik for at sikre, at alt kører korrekt.

Når du kører appen for første gang, skal du blive spurgt, om du giver kameraet tilladelser. Sørg for at sige ja.

Du vil derefter blive sendt til en tom skærm, men du skal begynde at se CGFloat-værdier blive udskrevet på konsollen (der kan være en kort forsinkelse, før du ser dem).

Når du smiler til din telefon, skal du bemærke, at værdierne, der udskrives, går op. Jo mere du smiler, jo højere går tallene.

Hvis det fungerer korrekt, tillykke ! Hvis du har fundet en fejl, skal du kontrollere to gange for at sikre dig, at din enhed understøtter ansigtssporing, og at du har kameraet tilladelser slået til. Hvis du har fulgt denne opskrivning fra begyndelsen, udskriver konsollen fejl i begge disse tilfælde.

brugergrænseflade

Så vi sporer ansigter, lad os nu bygge UI'en til at reagere på smil.

Tilføj først en ny UILabel kaldet smileLabel øverst i filen, lige under sceneView.

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

Dette er det synspunkt, der reagerer på brugerens ansigtsudtryk.

Tilføj følgende kode i bunden af ​​din setupSmileTracker-funktion:

smileLabel.text = ""
smileLabel.font = UIFont.systemFont (ofSize: 150)
view.addSubview (smileLabel)
// Indstil begrænsninger
smileLabel.translatesAutoresizingMaskIntoConstraints = falsk
smileLabel.centerXAnchor.constraint (ligeTo: view.centerXAnchor) .isActive = true
smileLabel.centerYAnchor.constraint (ligeTo: view.centerYAnchor) .isActive = true

Her tilføjer vi de grundlæggende UI-egenskaber til vores smileLabel og indstiller dens begrænsninger, så det er midt på skærmen. Når du nu kører appen, skal du se en kæmpe emoji i midten.

Når du ser emoji'erne vises, skal du tilføje følgende funktion til din ViewController:

func håndtagSmile (venstreValue: CGFloat, højreValue: CGFloat) {
      lad smileValue = (leftValue + rightValue) /2.0
      skifte smileValue {
      sag _ hvor smileValue> 0.5:
         smileLabel.text = ""
      sag _ hvor smileValue> 0.2:
         smileLabel.text = ""
      Standard:
         smileLabel.text = ""
      }
}

Denne funktion ændrer emoji'erne i vores smileLabel afhængigt af hvor meget brugeren smiler ind i kameraet. Vi beregner smileValue ved at tage gennemsnittet af de venstre og højre smilværdier, der er givet os af vores ARFaceAnchor (meget videnskabelig, jeg ved).

Sæt denne værdi i switch-erklæringen, og jo mere brugeren smiler, jo gladere bliver vores emoji.

Endelig skal du vende tilbage til vores renderer-funktion og tilføje denne til bunden for at tilslutte vores venstre og højre smilværdier til handleSmile:

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

Igen bruger vi DispatchQueue, fordi vi foretager ændringer i brugergrænsefladen, som skal udføres på hovedtråden.

Når du kører appen, skal du nu se emoji-ændringen afhængigt af hvor meget du smiler til det.

I gifen nedenfor har jeg tilføjet mit ansigt, så du kan se det fungerer med kameraudgangen sammen med emoji'erne.

Jeg tilføjede kameraets output for at vise, hvordan det fungerer

Din app har ikke kameraets output, men du kan tilføje den ved at tilføje vores ARSCNView, sceneView til overvågningen og give den dimensioner.

Afslutter

Jeg håber, at dette indlæg var nyttigt for dig at komme i gang med at oprette apps med ARKit.

Hvis du vil udvide denne app yderligere, skal du tjekke listen, jeg nævnte ovenfor, med alle de andre ansigtsfunktioner, du kan spore. Jeg efterlod et tip om, hvordan man udvider dette til også at kontrollere for rynker.

Kom tilbage og kommenter med alle fede projekter, du opretter på egen hånd, jeg bliver stadig våde fødder med disse ting, så det ville være glade for at se mere komplekse apps.

Jeg har lagt al koden til denne app op på Github for feedback og spørgsmål. Tak for læsning og held og lykke!

Tak så meget for at have læst! Hvis du kunne lide denne historie, skal du følge mig på Twitter, hvor jeg lægger opdateringer om historier, jeg arbejder på, og hvad jeg laver.