Super-sürətli bir təbəssüm izləmə tətbiqi necə yarada bilərəm?

ARKit qorxuducu görünə bilər, ancaq iOS tətbiqetmələrini hazırlamaqda əsas təcrübənizə sahib olmağınızın əhəmiyyəti yoxdur.

Bunu etməklə öyrənirəm və ARKit ilə oynadım və alışmaq üçün əsas tətbiqetmələr yaratdım. Bu yazıda sadə bir üz izləmə tətbiqi yaratmaqdan öyrəndiklərimi nəzərdən keçirəcəyəm.

Bunu 3 hissədə edirəm:

  1. İlkin quraşdırma → Əvvəlcə kamera icazələri almalı və cihazın ARKit-dən istifadə edə biləcəyinə əmin olmalısınız.
  2. Gülüş izləmə → ARKit ilə gülümsəmələri izləməyə başlayın. Yəqin buradasınız.
  3. İstifadəçi interfeysi → Tətbiqimiz üçün təbəssümə cavab verən istifadəçi interfeysi əlavə edin.

Bu yazıdan etibarən Xcode simulyatoru ön kameranı dəstəkləmir, ona görə də proqramı çalışdırmaq üçün həqiqi bir cihaza ehtiyacınız olacaq. Cihazınızda TrueDepth kamerası da olmalıdır (8 May 2019-cu il tarixindən etibarən yalnız iPhone X və iPhone X Plus TrueDepth kameraya sahib olacaq).

Nəhayət, Copy Paste Club-dakı həmkarlarım üçün bütün kodlar Github-da mövcuddur.

ilkin quraşdırma

Əvvəlcə Xcode-u açın və "SmileTracker" adlı yeni bir layihə yaradın (və ya istədiyiniz adı).

Üz izləməyə başlamazdan əvvəl iki şey etməliyik:

  1. Cihazınızın ARKit'i dəstəklədiyinə əmin olun
  2. Cihazınızın kamerasına daxil olmaq üçün icazə alın

Yeni layihənizdə ViewController.swift açın. Faylın yuxarı hissəsində "Import UIKit" altında aşağıdakı sətri əlavə edin: "Import ARKit". Bu yolla Apple-ın üz izləməsini asanlaşdırmaq üçün təqdim etdiyi bütün əlavələrə daxil ola bilərik.

İndi aşağıdakı kodu viewDidLoad-a yapışdırın:

guard ARFaceTrackingConfiguration.isSupported else {fatalError ("Cihaz üz izləməni dəstəkləmir")}

ARFaceTrackingConfiguration.isSupported, tətbiqin işlədiyi cihazın üz izləməsini dəstəklədiyi təqdirdə doğru olan bir Boole dəyəridir; əks halda yalan. Bu halda cihaz üz tanımağı dəstəkləmirsə, tətbiqetməni ölümcül bir səhvlə çökdürəcəyik.

Sonra kameradan istifadə etmək üçün icazə alaq. ViewDidLoad olaraq, Guard bəyanatımıza əlavə edin:

AVCaptureDevice.requestAccess (üçün: AVMediaType.video) {verilmişdir (verilən) {Dispatch.main.sync {// Bu funksiyanı bir dəqiqədə həyata keçirəcəyik self.setupSmileTracker ()}} başqa {fatalError ("İstifadəçinin kamera icazəsi yoxdur verildi! ")}}

Burada cihazdan kamera icazə tələb etməsini xahiş edirik. İstifadəçi icazə verdikdə, təbəssüm izlememizi quran funksiyanı yerinə yetiririk. Hata barədə narahat olmayın, qısa müddətdə bu xüsusiyyəti tətbiq edəcəyik.

Funksiyanı Dispatch.main.sync-ə daxil edirik, çünki bu funksiyaya istifadəçi interfeysi elementləri əlavə edirik, bu da yalnız əsas mövzu üçün mümkündür.

Info.plist-ə bir kamera istifadə təsviri də əlavə etməliyik. Info.plist açın və yeni bir sətir əlavə edin (bunu son sətri vurğulayaraq Enter düyməsini basaraq edə bilərsiniz).

Yeni yaratdığınız sətirdə açar sütuna Məxfilik - Kamera İstifadəsi Təsvirini əlavə edin və Növü sütununun sətrə qoyulduğundan əmin olun. Dəyər sütununu boş buraxa və ya istifadəçiyə kameradan necə istifadə edəcəyini izah etmək üçün bir mesaj əlavə edə bilərsiniz.

Info.plistiniz indi belə görünməlidir:

Tətbiqinizi onsuz da sınamaq istəyirsinizsə, setupSmileTracker () adlı sətri şərh edə bilərsiniz. Sonra şərh etdiyinizə əmin olun.

İndi tətbiqinizi işlədən zaman kamera icazələrini aktiv etməyinizi xahiş edən bir popup görməlisiniz. Xeyr deyirsənsə, tətbiqin işləməsi üçün bu icazələri təmin etmək üçün tətbiq parametrlərinə getməlisiniz.

Tətbiq çökərsə, səhv olanı görmək üçün konsolu iki səhv mesajımızdan birini yoxlayın.

Gülüş izləmə

ViewController.swift açın və aşağıdakı dəyişəni ViewController-ın üstünə əlavə edin:

ViewController sinfi: UIViewController {let sceneView = ARSCNView ()
Func viewDidLoad () ləğv et {...}
}

ARSCNView, iPhone'unuzun AR təcrübələrini əlaqələndirmək üçün istifadə etdiyi bir ARSession ilə təchiz edilmişdir. Ön tərəfdəki kamera vasitəsilə istifadəçimizin üzünü analiz etmək üçün sceneView-dən ARSession istifadə edəcəyik.

Bu funksiyanı viewDidLoad altında faylınıza əlavə edin:

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

Burada bir üz izləmə konfiqurasiyası yaratdıq və sceneView ARSession-ı çalışdırmaq üçün istifadə etdik.

Sonra sceneView nümayəndəsini özünə təyin etdik və onu görünüşümüzə əlavə etdik.

Xcode, ViewController'ın ARSCNViewDelegate ilə uyğun olmadığı üçün bir problem olduğunu söyləyir. Faylın yuxarı hissəsində ViewController elan olunduğu yerə gedin və sətri aşağıdakılara dəyişdirin:

ViewController sinfi: ViewController, ARSCNViewDelegate {...}

İndi bu ARSCNViewDelegate funksiyasını ViewController sinif setupSmileTracker-a əlavə edin:

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

Renderer səhnəmiz hər dəfə yeniləndikdə işləyir və istifadəçinin üzünə uyğun ARAnchor təqdim edir.

Üz izləmə təcrübələrini yaratmağı asanlaşdırmaq üçün, Apple avtomatik olaraq bir ARFaceAnchor yaradaraq onu işə salmaq üçün bir ARFacetrackingConfiguration istifadə etdikdə sessiyamıza əlavə edəcəkdir. Bu ARFaceAnchor daha sonra ARAnchor kimi göstəriciyə ötürülür.

Aşağıdakı kodu göstəriciyə əlavə edin:

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

Bu rolda çox şey gedir, ona görə pillələri saydım (Ray Wenderlich stili).

Addım 1-də ARAnchor'u ARFaceAnchor-a çeviririk və faceAnchor dəyişəninə təyin edirik.

ARFaceAnchor, izlədiyimiz üzün mövcud vəziyyəti və oriyentasiyası, topologiyası və üz ifadəsi haqqında məlumat ehtiva edir.

ARFaceAnchor üz ifadəsi məlumatlarını dəyişən BlendShapes-də saxlayır. blendShapes, müxtəlif üz xüsusiyyətlərinə uyğun katsayıları saxlayan bir lüğətdir. Əgər maraqlanırsınızsa, Apple sənədlərində üz xüsusiyyətlərinin tam siyahısını oxumağınızı məsləhət görürük. (Qeyd: qaşqabaqlı izləmə əlavə etmək istəsəniz, bunu etmək üçün bir yol.)

Addım 2-də istifadəçinin ağzının sol və sağ tərəflərinin nə qədər gülümsədiyini izah edən bir CGFloat əldə etmək üçün mouthSmileLeft və mouthSmileRight düymələrini istifadə etmək üçün faceAnchor.blendShapes istifadə edəcəyik.

Nəhayət, Adım 3 yalnız iki dəyəri yazdırır ki, düzgün işlədiklərindən əmin olun.

Bu nöqtədə bir tətbiqiniz olmalıdır:

  • İstifadəçidən kamera və üz izləmə icazəsi alır
  • ARKit ilə istifadəçinin üz ifadələrini izləyir
  • İstifadəçi ağzının sol və sağ tərəfindəki konsola nə qədər gülümsəyir

Böyük addımlar atdıq. Beləliklə, hər şeyin düzgün işlədiyinə əmin olmaq üçün bir saniyə edək.

Tətbiqi ilk dəfə işə saldıqda kamera icazəsi vermək istədiyiniz soruşulacaq. Bəli dediyinizə əmin olun.

Daha sonra boş bir ekrana aparılacaqsınız, ancaq CGFloat dəyərlərinin konsolda yazdırdığını görməlisiniz (onları görmədən qısa bir gecikmə ola bilər).

Telefonunuza gülümsəsəniz, yazdırılan dəyərlərin qalxdığını tapmalısınız. Nə qədər çox gülümsəsən, rəqəmlər o qədər yüksəkdir.

Düzgün işləyirsə, təbrik edirəm ! Bir səhv baş verərsə, cihazınızın üz izləməsini dəstəklədiyini və kamera icazənizin açıq olduğunu yenidən yoxlayın. Bu məktubu əvvəldən təqib etmisinizsə, konsol hər iki halda da səhvləri qaytaracaqdır.

istifadəçi interfeysi

Beləliklə, üzləri izləyirik. İndi bir gülümsəməyə cavab vermək üçün istifadəçi interfeysi yarataq.

Əvvəlcə sənədin əvvəlinə birbaşa sceneView altında smileLabel adlı yeni bir UILabel əlavə edin.

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

Bu istifadəçinin üz ifadələrinə cavab verən görünüşdür.

SetupSmileTracker funksiyanızın sonuna aşağıdakı kodu əlavə edin:

smileLabel.text = "" smileLabel.font = UIFont.systemFont (ofSize: 150)
view.addSubview (smileLabel)
// şərtləri qoyun smileLabel.translatesAutoresizingMaskIntoConstraints = false smileLabel.centerXAnchor.constraint (equalTo: view.centerXAnchor) .isActive = true smileLabel.centerYAnchor.constraint (equalTo: view.centerYAnchor).

Burada istifadəçi interfeysinin əsas xüsusiyyətlərini smileLabel-ə əlavə edirik və məhdudiyyətləri ekranın mərkəzində yerləşməsi üçün təyin edirik. İndi tətbiqi işlədən zaman ortada nəhəng bir emoji görməlisiniz.

Emojini gördükdə, ViewController-a aşağıdakı xüsusiyyəti əlavə edin:

func handleSmile (leftValue: CGFloat, rightValue: CGFloat) {let smileValue = (leftValue + rightValue) /2.0
keçid smileValue {case _ where smileValue> 0.5: smileLabel.text = "" case _ where smileValue> 0.2: smileLabel.text = "" Standard: smileLabel.text = ""}}

Bu funksiya istifadəçinin kameraya nə qədər sərt gülümsəməsindən asılı olaraq smileLabel-də emoji dəyişir. SmileValue'yu ARFaceAnchor'umuz tərəfindən verilən sol və sağ təbəssüm dəyərlərinin ortalamasından hesablayırıq (bildiyim kimi çox elmi cəhətdən).

Bu dəyəri keçid ifadəsinə daxil edin. İstifadəçi nə qədər çox gülümsəsə, emojilərimiz bir o qədər xoşbəxt olar.

Nəhayət, göstərici funksiyamıza qayıdın və onu idarə etmək üçün sola və sağa gülümsəmə dəyərlərini əlavə etmək üçün aşağıya əlavə edin:

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

Yenidən DispatchQueue istifadə edirik, çünki əsas mövzuda edilməsi lazım olan UI dəyişiklikləri edirik.

İndi tətbiqi işlədən zaman emoji bu barədə nə qədər gülümsəməyinizə görə dəyişməlidir.

Aşağıdakı GIF-də üzümü əlavə etdim ki, kamera çıxışı və emoji ilə necə işlədiyini görə biləsiniz.

Kamera çıxışını necə işlədiyini göstərmək üçün əlavə etdim

Tətbiqinizdə kamera çıxışı yoxdur, ancaq ümumi baxışa ARSCNView, sceneView əlavə edərək ölçüləri göstərərək əlavə edə bilərsiniz.

Bükün

Ümid edirəm ki, bu yazı ARKit ilə tətbiqetmə yaratmağa başlamağınıza kömək etdi.

Bu tətbiqi daha da genişləndirmək istəyirsinizsə, izləyə biləcəyiniz bütün digər üz xüsusiyyətlərinin yuxarıdakı siyahısına baxın. Qaşlarını yoxlamaq üçün bunu necə genişləndirəcəyim barədə bir qeyd qoydum.

Geri qayıdın və özünüz hazırladığınız hər hansı bir sərin layihəni şərh edin. Hələ də bu şeylərlə məşğulam, belə ki, daha mürəkkəb tətbiqetmələri görməkdən məmnun qalacağam.

Bu tətbiqin bütün kodlarını geribildirim və suallar üçün Github'a göndərdim. Oxuduğunuz üçün təşəkkürlər və uğurlar!

Oxuduğunuz üçün təşəkkür edirik! Bu hekayədən xoşunuz gəlsə, üzərində işlədiyim hekayələr və nə ilə məşğul olduğumla bağlı yeniliklər üçün Twitter-də məni izləyin.