Live Demo

Chọn một theme bên dưới để mở popup xác thực khuôn mặt. Camera sẽ bật lên, hướng dẫn người dùng đưa khuôn mặt vào đúng vị trí, đủ sáng và tiến hành xác thực.

Mặc định · Blue Tech

Giao diện xanh dương hiện đại, phù hợp đa số hệ thống

Popup Dark · Blue Border Default

Dark · Indigo

Tone tím đậm, phù hợp app tài chính / bảo mật

Popup Full Dark · Indigo Accent Dark

Light · Clean

Giao diện sáng, hợp trang quản trị hoặc SaaS

Popup Light · Blue Accent Light

Custom · Pink & Green

Theme nổi bật cho sản phẩm B2C / marketing

Popup Dark · Pink & Lime Custom

Chọn một giao diện ở trên để bắt đầu demo xác thực khuôn mặt.

AI trên trình duyệt

TensorFlow.js & Face Landmarks

Voice Guide tiếng Việt

Hướng dẫn bằng giọng nói

Giữ mặt trong khung

Chỉ chụp khi khuôn mặt chuẩn vị trí

Responsive

Mobile & Desktop

Custom Colors

Tùy chỉnh toàn bộ màu sắc của popup FaceAuth bằng options trong JavaScript. Bên trái chọn màu, bên phải là code mẫu.

🎨 Chọn màu trực tiếp

Màu chính (primaryColor)

Màu thành công (successColor)

Màu cảnh báo (warningColor)

Màu lỗi (errorColor)

Màu chữ chính (textColor)

Màu chữ phụ (subtitleColor)

📋 Code JavaScript

Khởi tạo với màu custom

const faceAuth = new FaceAuth({
  primaryColor: '#3a86ff',
  successColor: '#2ed573',
  warningColor: '#ffa502',
  errorColor: '#ff4757',
  textColor: '#ffffff',
  subtitleColor: '#b0b0b0',
  backgroundColor: '#1e1e1e',
  overlayColor: 'rgba(0, 0, 0, 0.8)'
});

await faceAuth.open();

React Example

function FaceAuthButton() {
  const handleAuth = async () => {
    const faceAuth = new FaceAuth({
      primaryColor: '#3a86ff',
      successColor: '#2ed573',
      warningColor: '#ffa502',
      errorColor: '#ff4757',
      textColor: '#ffffff',
      subtitleColor: '#b0b0b0'
    });

    faceAuth.config.onCapture = (blob) => {
      console.log('Captured:', blob);
    };

    await faceAuth.open();
  };

  return (
    <button onClick={handleAuth}>
      Xác Thực Khuôn Mặt
    </button>
  );
}

Cách Dùng

Tích hợp FaceAuth vào dự án hiện có bằng CDN hoặc NPM. Dưới đây là các cách đơn giản nhất để dùng.

CDN (HTML thuần)

Thêm 3 script vào cuối trang HTML của bạn.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.18.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/face-landmarks-detection@0.0.1/dist/face-landmarks-detection.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/face-auth-library@latest/dist/face-auth.min.js"></script>

NPM (SPA / Framework)

Dùng cho React, Vue, Next.js, v.v...

npm install face-auth-library
npm install @tensorflow/tfjs
npm install @tensorflow-models/face-landmarks-detection

Quick Start · Vanilla JS

<button onclick="authenticateUser()">
  Xác Thực Khuôn Mặt
</button>

<script>
async function authenticateUser() {
  try {
    const faceAuth = new FaceAuth();

    faceAuth.config.onCapture = (imageBlob) => {
      console.log('OK:', imageBlob);
      // uploadToServer(imageBlob);
    };

    faceAuth.config.onError = (error) => {
      console.error('Lỗi:', error);
    };

    await faceAuth.open();
  } catch (error) {
    console.error('Init error:', error);
  }
}
</script>

React Hook Example

import React, { useCallback } from 'react';

function FaceAuthButton() {
  const handleFaceAuth = useCallback(async () => {
    const faceAuth = new FaceAuth({
      detectionInterval: 150,
      voiceEnabled: true
    });

    faceAuth.config.onCapture = (blob) => {
      console.log('Authenticated:', blob);
    };

    faceAuth.config.onError = (error) => {
      console.error('Error:', error);
    };

    await faceAuth.open();
  }, []);

  return (
    <button onClick={handleFaceAuth}>
      <i className="fas fa-camera"></i>
      Xác Thực Khuôn Mặt
    </button>
  );
}

export default FaceAuthButton;

Vue.js Example

<template>
  <button @click="handleFaceAuth">
    <i class="fas fa-camera"></i>
    Xác Thực Khuôn Mặt
  </button>
</template>

<script>
export default {
  methods: {
    async handleFaceAuth() {
      const faceAuth = new FaceAuth({
        voiceEnabled: true
      });

      faceAuth.config.onCapture = (blob) => {
        console.log('Authenticated:', blob);
      };

      await faceAuth.open();
    }
  }
};
</script>

API Documentation

Các options, method và callback quan trọng của FaceAuth.

Constructor Options

const faceAuth = new FaceAuth({
  // Detection
  detectionInterval: 200,
  progressStep: 1,
  progressIntervalTime: 100,

  // Face size (tỉ lệ theo video)
  minFaceSize: 0.3,
  maxFaceSize: 0.6,

  // Center threshold
  centerThreshold: 0.15,
  warningThreshold: 0.25,

  // Colors
  primaryColor: '#3a86ff',
  successColor: '#2ed573',
  warningColor: '#ffa502',
  errorColor: '#ff4757',
  textColor: '#ffffff',
  subtitleColor: '#b0b0b0',
  backgroundColor: '#1e1e1e',
  overlayColor: 'rgba(0, 0, 0, 0.8)',

  // Callbacks
  onCapture: null,
  onClose: null,
  onError: null,
  voiceEnabled: true
});

Methods

// Mở popup & khởi tạo camera + model
await faceAuth.open();

// Đóng popup & tắt camera
faceAuth.close();

// Cập nhật config trong runtime
faceAuth.updateConfig({
  progressStep: 2,
  voiceEnabled: false
});

// Kiểm tra popup đang mở hay đã đóng
const opened = faceAuth.isOpen();

Callback · onCapture

faceAuth.config.onCapture = (imageBlob) => {
  // imageBlob là Blob ảnh JPEG
  const formData = new FormData();
  formData.append('faceImage', imageBlob, 'face.jpg');

  fetch('/api/verify-face', {
    method: 'POST',
    body: formData,
  });
};

Callback · onError

faceAuth.config.onError = (error) => {
  console.error('FaceAuth error:', error.message);
  // Hiển thị thông báo lỗi cho người dùng
  alert('Lỗi xác thực: ' + error.message);
};

Callback · onClose

faceAuth.config.onClose = () => {
  console.log('Popup đã đóng, camera & model đã cleanup');
  // Thực hiện hành động sau khi đóng
};

Advanced · Update Runtime Config

const faceAuth = new FaceAuth();
await faceAuth.open();

// Sau 3s tăng tốc độ progress & tắt voice
setTimeout(() => {
  faceAuth.updateConfig({
    progressStep: 2,
    voiceEnabled: false
  });
}, 3000);