Webcam Facial Recognition Application

Angular 21 web application for real-time facial recognition with age, gender, and emotion detection using webcam feed or uploaded images.

Live Demo

Live Application | Source Code

Features

• Real-time webcam feed with start/stop controls
• Face detection with visual bounding boxes
• Age estimation and gender detection with confidence scores
• Emotion recognition (7 emotions: happy, sad, angry, surprised, neutral, fearful, disgusted)
• Multiple face detection
• Image upload with progress indicator
• Interactive tooltips on hover showing face details
• Responsive design for desktop and mobile

Technology Stack

• Framework: Angular 21+ with TypeScript (Standalone Components)
• State Management: NgRx (Redux pattern)
• UI Framework: Tailwind CSS 4
• Facial Recognition: face-api.js (TensorFlow.js)
• Build Tool: Angular CLI 21 with Vite
• RxJS: Reactive programming for async operations

Prerequisites

• Node.js v18.x or higher
• npm v10.x or higher
• Angular CLI v21.x or higher: npm install -g @angular/cli@21

Getting Started

Installation

1. Clone the repository:

   git clone https://github.com/isabelccc/webcam.git
   cd webcam

2. Install dependencies:

   npm install

3. Models are included in src/assets/models/. If needed, download from face-api.js-models and place in src/assets/models/:

   src/assets/models/
   ├── tiny_face_detector/
   ├── age_gender_model/
   └── face_expression/
   

Running

Development server:

npm start

Available at http://localhost:4200

Production build:

npm run build

Output in dist/webcam/browser

Project Structure

webcam/
├── src/
│   ├── app/
│   │   ├── models/              # TypeScript interfaces
│   │   ├── service/             # Business logic services
│   │   ├── store/               # NgRx store (actions, reducers, effects, selectors)
│   │   ├── app.ts               # Main component
│   │   ├── app.html             # Template
│   │   ├── app.css              # Styles
│   │   └── app.config.ts        # App configuration
│   ├── assets/models/           # face-api.js models
│   └── main.ts                  # Bootstrap
├── angular.json
└── package.json

Usage

Webcam Mode

1. Click "Start Webcam" and allow camera permissions
2. Faces are detected automatically with colored bounding boxes
3. Hover over any face to see tooltip with details
4. View all detected faces in the list below
5. Click "Stop Webcam" to stop the feed

Image Upload Mode

1. Click "Choose Image" to select a photo
2. Wait for processing (progress bar shown)
3. Colored boxes appear around detected faces
4. Hover over face boxes to see detailed information

How It Works

Architecture (Redux Pattern)

• Actions: User interactions dispatch actions
• Effects: Handle async operations (face detection, image processing)
• Reducers: Update application state
• Selectors: Components subscribe to state changes
• Components: Display UI and dispatch actions

Face Detection Flow

1. Webcam access via getUserMedia() API
2. Load pre-trained TensorFlow.js models on initialization
3. Process video frames every 500ms using face-api.js
4. Apply confidence threshold (0.6 for images, 0.3 for video) to filter false positives
5. Detect faces, estimate age/gender, recognize emotions
6. Draw colored bounding boxes on canvas overlay
7. Show interactive tooltips on hover

Deployment

Deployed on AWS (S3 + CloudFront).

Quick steps:

1. Build: npm run build
2. Upload dist/webcam/browser/* to S3 bucket
3. Configure CloudFront distribution with HTTPS

Browser Compatibility

• Chrome/Edge (recommended)
• Firefox
• Safari
• Requires HTTPS for webcam access (localhost works for development)

Development Commands

npm install    # Install dependencies
npm start      # Start development server
npm run build  # Build for production
npm test       # Run tests

License

This project is created for demonstration purposes.

Author

isabel chen

Links

• Live Application
• GitHub Repository