Web-Based Face Recognition Authentication Using face-api.js

Effect Demonstration

Face recognition effect screenshot.

Introduction

In recent years, deep‑learning‑based face recognition has achieved breakthrough accuracy and is widely used for identity verification such as Alipay payments and face‑check‑in. While most applications run on mobile devices, web‑browser solutions are still scarce.

This article presents a complete web‑based face‑recognition authentication solution and focuses on automatic face capture in the browser.

Scenario Description and Analysis

Applicable scenario: real‑name authentication via face recognition. The user aligns their face with the camera; the program detects a single face, captures the image, and sends it for face comparison, liveness detection, and ID verification.

Key issues and solutions: Perform liveness detection on the server (e.g., Baidu AI liveness detection). Obtain high‑resolution ID photos via Baidu AI real‑name verification service. Use an open‑source JS face‑capture library that supports single‑ and multi‑face detection. Face‑api.js offers superior performance and accuracy compared with alternatives. tracking.js provides color‑based tracking but is CPU‑bound and slower. Access the camera stream with navigator.mediaDevices.getUserMedia (WebRTC).

Overall Solution

Key steps:

Implementation Details

For developers familiar with camera access, video streaming, and canvas drawing, the following code snippets illustrate the process.

1. Include face‑api.js

<script src="face-api.js"></script>

or install via npm:

npm install face-api.js

2. Load model data (asynchronous)

// Load all models from the /models directory
await faceapi.loadModels('/models');
// Load specific models
await faceapi.loadTinyFaceDetectorModel('/models');
await faceapi.loadSsdMobilenetv1Model('/models');
await faceapi.loadMtcnnModel('/models');

3. Detect faces

// Supported sources: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement
const detections1 = await faceapi.detectAllFaces(source, modelOptions);
const detections2 = await faceapi.detectSingleFace(source, modelOptions);

4. Model options

Tiny Face Detector (fast, ~190 KB):

new faceapi.TinyFaceDetectorOptions({
  inputSize: number, // e.g., 416 (default)
  scoreThreshold: number // default 0.5
});

SSD Mobilenet V1 (higher accuracy, ~5.4 MB):

new faceapi.SsdMobilenetv1Options({
  minConfidence: number, // default 0.5
  maxResults: number // default 100
});

MTCNN (balanced performance, ~2 MB):

new faceapi.MtcnnOptions({
  minFaceSize: number, // default 20
  scoreThresholds: [0.6, 0.7, 0.7],
  scaleFactor: number, // default 0.709
  maxNumScales: number // default 10
});

5. Error handling for camera access

const errorMap = {
  'NotAllowedError': 'Camera is disabled; enable it in system or browser settings.',
  'AbortError': 'Hardware issue prevented camera access.',
  'NotFoundError': 'No camera detected.',
  'NotReadableError': 'OS, browser, or page error prevented camera access.',
  'OverConstrainedError': 'No suitable camera found.',
  'SecurityError': 'Camera is disabled; enable it in system or browser settings.',
  'TypeError': 'Type error; no camera detected.'
};
await navigator.mediaDevices.getUserMedia({ video: true })
  .catch(error => {
    if (errorMap[error.name]) {
      alert(errorMap[error.name]);
    }
  });

Note: Chrome only allows camera access over HTTPS or localhost; HTTP requires unsafe flags.

Source Code

Full demo repository with detailed comments: https://github.com/Angela-Chen/face-api-demo

Further Reading

What can front‑end developers do in the AI era? ( link )

TensorFlow.js official documentation ( link )

Deep learning in the browser series ( link )

face‑api.js GitHub ( link )

tracking.js website ( link )

Call to Action

If you found this article helpful, please click “In View” to increase its visibility and follow the “Zhengcai Cloud Front‑end Team” public account for more curated content.

Recruitment

The Zhengcai Cloud Front‑end Team (ZooTeam) in Hangzhou is hiring passionate front‑end engineers. If you are interested in joining a fast‑growing team working on material systems, engineering platforms, performance, cloud applications, and data visualization, send your resume to [email protected] .