Com puc crear una aplicació de seguiment de somriures molt ràpida?

ARKit pot semblar intimidatori, però no importa si ja teniu experiència bàsica en la creació d'aplicacions per a iOS.

Aprenc fent i he jugat amb ARKit i he creat aplicacions bàsiques per acostumar-me. En aquesta publicació, revisaré el que vaig aprendre de la creació d’una senzilla aplicació de seguiment facial.

Ho faig en 3 parts:

  1. Configuració inicial → En primer lloc, heu d'obtenir permisos de càmera i assegurar-vos que el dispositiu pugui utilitzar ARKit.
  2. Seguiment de somriures → Inicieu el seguiment de somriures amb ARKit. Probablement per això estàs aquí.
  3. Interfície d'usuari → Afegiu la interfície d'usuari de la nostra aplicació que respon a un somriure.

A partir d’aquest moment, el simulador Xcode no admet la càmera frontal, de manera que necessitareu un dispositiu real per executar l’aplicació. El dispositiu també ha de tenir una càmera TrueDepth (a partir del 8 de maig de 2019, només l’iPhone X i l’iPhone X Plus tindran una càmera TrueDepth).

Finalment, per als meus companys del Copy Pegar Club, tot el codi està disponible a Github.

configuració inicial

Primer, obriu Xcode i creeu un nou projecte anomenat "SmileTracker" (o el nom que preferiu).

Abans de començar el seguiment facial, hem de fer dues coses:

  1. Assegureu-vos que el dispositiu admeti ARKit
  2. Obteniu permís per accedir a la càmera del dispositiu

Al vostre nou projecte, obriu ViewController.swift. A la part superior del fitxer a "Importa UIKit", afegiu la línia següent: "Importa ARKit". D’aquesta manera podem accedir a tots els extres que Apple proporciona per facilitar el seguiment facial.

Ara enganxeu el codi següent a viewDidLoad:

guard ARFaceTrackingConfiguration.isSupported else {fatalError ("El dispositiu no admet el seguiment facial")}

ARFaceTrackingConfiguration.isSupported és un valor booleà que és cert si el dispositiu en què s’executa l’aplicació admet el seguiment facial; en cas contrari, és fals. En aquest cas, bloquejarem l'aplicació amb un error greu si el dispositiu no admet el reconeixement facial.

A continuació, obtindrem permís per utilitzar la càmera. A viewDidLoad, a la nostra declaració de Guardia, afegiu:

AVCaptureDevice.requestAccess (per a: AVMediaType.video) {concedit a if (concedit) {Dispatch.main.sync {// Implementarem aquesta funció en un minut self.setupSmileTracker ()}} else {fatalError ("L'usuari no té autorització de càmera) concedit! ")}}

Aquí demanem al dispositiu que sol·liciti permisos de càmera. Quan l’usuari concedeix permisos, realitzem la funció que configura el seguiment del somriure. No us preocupeu per l’error, implementarem aquesta funció en breu.

Incloem la funció a Dispatch.main.sync perquè afegim elements d’interfície d’usuari a aquesta funció, que només és possible per al fil principal.

També hem d’afegir una descripció d’ús de la càmera al nostre Info.plist. Obriu Info.plist i afegiu-hi una línia nova (podeu fer-ho ressaltant la darrera línia i prement Enter).

A la fila que acabeu de crear, afegiu Privadesa - Descripció d’ús de la càmera a la columna de claus i assegureu-vos que la columna Tipus estigui configurada a cadena. Podeu deixar la columna Valor en blanc o afegir un missatge per explicar a l'usuari com utilitzar la càmera.

El vostre Info.plist ara hauria de tenir el següent aspecte:

Si ja voleu provar la vostra aplicació, podeu comentar la línia anomenada setupSmileTracker (). Assegureu-vos de comentar-ho més endavant.

Ara, quan executeu l'aplicació, hauríeu de veure una finestra emergent que us demanarà que activeu els permisos de la càmera. Si dieu que no, haureu d’anar a la configuració de l’aplicació per habilitar aquests permisos perquè l’aplicació s’executi.

Si l'aplicació falla, comproveu a la consola si hi ha cap dels nostres dos missatges d'error per veure què ha fallat.

Seguiment de somriures

Obriu ViewController.swift i afegiu la següent variable a la part superior del ViewController:

Classe ViewController: UIViewController {let sceneView = ARSCNView ()
Substitueix func viewDidLoad () {...}
}

ARSCNView està equipat amb una ARSession que el vostre iPhone utilitza per coordinar experiències de RA. Utilitzarem ARSession des de sceneView per analitzar la cara del nostre usuari a través de la càmera frontal.

Afegiu aquesta funció al fitxer a viewDidLoad:

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

Aquí vam crear una configuració de seguiment de cares i la vam utilitzar per executar ARSession de sceneView.

A continuació, configurem el delegat sceneView per a si mateix i l’afegim a la nostra vista.

Xcode us indica que hi ha un problema perquè ViewController no és compatible amb ARSCNViewDelegate. Aneu a on es declara ViewController a la part superior del fitxer i canvieu la línia pel següent:

Classe ViewController: ViewController, ARSCNViewDelegate {...}

Ara afegiu aquesta funció ARSCNViewDelegate a la vostra classe ViewController setupSmileTracker:

func renderer (_renderer: SCNSceneRenderer, didUpdate node: SCNNode, per a ancoratge: ARAnchor) {
}

El renderitzador s’executa cada vegada que s’actualitza la nostra escena i ens proporciona l’ARAnchor que coincideix amb la cara de l’usuari.

Per facilitar la creació d’experiències de seguiment de cares, Apple crearà automàticament un ARFaceAnchor i l’afegirà a la nostra sessió quan utilitzem una configuració ARFacetrackingConfiguration per executar-lo. Aquest ARFaceAnchor es passa al renderitzador com a ARAnchor.

Afegiu el codi següent al renderitzador:

func renderer (_renderer: SCNSceneRenderer, didUpdate node: SCNNode, per a ancoratge: ARAnchor) {// 1 deixar el rellotge faceAnchor = ancoratge com? ARFaceAnchor else {return}
// 2 Deixem leftSmileValue = faceAnchor.blendshapes [.mouthSmileLeft] com! CGFloat deixa rightSmileValue = faceAnchor.blendShapes [.mouthSmileRight] com! CGFloat
// 3 imprimir (leftSmileValue, rightSmileValue)
}

Hi ha moltes coses en aquest paper, així que he numerat els passos (estil Ray Wenderlich).

Al pas 1 convertim l'ARAnchor a un ARFaceAnchor i l'assignem a la variable faceAnchor.

ARFaceAnchor conté informació sobre la posició i orientació actuals, la topologia i l’expressió facial de la cara que seguim.

ARFaceAnchor emmagatzema informació d’expressió facial a la seva variable BlendShapes. blendShapes és un diccionari que emmagatzema coeficients que corresponen a diverses característiques facials. Si us interessa, us recomanem que llegiu la llista completa de trets facials de la documentació d’Apple. (Nota: si voleu afegir el seguiment de les celles, aquí teniu una manera de fer-ho.)

Al pas 2, utilitzarem faceAnchor.blendShapes per utilitzar els botons mouthSmileLeft i mouthSmileRight per obtenir un CGFloat que indiqui quant somriuen els costats esquerre i dret de la boca de l’usuari.

Finalment, el pas 3 només imprimeix els dos valors perquè pugueu assegurar-vos que funcionen correctament.

En aquest moment, haureu de tenir una aplicació que:

  • Obté permisos de seguiment de càmeres i cares per part de l'usuari
  • Realitza un seguiment de les expressions facials de l'usuari amb ARKit
  • Quant somriu l’usuari a la consola de la boca esquerra i dreta

Hem fet grans avenços. Prenem un segon per assegurar-nos que tot funciona correctament.

La primera vegada que executeu l’aplicació, se us demanarà si voleu donar permisos a la càmera. Assegureu-vos de dir que sí.

A continuació, se us dirigirà a una pantalla en blanc, però hauríeu de comprovar que els valors CGFloat s’estan imprimint a la consola (és possible que hi hagi un petit retard abans de veure’ls).

Si somriu al telèfon, hauríeu de veure que els valors impresos augmenten. Com més somriu, més grans són els números.

Si funciona correctament, felicitats ! Si es produeix un error, comproveu que el dispositiu admet el seguiment facial i que teniu els permisos de càmera activats. Si heu seguit aquesta carta des del principi, la consola retornarà errors en ambdós casos.

interfície d'usuari

Així doncs, seguim cares. Ara creem la IU per respondre a un somriure.

Primer, afegiu una nova UILabel anomenada smileLabel al principi del fitxer directament a sceneView.

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

Aquesta és la visió que respon a les expressions facials de l'usuari.

Afegiu el codi següent al final de la funció setupSmileTracker:

smileLabel.text = "" smileLabel.font = UIFont.systemFont (ofSize: 150)
view.addSubview (smileLabel)
// Establir condicions smileLabel.translatesAutoresizingMaskIntoConstraints = fals smileLabel.centerXAnchor.constraint (equalTo: view.centerXAnchor) .isActive = true smileLabel.centerYAnchor.constraint (equalTo: view.centerYAnchor) .isActive = true

Aquí afegim les propietats bàsiques de la interfície d’usuari al nostre smileLabel i establim les restriccions perquè quedi al centre de la pantalla. Ara, quan executeu l'aplicació, hauríeu de veure un emoji enorme al centre.

Quan vegeu els emoji, afegiu la funció següent al ViewController:

func handleSmile (leftValue: CGFloat, rightValue: CGFloat) {let smileValue = (leftValue + rightValue) /2.0
canviar smileValue {cas _ on smileValue> 0,5: smileLabel.text = "" cas _ on smileValue> 0,2: smileLabel.text = "" Estàndard: smileLabel.text = ""}}

Aquesta funció canvia els emoji de la nostra smileLabel en funció de la intensitat que somriï l’usuari a la càmera. Calculem el smileValue a partir de la mitjana dels valors de somriure esquerra i dreta donats pel nostre ARFaceAnchor (molt científic, com sé).

Incloeu aquest valor a la sentència switch. Com més somrigui l’usuari, més feliç serà el nostre emoji.

Finalment, torneu a la nostra funció de renderització i afegiu-la a continuació per afegir els nostres valors de somriure esquerra i dreta a handleSmile:

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

Una vegada més, estem utilitzant DispatchQueue perquè estem fent canvis en la interfície d’usuari que cal fer al fil principal.

Ara, quan executeu l'aplicació, els emoji haurien de canviar segons el somriure que hi tingueu.

Al GIF següent, he afegit la meva cara perquè pugueu veure com funciona amb la sortida de la càmera i els emoji.

He afegit la sortida de la càmera per mostrar com funciona

La vostra aplicació no té la sortida de la càmera, però podeu afegir-la afegint ARSCNView, sceneView a la visió general i especificant les dimensions.

Embolicar

Espero que aquesta publicació us hagi ajudat a començar a construir aplicacions amb ARKit.

Si voleu ampliar aquesta aplicació encara més, consulteu la llista anterior de totes les altres funcions facials que podeu fer el seguiment. Vaig deixar una nota sobre com ampliar-la per comprovar si hi ha celles arrufades.

Torneu i comenteu els vostres projectes interessants. Encara estic ocupat amb aquestes coses, així que estaria encantat de veure aplicacions més complexes.

He publicat tot el codi d'aquesta aplicació a Github per obtenir suggeriments i preguntes. Gràcies per llegir i molta sort!

Gràcies per llegir! Si us ha agradat aquesta història, seguiu-me a Twitter per obtenir informació sobre les històries en què estic treballant i el que estic fent.