Face Pixel - Real-Time Face Detection & Pixelation
Cross-platform Flutter app for experimenting with real-time face detection. Detects faces in camera feed and applies pixelation blur effects. Works on Android, iOS, and Web.
Cross-platform Flutter app for experimenting with real-time face detection. Detects faces in camera feed and applies pixelation blur effects. Works on Android, iOS, and Web.
Project Overview
Face Pixel is a learning project to explore real-time face detection across different platforms. Built with Flutter, it detects faces in camera feeds and applies pixelation effects with adjustable blur intensity (1-100 scale).
The project uses platform-specific ML libraries: Google ML Kit for Android and iOS (via native channels with Kotlin/Swift), and MediaPipe Tasks Vision for web (via JavaScript). This gave me hands-on experience integrating different ML frameworks and handling platform-specific APIs while maintaining a unified Flutter UI.
All processing happens on-device—no data is sent to servers. This wasn't a privacy requirement, just how the ML libraries work. The multi-camera support lets you switch between front and back cameras. It's a fun way to experiment with computer vision without dealing with server infrastructure.
Key Features
- •Real-time face detection via camera feed
- •Adjustable pixelation blur (intensity 1-100)
- •Front and back camera switching
- •Works on Android, iOS, and Web
- •Local processing (no server required)
Project Gallery
Technical Challenges & Solutions
Challenge 1
Implementing consistent face detection across different platforms with platform-specific ML APIs
Solution
Used platform channels to bridge Flutter with native Android (ML Kit via Kotlin) and iOS (ML Kit Vision Framework) implementations. For Web, integrated MediaPipe Tasks Vision API through JavaScript interop. This approach ensures optimal performance on each platform while maintaining a unified Flutter UI, though it required learning platform-specific ML APIs and their quirks.
Challenge 2
Achieving smooth real-time processing while maintaining privacy constraints
Solution
Processed camera frames at intervals optimized per platform (30 FPS target) while ensuring pixel-perfect face detection and immediate pixelation rendering. Used platform-native graphics APIs for efficient pixelation without CPU bottlenecks. The challenge was balancing detection accuracy, processing latency, and device battery consumption.
Challenge 3
Managing camera permissions and platform-specific permission models across mobile OSs
Solution
Implemented platform-aware permission handling that gracefully requests camera access on Android and iOS with appropriate user messaging. Built fallback UI states for permission denial and camera unavailability, ensuring good UX across all scenarios.
Results & Impact
Working cross-platform app (Android, iOS, Web)
Learned platform-specific ML API integration (ML Kit, MediaPipe)
Gained experience with native Kotlin/Swift interop via platform channels
Experimented with real-time image processing and performance optimization
Technologies Used
Project Links
Interested in this project?
Let's discuss how I can help with your similar requirements.
Get in Touch
