Face Recognition with face-api.js, PHP & MySQL – Live Demo

In today’s digital world, security and identity verification tools are developing rapidly. One powerful technology leading this change is face recognition. With tools like face-api.js, building a browser-based face detection and recognition system becomes both efficient and accessible.

This blog explains how a simple yet powerful Face Recognition System can be built using face-api.js, PHP, and MySQL, and highlights its key features for educational learning.

A live demo will also be provided so readers can explore how the system works in real time.

System Overview

This system allows users to:

• Register with face data
• Detect and recognize faces from images
• Verify identity through face matching
• Perform secure login and logout
• Store face descriptors inside a MySQL database

It’s a great project for learning how AI-based face recognition works in real web applications.

Secure Login & Logout

The system includes:

• Secure Login built with PHP sessions
• Optional face verification
• Logout that safely destroys the session

This ensures only authenticated users can access the system.

User Registration Module

Users can register using two flexible methods:

1. Upload a Photo

Users can upload an image, and the system automatically detects the face using face-api.js.

2. Capture Using Camera

Users can take a live photo directly through their webcam or device camera.

3. Face Detection During Registration

During registration, the system:

• Detects multiple faces in the image
• Ensures only one face is selected per user
• Extracts face descriptors
• Saves descriptors in MySQL
• Rejects unclear or invalid face images

This makes registration accurate and user-friendly.

Face Recognition Module

After registration, users can test face recognition by uploading a new photo.

Results Preview

Using face-api.js models, the system displays:

• Estimated Age
• Gender
• Facial Expression (such as neutral, happy, surprised)

This helps users understand how face feature analysis works.

Database Matching

The uploaded face is compared with all stored face descriptors.

The system returns:

• The closest matched user
• A similarity percentage
• Optional list of additional close matches

This demonstrates the core concept of vector-based face recognition.

Database Layer (MySQL)

The system stores:

• User information
• Uploaded or captured photos
• JSON-encoded face descriptors
• Registration timestamps

This shows how machine-learning-related data can be saved and reused in a relational database.

Why Use face-api.js?

face-api.js is ideal for educational projects because:

• It runs entirely inside the browser
• No heavy server-side machine learning is required
• It includes high-quality models such as:
  • Face Detection
  • Facial Landmarks
  • Face Recognition
  • Age and Gender Estimation
  • Facial Expression Detection

It offers an accessible way for students to understand AI-powered web development.

Final Thoughts

This Face Recognition System built with face-api.js, PHP, and MySQL is excellent for educational purposes. It helps learners understand:

• How browser-based AI detection works
• The fundamentals of face recognition
• How to store ML vector data in a database
• How authentication systems operate

With a simple structure and powerful features, this project is perfect for anyone exploring modern AI-enhanced web applications.

🔐 User Login: administrator / password@123

Note: Demo may have limited access for security.