Face Detection Ionic Capacitor App

This project demonstrates how to build a face detection mobile app using Ionic Framework, Capacitor, and face-api.js. It works both in web browsers and as a native mobile app for iOS and Android.

The app uses the device’s camera to detect faces in real time and can capture photos automatically when a face is detected with high confidence.

Developed by Coding Chefs

---

🚀 Features

✅ Built with Ionic + Capacitor
✅ Uses face-api.js (TensorFlow.js) for face detection
✅ Works in web and native builds
✅ Captures images when a face is detected
✅ Simple code structure for easy integration into other apps

---

🛠️ How It Works

• Loads pre-trained models from local assets
• Starts the camera using navigator.mediaDevices.getUserMedia()
• Continuously detects faces in the video stream
• Draws face detection boxes on a canvas overlay
• Captures a photo when a face is detected with high confidence (≥ 0.9)

---

📂 Project Structure

src/ assets/ models/ # face-api.js models app/ home/ # Ionic page for face detection

---

⚙️ Installation

Clone the repo:

git clone https://github.com/codingchefss/capacitor-face-detector.git
cd capacitor-face-detector

Install dependencies:

npm install

---

📲 Running the App

Run in Browser

ionic serve

Run on Android/iOS

Build the app:

ionic build
npx cap sync
npx cap open android

Or for iOS:

npx cap open ios

Then build and run via Android Studio or Xcode.

---

🔑 Important

• Place face-api.js models in:

  src/assets/models/
  

• Ensure model files include both:

  • model.json
  • weight .bin files (e.g. group1-shard1of1.bin)

• Always use the path:

  assets/models/
  

  This ensures compatibility in both web and native builds.

---

🌐 More From Coding Chefs

For more tutorials, projects, and services in web and mobile development, visit:

👉 https://codingchefs.com

---

📄 License

MIT License