3 आसान चरणों में तेज़ ARKit स्माइल-ट्रैकिंग ऐप बनाएं

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

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

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

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

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

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

प्रारंभिक सेटअप

Xcode खोलकर एक नया प्रोजेक्ट बनाएं जिसका नाम "SmileTracker" हो (या जो भी नाम आप पसंद करते हैं)।

इससे पहले कि हम फेस ट्रैकिंग में जा सकें, हमें दो चीजें करने की आवश्यकता है:

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

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

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

guard ARFaceTrackingConfiguration.isSupported else { fatalError("डिवाइस फेस ट्रैकिंग का समर्थन नहीं करता") }

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

अब, कैमरे का उपयोग करने की अनुमति प्राप्त करें। हमारे guard स्टेटमेंट के नीचे viewDidLoad में निम्नलिखित जोड़ें:

AVCaptureDevice.requestAccess(for: AVMediaType.video) { granted in if (granted) { Dispatch.main.sync { // हम इस फ़ंक्शन को एक मिनट में लागू करेंगे self.setupSmileTracker() } } else { fatalError("उपयोगकर्ता ने कैमरा अनुमति नहीं दी!") } }

यहां हम डिवाइस से कैमरा अनुमति का अनुरोध कर रहे हैं। यदि उपयोगकर्ता अनुमति देता है, तो हम वह फ़ंक्शन चलाएंगे जो हमारे स्माइल ट्रैकिंग को सेटअप करेगा (त्रुटि के बारे में चिंता न करें, हम इसे एक पल में लागू करेंगे)।

हम फ़ंक्शन को Dispatch.main.sync में लपेटते हैं क्योंकि हम इस फ़ंक्शन में UI एलिमेंट्स जोड़ेंगे, जो केवल मुख्य थ्रेड पर किया जा सकता है।

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

आपके द्वारा बनाई गई पंक्ति में, Key कॉलम में Privacy — Camera Usage Description जोड़ें और सुनिश्चित करें कि 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 के डेलीगेट को self पर सेट किया और इसे अपने व्यू में जोड़ा।

Xcode आपको बताएगा कि एक समस्या है क्योंकि ViewController ARSCNViewDelegate के अनुरूप नहीं है। फ़ाइल के शीर्ष के पास जहां ViewController घोषित है, उस लाइन को निम्न में बदलें:

class ViewController: ViewController, ARSCNViewDelegate { ... }

अब अपने ViewController क्लास setupSmileTracker में यह ARSCNViewDelegate फ़ंक्शन जोड़ें:

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

renderer हर बार चलेगा जब हमारा सीन अपडेट होता है और हमें ARAnchor प्रदान करता है जो उपयोगकर्ता के चेहरे से मेल खाता है।

फेस ट्रैकिंग अनुभव बनाना आसान बनाने के लिए, Apple स्वचालित रूप से एक ARFaceAnchor बनाता है और जब हम ARFaceTrackingConfiguration का उपयोग करके इसे चलाते हैं तो इसे हमारे सेशन में जोड़ता है। यह ARFaceAnchor तब renderer में ARAnchor के रूप में पास किया जाता है।

renderer में निम्न कोड जोड़ें:

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

इस फ़ंक्शन के अंदर बहुत कुछ चल रहा है इसलिए मैंने चरणों को नंबर दिया है (Ray Wenderlich स्टाइल)।

चरण 1 में हम ARAnchor को ARFaceAnchor में बदलते हैं और इसे faceAnchor चर में असाइन करते हैं।

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

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

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

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

इस बिंदु पर आपके पास एक ऐप होना चाहिए जो:

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

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

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

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

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

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

यूजर इंटरफेस

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

सबसे पहले ViewController के शीर्ष पर sceneView के ठीक नीचे एक नया UILabel जिसे smileLabel कहा जाता है जोड़ें।

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

यह वह व्यू होगा जो उपयोगकर्ता के चेहरे की अभिव्यक्तियों पर प्रतिक्रिया करेगा।

अपने setupSmileTracker फ़ंक्शन के नीचे निम्न कोड जोड़ें:

smileLabel.text = "?" smileLabel.font = UIFont.systemFont(ofSize: 150) view.addSubview(smileLabel) // कंस्ट्रेंट्स सेट करें 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 के साथ ऐप्स बनाना शुरू करने में आपकी मदद करने के लिए उपयोगी था।

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

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

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

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