Kako izraditi super brzu aplikaciju za praćenje osmijeha

ARKit možda djeluje zastrašujuće, ali nije tako loše ako već imate neko osnovno iskustvo u izradi iOS aplikacija.

Ja sam tip učenja, tako da se igram sa ARKit-om, gradeći osnovne aplikacije kako bih se upoznao s tim. U ovom postu pregledat ću ono što sam naučio kreirajući jednostavnu aplikaciju za praćenje lica.

Učinit ću to u 3 dijela:

  1. Početno postavljanje → Prvo, prvo nabavite fotoaparate i provjerite može li uređaj upotrebljavati ARKit.
  2. Praćenje osmijeha → Započnite praćenje osmjeha s ARKit-om. To je vjerojatno ono zbog čega ste ovdje.
  3. Korisničko sučelje → Dodajte sučelje naše aplikacije koja će reagirati na osmijehe.

Prema ovom pisanju, Xcode simulator ne podržava prednju kameru pa će vam za pokretanje aplikacije trebati pravi uređaj. Vaš će uređaj također trebati imati TrueDepth kameru (od 8. svibnja 2019. samo iPhone X i iPhone X Plus imaju TrueDepth kameru).

Konačno, za moje kolege članove Copy Paste Cluba, sav je kod dostupan na Githubu.

Početna postava

Započnite otvaranjem Xcode-a i kreiranjem novog projekta pod nazivom "SmileTracker" (ili bilo kojeg drugog imena preferirate).

Prije nego što uđemo u praćenje lica, trebat ćemo učiniti dvije stvari:

  1. Provjerite podržava li vaš uređaj ARKit
  2. Dobijte dozvolu za pristup kameri svog uređaja

U svom novom projektu otvorite ViewController.swift. Pri vrhu datoteke, ispod uvoza UIKit, dodajte redak: import ARKit. Ovo će nam omogućiti pristup svim dobrotama koje nam je pružio Apple kako bi praćenje lica bilo vrlo jednostavno.

Sada dodajte sljedeći kôd u viewDidLoad:

čuvar ARFaceTrackingConfiguration.isSupported else {
   fatalError ("Uređaj ne podržava praćenje lica")
}

ARFaceTrackingConfiguration.isSupported je boolean koji će biti istinit ako uređaj koji pokreće aplikaciju može podržati praćenje lica i false ako ne. U tom slučaju, ako uređaj ne može podržati praćenje lica, zatvorit ćemo aplikaciju sa fatalnom greškom.

Zatim uzmimo dozvolu za upotrebu kamere. U prikazDidLoad dodajte sljedeće u našu izjavu o straži:

AVCaptureDevice.requestAccess (za: AVMediaType.video) {dodijeljeno u
   ako (odobreno) {
      Dispatch.main.sync {
         // Mi ćemo implementirati ovu funkciju za minutu
         self.setupSmileTracker ()
      }
   } else {
      fatalError ("Korisnik nije odobrio dozvolu za kameru!")
   }
}

Ovdje tražimo od uređaja da traži dozvole za kamere. Ako korisnik odobri dopuštenja, pokrenut ćemo funkciju koja će nam postaviti praćenje osmijeha (ne brinite zbog pogreške, implementirat ćemo ovu funkciju u trenu).

Omotavamo funkciju u Dispatch.main.sync jer ćemo u tu funkciju dodavati UI elemente, što se može obaviti samo na glavnoj niti.

Također ćemo morati dodati opis upotrebe kamere na naš Info.plist. Otvorite Info.plist i dodajte novi redak (to možete učiniti tako da označite zadnji red i pritisnete Enter).

U retku koji ste upravo stvorili dodajte Opis privatnosti - Opis upotrebe kamere u stupac Ključ i provjerite je li stupac Vrsta postavljen u niz. Stupac Vrijednost možete ostaviti prazan ili dodati poruku da objasnite kako ćete kameru koristiti korisniku.

Vaš Info.plist bi sada trebao izgledati ovako:

Ako želite testirati svoju aplikaciju do sada, možete komentirati liniju u kojoj nazivamo setupSmileTracker (). Sjetite se da to komentirate kasnije.

Ako sada pokrenete aplikaciju, vidjet ćete skočni prozor sa zahtjevom da omogućite dozvole za kameru. Ako kažete ne, morat ćete ići na postavke aplikacije da biste omogućili ta dopuštenja kako bi se aplikacija pokrenula.

Ako se aplikacija sruši, potražite konzolu za jednu od naše dvije poruke o pogrešci da biste vidjeli što nije u redu.

Praćenje osmijeha

Otvorite ViewController.swift i dodajte sljedeću varijablu na vrh ViewController:

klasa ViewController: UIViewController {
   neka sceneView = ARSCNView ()
   override funkc viewDidLoad () {...}
}

ARSCNView dolazi s ARSessionom koju vaš iPhone koristi za koordiniranje AR iskustva. Pomoću sceneView ARSession analiziraćemo lice svog korisnika kroz prednju kameru.

Dodajte ovu funkciju u datoteku ispod viewDidLoad:

func setupSmileTracker () {
   neka konfiguracija = ARFaceTrackingConfiguration ()
   sceneView.session.run (konfiguracija)
   sceneView.delegate = sebe
   view.addSubview (sceneView)
}

Ovdje smo stvorili konfiguraciju za obradu praćenja lica i upotrijebili je za pokretanje ARSesije našeg sceneView.

Tada postavljamo delegata sceneView-a sebi i dodamo ga našem pogledu.

Xcode će vam reći da postoji problem jer ViewController ne udovoljava ARSCNViewDelegate. Idite tamo gdje je ViewController proglašen pri vrhu datoteke i promijenite liniju na sljedeće:

klasa ViewController: ViewController, ARSCNViewDelegate {
   ...
}

Sada dodajte ovuARSCNViewDelegate funkciju u vašu postavku ViewController klaseSmileTracker:

func renderer (_renderer: SCNSceneRenderer, didUpdate čvor: SCNNode, za sidro: ARAnchor) {
}

prikazivač će se pokrenuti svaki put kada se naša scena ažurira i pružiti nam ARAnchor koji odgovara licu korisnika.

Kako bi olakšao stvaranje doživljaja praćenja lica, Apple automatski kreira ARFaceAnchor i dodaje ga u našu sesiju kada za njegovo pokretanje koristimo ARFacetrackingConfiguration. Ovaj ARFaceAnchor se zatim prenosi u renderiranje kao ARAnchor.

Dodajte sljedeći kôd izvođaču:

func renderer (_renderer: SCNSceneRenderer, didUpdate čvor: SCNNode, za sidro: ARAnchor) {
   // 1
   straža neka faceAnchor = sidro kao? ARFaceAnchor else {return}
   // 2
   neka leftSmileValue = faceAnchor.blendshapes [.mouthSmileLeft] kao! CGFloat
   neka rightSmileValue = faceAnchor.blendShapes [.mouthSmileRight] kao! CGFloat
   // 3
   ispis (leftSmileValue, rightSmileValue)
}

U ovoj se funkciji događa puno, pa sam označio brojeve koraka (stil Ray Wenderlich).

U koraku 1 pretvorimo ARAnchor u ARFaceAnchor i dodijelimo ga varijabli faceAnchor.

ARFaceAnchor sadrži podatke o trenutnom položaju i orijentaciji, topologiji i izrazu lica koje pratimo.

ARFaceAnchor pohranjuje podatke o izrazima lica u promjenjivim blendShapesima. blendShapes je rječnik koji pohranjuje koeficijente koji odgovaraju različitim osobinama lica. Ako vas zanima, predlažem vam da pogledate cijeli popis crta lica u Appleovoj dokumentaciji. (Savjet: ako želite dodati praćenje mrštenja, ovdje ćete pronaći način da to učinite.)

U koraku 2, koristimo faceAnchor.blendShapes da dobijemo CGFloat koji odgovara tome koliko se smiješe lijeva i desna strana usta korisnika pomoću tipki ustaSmileLeft i mouthSmileRight.

Konačno, u 3. koraku se ispisuju dvije vrijednosti kako biste bili sigurni da ispravno radi .

U ovom trenutku trebali biste imati aplikaciju koja:

  • Dobiva dopuštenja za praćenje kamere i lica od korisnika
  • Koristi ARKit za praćenje izraza lica korisnika
  • Ispisuje koliko se korisnik smiješi s lijeve i desne strane usta do konzole

Dostigli smo veliki napredak, pa na trenutak trebate osigurati da sve dobro funkcionira.

Kada prvi put pokrenete aplikaciju, trebalo bi vas pitati hoćete li dati dopuštenja za kameru. Obavezno recite da.

Tada ćete biti poslani na prazan ekran, ali trebali biste početi vidjeti vrijednosti CGFloat ispisane na konzoli (može doći do kratkog kašnjenja prije nego što ih vidite).

Kad se nasmiješite telefonu, trebali biste primijetiti kako se vrijednosti ispisuju kako rastu. Što se više smiješite to veći brojevi idu.

Ako radi ispravno, čestitam ! Ako naiđete na pogrešku, dvaput provjerite je li vaš uređaj podržava praćenje lica i imaju li dopuštenja za kameru. Ako pratite ovo pisanje od početka, konzola će ispisati pogreške u oba slučaja.

Korisničko sučelje

Dakle, pratimo lica, sada izgradimo korisničko sučelje kako bi reagiralo na osmijehe.

Prvo dodajte novi UILabel pod nazivom smileLabel na vrh datoteke, odmah ispod sceneView.

klasa ViewController: UIViewController {
   neka sceneView = ARSCNView ()
   neka smileLabel = UILabel ()
   ...
}

Ovo će biti prikaz koji reagira na izraze lica korisnika.

Na dnu svoje postavke setupSmileTracker dodajte sljedeći kôd:

smileLabel.text = ""
smileLabel.font = UIFont.systemFont (veličine: 150)
view.addSubview (smileLabel)
// Postavljanje ograničenja
smileLabel.translatesAutoresizingMaskIntoConstraints = false
smileLabel.centerXAnchor.constraint (jednakoTo: view.centerXAnchor) .isActive = istina
smileLabel.centerYAnchor.constraint (jednakoTo: pogled.centerYAnchor) .isActive = istina

Ovdje dodamo osnovna svojstva korisničkog sučelja našem smileLabelu i postavljamo njegova ograničenja tako da bude na sredini ekrana. Kad pokrenete aplikaciju, u sredini biste trebali vidjeti džinovske emojije.

Kada vidite da se emojiji pojavljuju, dodajte sljedeću funkciju u ViewController:

func handleSmile (leftValue: CGFloat, rightValue: CGFloat) {
      neka smileValue = (leftValue + rightValue) /2.0
      Switch smileValue {
      slučaj _ gdje osmijeh> 0,5:
         smileLabel.text = ""
      slučaj _ u kojem je smileValue> 0,2:
         smileLabel.text = ""
      zadano:
         smileLabel.text = ""
      }
}

Ova će funkcija promijeniti emoji na našem smileLabelu ovisno o tome koliko se korisnik smiješi fotoaparatu. Vrijednost osmijeha izračunavamo uzimajući prosjek vrijednosti lijevog i desnog osmijeha koji nam je dao naš ARFaceAnchor (znam vrlo znanstveno).

Uključite tu vrijednost u izjavu o prebacivanju i što se više korisnik smiješi sretnijim našim emojijima.

Konačno, vratite se na našu funkciju prikazivanja i dodajte ovo na dno da biste u rukovanje uključili naše lijeve i desne vrijednosti osmijeha: Osmijeh:

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

Opet koristimo DispatchQueue jer unosimo izmjene u korisničko sučelje, što se mora obaviti na glavnoj niti.

Kada pokrenete aplikaciju, sada biste trebali vidjeti kako se emojiji mijenjaju ovisno o tome koliko vam se smiješi.

U gif ispod dodao sam lice tako da ga možete vidjeti kako radi s izlazom fotoaparata zajedno s emojijima.

Dodao sam izlaz kamere kako bih pokazao kako to funkcionira

Vaša aplikacija neće imati izlaz za kameru, ali možete je dodati dodavanjem našeg ARSCNView, sceneView u nadzor i davanjem dimenzija.

Završavati

Nadam se da vam je ovaj post bio koristan za početak stvaranja aplikacija pomoću ARKita.

Ako želite proširiti ovu aplikaciju, pogledajte popis koji sam spomenula sa svim ostalim crtama lica koje možete pratiti. Ostavio sam nagovještaj kako to proširiti da bih provjerio i mrštenje.

Vratite se i komentirajte sve cool projekte koje sami napravite. Još uvijek mi se noge umaču s tim stvarima pa ću biti uzbuđen kada mogu vidjeti složenije aplikacije.

Na Githubu sam objavio sav kod ove aplikacije za povratne informacije i pitanja. Hvala na čitanju i sretno!

Puno hvala na čitanju! Ako vam se svidjela ova priča, pratite me na Twitteru gdje objavljujem ažuriranja o pričama na kojima radim i na kojima radim.