सुपर क्विक स्माइल ट्रैकिंग ऐप कैसे बनाएं

ARKit डराने वाला लग सकता है लेकिन यह इतना बुरा नहीं है अगर आपके पास पहले से ही iOS ऐप बनाने का कुछ बुनियादी अनुभव है।

मैं सीखने का प्रकार हूं, इसलिए मैं एआरकिट के साथ खेल रहा हूं, इससे परिचित होने के लिए बुनियादी ऐप बना रहा हूं। इस पोस्ट में, मैं समीक्षा करूँगा कि मैंने एक साधारण चेहरा ट्रैकिंग ऐप बनाकर क्या सीखा है।

मैं इसे 3 भागों में करूँगा:

1. प्रारंभिक सेटअप → सबसे पहले चीज़ें, कैमरा अनुमतियां प्राप्त करें और सुनिश्चित करें कि डिवाइस ARKit का उपयोग कर सकता है।
2. मुस्कान ट्रैकिंग → ARKit के साथ मुस्कान पर नज़र रखना शुरू करें। आप शायद इसी के लिए यहां हैं।
3. यूजर इंटरफेस → हमारे ऐप के लिए UI जोड़ें जो मुस्कान पर प्रतिक्रिया देगा।

इस लेखन के समय, Xcode सिम्युलेटर सामने वाले कैमरे का समर्थन नहीं करता है इसलिए ऐप को चलाने के लिए आपको एक वास्तविक डिवाइस की आवश्यकता होगी। आपके डिवाइस में एक TrueDepth कैमरा भी होना चाहिए (iPhone X या नया ठीक होना चाहिए)।

अंत में, कॉपी पेस्ट क्लब के मेरे साथी सदस्यों के लिए, सभी कोड जीथब पर उपलब्ध हैं।

आरंभिक सेटअप

एक्सकोड खोलकर और "स्माइलट्रैकर" (या जो भी नाम आप पसंद करते हैं) नामक एक नया प्रोजेक्ट बनाकर शुरू करें।

इससे पहले कि हम फेस ट्रैकिंग शुरू करें, हमें दो काम करने होंगे:

1. सुनिश्चित करें कि आपका डिवाइस ARKit का समर्थन करता है
2. अपने डिवाइस के कैमरे तक पहुंचने की अनुमति प्राप्त करें

अपने नए प्रोजेक्ट में, ViewController.swift open खोलें . फ़ाइल के शीर्ष के पास, import UIKit . के नीचे , लाइन जोड़ें:import ARKit . यह हमें उन सभी अच्छाइयों तक पहुँचने देगा जो Apple ने हमें फेस ट्रैकिंग को सुपर आसान बनाने के लिए प्रदान की हैं।

अब निम्न कोड को viewDidLoad . के अंदर जोड़ें :

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

ARFaceTrackingConfiguration.isSupported एक बूलियन है जो सच होगा यदि ऐप चलाने वाला डिवाइस फेस ट्रैकिंग का समर्थन कर सकता है और यदि नहीं तो झूठा। इस मामले में, यदि डिवाइस फेस ट्रैकिंग का समर्थन नहीं कर सकता है, तो हम एक घातक त्रुटि के साथ ऐप को क्रैश कर देंगे।

इसके बाद, कैमरे का उपयोग करने की अनुमति प्राप्त करें। निम्नलिखित को 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 . में कैमरा उपयोग विवरण भी जोड़ना होगा . Info.plistखोलें और एक नई पंक्ति जोड़ें (आप अंतिम पंक्ति को हाइलाइट करके और enter . दबाकर ऐसा कर सकते हैं )।

आपके द्वारा अभी बनाई गई पंक्ति में, Privacy — Camera Usage Description add जोड़ें करने के लिए Key कॉलम और सुनिश्चित करें कि Type कॉलम स्ट्रिंग पर सेट है। आप Value छोड़ सकते हैं आप उपयोगकर्ता के लिए कैमरे का उपयोग कैसे करेंगे, यह समझाने के लिए कॉलम खाली या एक संदेश जोड़ें।

आपका Info.plist अब कुछ इस तरह दिखना चाहिए:

यदि आप अब तक अपने ऐप का परीक्षण करना चाहते हैं, तो आप उस लाइन पर टिप्पणी कर सकते हैं जहां हम setupSmileTracker() कहते हैं . बस इसे बाद में अनकमेंट करना न भूलें।

यदि आप अभी अपना ऐप चलाते हैं, तो आपको एक पॉपअप देखना चाहिए जो आपसे कैमरा अनुमतियाँ सक्षम करने के लिए कह रहा हो। यदि आप नहीं कहते हैं, तो आपको एप्लिकेशन चलाने के लिए उन अनुमतियों को सक्षम करने के लिए एप्लिकेशन सेटिंग पर जाना होगा।

यदि ऐप क्रैश हो जाता है, तो क्या गलत हुआ यह देखने के लिए हमारे दो त्रुटि संदेशों में से एक के लिए कंसोल की जांच करें।

मुस्कान ट्रैकिंग

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)
}

इस फ़ंक्शन के अंदर बहुत कुछ चल रहा है इसलिए मैंने चरणों (रे वेंडरलिच शैली) को गिना है।

चरण 1 . में हम ARAnchor . को रूपांतरित करते हैं एक ARFaceAnchor . में और इसे faceAnchor . पर असाइन करें चर।

ARFaceAnchor इसमें वर्तमान स्थिति और अभिविन्यास, टोपोलॉजी और चेहरे के भाव . के बारे में जानकारी शामिल है जिस चेहरे को हम ट्रैक कर रहे हैं।

ARFaceAnchor चेहरे के भावों के बारे में जानकारी को इसके वेरिएबल blendShapes . में स्टोर करता है . blendShapes एक शब्दकोश है जो विभिन्न चेहरे की विशेषताओं के अनुरूप गुणांक संग्रहीत करता है। यदि आप रुचि रखते हैं, तो मेरा सुझाव है कि आप Apple के दस्तावेज़ीकरण में चेहरे की विशेषताओं की पूरी सूची देखें। (संकेत :यदि आप भ्रूभंग ट्रैकिंग जोड़ना चाहते हैं तो आपको इसे करने का एक तरीका यहां मिलेगा।)

चरण 2 . में , हम faceAnchor.blendShapes . का उपयोग करते हैं एक CGFloat प्राप्त करने के लिए जो कि mouthSmileLeft कुंजियों का उपयोग करके उपयोगकर्ता के मुंह के बाएँ और दाएँ पक्ष कितना मुस्कुरा रहा है, के अनुरूप है और mouthSmileRight ।

अंत में, चरण 3 बस दो मानों को प्रिंट करता है ताकि आप सुनिश्चित कर सकें कि यह ठीक से काम कर रहा है?.

इस समय आपके पास एक ऐसा ऐप होना चाहिए जो:

• उपयोगकर्ता से कैमरा और चेहरा ट्रैकिंग अनुमतियां प्राप्त करता है
• उपयोगकर्ताओं के चेहरे के भावों को ट्रैक करने के लिए ARKit का उपयोग करता है
• यह प्रिंट करता है कि उपयोगकर्ता अपने मुंह के बाईं और दाईं ओर कंसोल पर कितना मुस्कुरा रहा है

हमने बहुत प्रगति की है, तो आइए यह सुनिश्चित करने के लिए एक सेकंड का समय लें कि सब कुछ ठीक से चल रहा है।

जब आप पहली बार ऐप चलाते हैं, तो आपसे पूछा जाना चाहिए कि क्या आप कैमरा अनुमति देंगे। हाँ कहना सुनिश्चित करें।

फिर आपको एक खाली स्क्रीन पर भेजा जाएगा, लेकिन आपको कंसोल पर CGFloat मानों को प्रिंट होते हुए देखना शुरू कर देना चाहिए (उन्हें देखने से पहले आपको थोड़ी देरी हो सकती है)।

जब आप अपने फोन पर मुस्कुराते हैं तो आपको ध्यान देना चाहिए कि मूल्य बढ़ते जा रहे हैं। आप जितना अधिक मुस्कुराते हैं, संख्या उतनी ही अधिक होती जाती है।

अगर यह ठीक से काम कर रहा है, तो बधाई ?! यदि आप किसी त्रुटि का सामना कर रहे हैं, तो यह सुनिश्चित करने के लिए दोबारा जांचें कि आपका डिवाइस फेस ट्रैकिंग का समर्थन करता है और आपके पास कैमरा अनुमतियां चालू हैं। यदि आप शुरू से ही इस लेखन का अनुसरण कर रहे हैं तो कंसोल उन दोनों मामलों में त्रुटियों को प्रिंट करेगा।

उपयोगकर्ता इंटरफ़ेस

इसलिए हम चेहरों को ट्रैक कर रहे हैं, अब मुस्कान पर प्रतिक्रिया देने के लिए UI बनाते हैं।

पहले एक नया UILabel जोड़ें smileLabel called कहा जाता है फ़ाइल के शीर्ष पर, ठीक नीचे 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

यहां, हम अपने smileLabel . में मूलभूत UI गुण जोड़ रहे हैं और इसकी बाधाओं को सेट करना ताकि यह स्क्रीन के बीच में हो। अब जब आप ऐप चलाते हैं, तो आपको एक विशालकाय दिखना चाहिए? बीच में इमोजी.

इमोजी दिखने के बाद, निम्न फ़ंक्शन को अपने 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 . द्वारा हमें दिए गए बाएँ और दाएँ मुस्कान मानों का औसत निकालकर (बहुत वैज्ञानिक, मुझे पता है)।

उस मान को स्विच स्टेटमेंट में प्लग करें, और उपयोगकर्ता जितना अधिक मुस्कुराता है, हमारे इमोजी को उतनी ही खुशी मिलती है।

अंत में, हमारे renderer पर वापस जाएं कार्य करें और हमारे बाएं और दाएं मुस्कान मानों को handleSmile . में प्लग इन करने के लिए इसे नीचे से जोड़ें :

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

फिर से, हम DispatchQueue . का उपयोग करते हैं क्योंकि हम UI में बदलाव कर रहे हैं, जो मुख्य थ्रेड पर किया जाना चाहिए।

जब आप ऐप चलाते हैं तो अब आप इमोजी को इस पर निर्भर करते हुए बदलते देख सकते हैं कि आप उस पर कितना मुस्कुराते हैं।

नीचे दिए गए gif में मैंने अपना चेहरा जोड़ा है ताकि आप इसे इमोजी के साथ कैमरा आउटपुट के साथ काम करते हुए देख सकें।

आपके ऐप में कैमरा आउटपुट नहीं होगा, लेकिन आप इसे हमारे ARSCNView . जोड़कर जोड़ सकते हैं , sceneView , पर्यवेक्षण के लिए और इसे आयाम देना।

रैपिंग अप

मुझे उम्मीद है कि यह पोस्ट आपके लिए ARKit के साथ ऐप्स बनाना शुरू करने में मददगार थी।

यदि आप इस ऐप को और आगे बढ़ाना चाहते हैं, तो ऊपर दी गई सूची को अन्य सभी चेहरे की विशेषताओं के साथ देखें जिन्हें आप ट्रैक कर सकते हैं। मैंने एक संकेत छोड़ा है कि इसे कैसे बढ़ाया जाए ताकि भ्रूभंग की भी जांच की जा सके।

वापस आएं और अपने द्वारा बनाए गए किसी भी अच्छे प्रोजेक्ट के साथ टिप्पणी करें, मैं अभी भी इस सामग्री से अपने पैरों को गीला कर रहा हूं इसलिए अधिक जटिल ऐप्स देखने के लिए उत्साहित होगा।

मैंने फीडबैक और प्रश्नों के लिए इस ऐप के लिए जीथब पर सभी कोड पोस्ट किए हैं। पढ़ने के लिए धन्यवाद और शुभकामनाएँ!

पढ़ने के लिए बहुत-बहुत धन्यवाद! अगर आपको यह कहानी पसंद आई है, तो मुझे ट्विटर पर फॉलो करें जहां मैं उन कहानियों के बारे में अपडेट पोस्ट करता हूं जिन पर मैं काम कर रहा हूं और मैं क्या कर रहा हूं।