Face Recognition System

A real-time face detection and recognition system using face-api.js with Node.js backend and web UI.

Features

• ✅ Real-time face detection with webcam
• ✅ Multiple face detection simultaneously
• ✅ Face recognition with custom training
• ✅ Live bounding boxes with names
• ✅ Train new faces through the UI
• ✅ Persistent storage of face data
• ✅ FPS counter and statistics
• ✅ Responsive web interface

Prerequisites

• Node.js (v14 or higher)
• Webcam
• Modern web browser (Chrome, Firefox, Edge)

Installation

1. Install dependencies:

npm install

2. Download face-api.js models:

   • Visit: https://github.com/justadudewhohacks/face-api.js-models
   • Download these folders and place them in public/models/:
     • ssd_mobilenetv1_model
     • face_landmark_68_model
     • face_recognition_model

   Your directory structure should look like:

   public/
   └── models/
       ├── ssd_mobilenetv1_model/
       │   ├── model.json
       │   └── weights files...
       ├── face_landmark_68_model/
       │   ├── model.json
       │   └── weights files...
       └── face_recognition_model/
           ├── model.json
           └── weights files...
   

Usage

1. Start the server:

npm start

2. Open your browser and navigate to:

http://localhost:3000

3. Click "Start Camera" to begin face detection

4. To train new faces:

   • Enter a person's name in the input field
   • Make sure their face is visible in the camera
   • Click "Capture Face"
   • Repeat 2-3 times for better accuracy

5. The system will now recognize trained faces in real-time!

How It Works

1. Face Detection: Uses SSD MobileNet V1 to detect faces in video frames
2. Landmark Detection: Identifies 68 facial landmark points for each face
3. Face Recognition: Computes 128-dimensional face descriptors and matches against trained faces
4. Real-time Processing: Continuously processes video frames and displays results

API Endpoints

• POST /api/save-face - Save a new face descriptor
• GET /api/get-faces - Get all trained faces
• DELETE /api/delete-face/:name - Delete a person's face data

Performance Tips

• Use good lighting for better detection
• Face the camera directly
• Train multiple samples (2-3) per person for better accuracy
• Adjust minConfidence in app.js for sensitivity

Troubleshooting

Models not loading:

• Make sure you downloaded all model files
• Check that folders are in public/models/
• Verify file names match exactly

Camera not working:

• Allow camera permissions in browser
• Check if another app is using the camera
• Try a different browser

Poor recognition accuracy:

• Capture more training samples (3-5 per person)
• Ensure good lighting conditions
• Make sure face is clearly visible and frontal

Technologies Used

• face-api.js: Face detection and recognition
• TensorFlow.js: Neural network operations
• Express.js: Web server
• Vanilla JavaScript: Frontend logic
• HTML5/CSS3: User interface

License

MIT