কিভাবে একটি সুপার কুইক স্মাইল ট্র্যাকিং অ্যাপ তৈরি করবেন

ARKit ভীতিজনক মনে হতে পারে তবে আপনার যদি ইতিমধ্যেই iOS অ্যাপ তৈরি করার কিছু মৌলিক অভিজ্ঞতা থাকে তবে এটি এতটা খারাপ নয়।

আমি শিখতে-করতে টাইপ, তাই আমি ARKit এর সাথে খেলছি, এটির সাথে পরিচিত হওয়ার জন্য মৌলিক অ্যাপ তৈরি করছি। এই পোস্টে, আমি একটি সাধারণ ফেস ট্র্যাকিং অ্যাপ তৈরি করে যা শিখেছি তা পর্যালোচনা করব।

আমি এটি 3টি অংশে করব:

1. প্রাথমিক সেটআপ → প্রথমেই, ক্যামেরার অনুমতি নিন এবং নিশ্চিত করুন যে ডিভাইসটি আরকিট ব্যবহার করতে পারে।
2. স্মাইল ট্র্যাকিং → ARKit দিয়ে হাসি ট্র্যাক করা শুরু করুন। সম্ভবত এটিই আপনি এখানে এসেছেন৷
৷
3. ইউজার ইন্টারফেস → আমাদের অ্যাপের জন্য UI যোগ করুন যা হাসিতে প্রতিক্রিয়া জানাবে।

এই লেখা পর্যন্ত, এক্সকোড সিমুলেটর সামনের ক্যামেরাকে সমর্থন করে না তাই অ্যাপটি চালানোর জন্য আপনার একটি বাস্তব ডিভাইসের প্রয়োজন হবে। আপনার ডিভাইসে একটি TrueDepth ক্যামেরাও থাকতে হবে (iPhone X বা তার থেকে নতুন হওয়া উচিত)।

অবশেষে, কপি পেস্ট ক্লাবের আমার সহকর্মী সদস্যদের জন্য, সমস্ত কোড Github-এ উপলব্ধ।

প্রাথমিক সেটআপ৷

Xcode খুলুন এবং "স্মাইলট্র্যাকার" নামে একটি নতুন প্রকল্প তৈরি করে শুরু করুন (বা আপনি যে নামটি পছন্দ করেন)।

আমরা ফেস ট্র্যাকিং এ যাওয়ার আগে, আমাদের দুটি জিনিস করতে হবে:

1. নিশ্চিত করুন যে আপনার ডিভাইসটি ARKit সমর্থন করে
2. আপনার ডিভাইসের ক্যামেরা অ্যাক্সেস করার অনুমতি পান

আপনার নতুন প্রকল্পে, ViewController.swift খুলুন . ফাইলের উপরের দিকে, import UIKit এর নিচে , লাইন যোগ করুন:import ARKit . ফেস ট্র্যাকিংকে অতি সহজ করার জন্য অ্যাপল আমাদের যে সব গুডিজ দিয়েছে তা আমাদের অ্যাক্সেস করতে দেবে।

এখন 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 যোগ করুন 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 একটি অভিধান যা বিভিন্ন মুখের বৈশিষ্ট্যের সাথে সম্পর্কিত সহগ সংরক্ষণ করে। আপনি যদি আগ্রহী হন, আমি আপনাকে অ্যাপলের ডকুমেন্টেশনে মুখের বৈশিষ্ট্যগুলির সম্পূর্ণ তালিকা চেক করার পরামর্শ দিচ্ছি। (ইঙ্গিত :আপনি যদি ভ্রুকুটি ট্র্যাকিং যোগ করতে চান তবে আপনি এখানে এটি করার একটি উপায় খুঁজে পাবেন।)

ধাপ 2-এ , আমরা faceAnchor.blendShapes ব্যবহার করি mouthSmileLeft কীগুলি ব্যবহার করে ব্যবহারকারীর মুখের বাম এবং ডান দিক কতটা হাসছে তার সাথে সামঞ্জস্যপূর্ণ একটি CGFloat পেতে এবং mouthSmileRight .

অবশেষে, ধাপ 3 শুধু দুটি মান প্রিন্ট করে যাতে আপনি নিশ্চিত করতে পারেন যে এটি সঠিকভাবে কাজ করছে?.

এই মুহুর্তে আপনার একটি অ্যাপ থাকা উচিত যেটি:

• ব্যবহারকারীর কাছ থেকে ক্যামেরা এবং ফেস ট্র্যাকিং অনুমতি পায়
• ব্যবহারকারীদের মুখের অভিব্যক্তি ট্র্যাক করতে ARKit ব্যবহার করে
• কনসোলে ব্যবহারকারী তাদের মুখের বাম এবং ডান দিকে কতটা হাসছে তা প্রিন্ট করে

আমরা অনেক অগ্রগতি করেছি, তাই সবকিছু ঠিকঠাক চলছে কিনা তা নিশ্চিত করতে এক সেকেন্ড সময় নিন।

আপনি যখন প্রথমবার অ্যাপটি চালাবেন, তখন আপনাকে জিজ্ঞাসা করা উচিত যে আপনি ক্যামেরা অনুমতি দেবেন কিনা। হ্যাঁ বলা নিশ্চিত করুন।

তারপরে আপনাকে একটি ফাঁকা স্ক্রিনে পাঠানো হবে, তবে আপনি দেখতে শুরু করবেন যে CGFloat মানগুলি কনসোলে মুদ্রিত হচ্ছে (আপনি সেগুলি দেখার আগে একটি ছোট বিলম্ব হতে পারে)।

আপনি যখন আপনার ফোনে হাসেন তখন আপনার লক্ষ্য করা উচিত যে মানগুলি মুদ্রিত হচ্ছে। আপনি যত বেশি হাসবেন সংখ্যা তত বেশি হবে।

যদি এটি সঠিকভাবে কাজ করে, অভিনন্দন ?! আপনি যদি কোনও ত্রুটির মধ্যে চলে যান, আপনার ডিভাইস ফেস ট্র্যাকিং সমর্থন করে এবং আপনার ক্যামেরার অনুমতি চালু আছে তা নিশ্চিত করতে দুবার চেক করুন। আপনি যদি শুরু থেকে এই লেখাটি অনুসরণ করে থাকেন তবে কনসোল এই উভয় ক্ষেত্রেই ত্রুটিগুলি প্রিন্ট করবে৷

ইউজার ইন্টারফেস

তাই আমরা মুখগুলি ট্র্যাক করছি, এখন হাসির প্রতিক্রিয়া জানাতে UI তৈরি করা যাক৷

প্রথমে একটি নতুন UILabel যোগ করুন smileLabel বলা হয় ফাইলের শীর্ষে, ঠিক 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-তে পরিবর্তন করছি, যা অবশ্যই মূল থ্রেডে করা উচিত।

আপনি যখন অ্যাপটি চালাবেন তখন আপনি এটিতে কতটা হাসছেন তার উপর নির্ভর করে আপনি এখন ইমোজি পরিবর্তন দেখতে পাবেন৷

নীচের জিআইএফ-এ আমি আমার মুখ যোগ করেছি যাতে আপনি ইমোজির সাথে ক্যামেরা আউটপুট দিয়ে কাজ করতে দেখতে পারেন।

আপনার অ্যাপে ক্যামেরা আউটপুট থাকবে না, তবে আপনি আমাদের ARSCNView যোগ করে এটি যোগ করতে পারেন , sceneView , তত্ত্বাবধানে এবং এটিকে মাত্রা প্রদান করে।

র্যাপিং আপ

আমি আশা করি এই পোস্টটি আপনার জন্য ARKit-এর সাথে অ্যাপ তৈরি করা শুরু করতে সহায়ক ছিল৷

আপনি যদি এই অ্যাপটিকে আরও প্রসারিত করতে চান তবে আমি উপরে উল্লেখিত অন্যান্য সমস্ত মুখের বৈশিষ্ট্যগুলির সাথে যে তালিকাটি আপনি ট্র্যাক করতে পারেন তা দেখুন। পাশাপাশি ভ্রুকুটি পরীক্ষা করার জন্য কীভাবে এটি প্রসারিত করা যায় তার জন্য আমি একটি ইঙ্গিত রেখেছি৷

ফিরে আসুন এবং আপনার নিজের তৈরি করা কোনও দুর্দান্ত প্রকল্পের সাথে মন্তব্য করুন, আমি এখনও এই জিনিসগুলি দিয়ে আমার পা ভিজিয়ে রাখছি তাই আরও জটিল অ্যাপগুলি দেখতে উত্তেজিত হবে৷

আমি প্রতিক্রিয়া এবং প্রশ্নের জন্য Github এ এই অ্যাপের জন্য সমস্ত কোড পোস্ট করেছি। পড়ার জন্য ধন্যবাদ এবং শুভকামনা!

পড়ার জন্য অনেক ধন্যবাদ! আপনি যদি এই গল্পটি পছন্দ করেন তবে আমাকে টুইটারে অনুসরণ করুন যেখানে আমি যে গল্পগুলিতে কাজ করছি এবং আমি কী করছি সে সম্পর্কে আপডেট পোস্ট করি৷