Secara garis besar, alur sistem yang akan dibangun adalah:

Kamera dibuka di browser (real-time)
Model face detection (face-api.js) mendeteksi keberadaan wajah
Jika wajah terdeteksi → frame di-capture
Gambar wajah dikirim ke backend Laravel
Backend mengirim gambar ke API Face++ untuk proses face comparison
API Face++ mengembalikan hasil kecocokan (confidence / similarity)
Backend menentukan kecocokan tertinggi
Backend mengirim hasil ke frontend
Jika cocok → otomatis melakukan absensi

Konsep Singkat Sistem

Sistem ini menggabungkan 2 hal:

Client-side (browser):
- Menggunakan face-api.js untuk mendeteksi wajah
- Kamera berjalan terus (real-time)
Server-side (Laravel + Face Recognition API):
- Mengirim gambar ke Face++
- Membandingkan wajah dengan database wajah yang sudah tersimpan
- Mengembalikan hasil kecocokan

Cara Kerja Face++ dalam Sistem Ini

Face++ menyediakan API face recognition yang dapat:

Detect wajah
Extract face token
Compare wajah
Return similarity score

Dalam sistem kamu:

Wajah user sudah disimpan sebagai reference (face_token)
Saat absen:
- Face baru dikirim
- Dibandingkan dengan face yang tersimpan
- API mengembalikan similarity

Langkah Pemasangan di Laravel

1. Install Laravel (jika belum ada)

composer create-project laravel/laravel face-absensi

2. Ambil API Key Face++

Daftar di:

https://www.faceplusplus.com/

Dapatkan:

API Key
API Secret

Simpan di .env:

FACEPP_API_KEY=your_api_key
FACEPP_API_SECRET=your_api_secret
FACEPP_API_URL=https://api-us.faceplusplus.com/facepp/v3

3. Buat Service Face++ di Laravel

Buat file:

app/Services/FacePlusService.php

Contoh implementasi:

<?phpnamespace App\Services;use Illuminate\Support\Facades\Http;class FacePlusService
{
    public function compare($imageBase64, $faceToken)
    {
        $response = Http::asForm()->post(env('FACEPP_API_URL') . '/compare', [
            'api_key' => env('FACEPP_API_KEY'),
            'api_secret' => env('FACEPP_API_SECRET'),
            'image_base64_1' => $imageBase64,
            'face_token2' => $faceToken,
        ]);        return $response->json();
    }
}

4. Controller untuk Compare Face

use App\Services\FacePlusService;
use Illuminate\Http\Request;class FaceController extends Controller
{
    public function compare(Request $request, FacePlusService $service)
    {
        $photo = $request->photo;        // ambil base64 tanpa prefix
        $imageBase64 = str_replace('data:image/jpeg;base64,', '', $photo);        // contoh: face token dari database user
        $faceToken = auth()->user()->face_token;        $result = $service->compare($imageBase64, $faceToken);        if (!isset($result['confidence'])) {
            return response()->json([
                'success' => false,
                'message' => 'Gagal compare wajah'
            ]);
        }        return response()->json([
            'success' => true,
            'confidence' => $result['confidence'],
            'matched' => $result['confidence'] > 80,
            'user' => auth()->user()
        ]);
    }
}

5. Routing

Route::post('/face-compare', [FaceController::class, 'compare'])->name('face.detect.compare');

6. Frontend Flow (Sudah Kamu Punya)

Alurnya:

Kamera menyala
face-api.js mendeteksi wajah
Jika ada wajah:
- Capture frame
- Convert ke base64
- Kirim ke backend
Backend:
- Kirim ke Face++
- Terima confidence
Jika cocok:
- Auto submit absensi

📌 Studi Kasus (Seperti Punyamu)

Pada sistem absensi yang kamu buat:

Kamera aktif terus di browser
face-api.js digunakan untuk memastikan wajah ada sebelum kirim data
Ketika wajah terdeteksi:
- Frame di-capture
- Dikirim ke Laravel
Laravel:
- Mengirim gambar ke Face++
- Melakukan face comparison
Hasil:
- Jika confidence > threshold (misalnya 80)
  → dianggap cocok
  → absensi otomatis berhasil
- Jika tidak cocok
  → sistem retry

Kelebihan Menggunakan Face++

Setup cepat dan mudah
Tidak perlu training model sendiri
Sudah menyediakan face recognition siap pakai
Akurasi cukup tinggi
Tidak perlu GPU / machine learning complex
Dokumentasi API jelas

Kekurangan

Bergantung pada API (butuh internet)
Ada limit penggunaan (quota)
Berbayar untuk penggunaan besar
Latency (request ke server eksternal)
Data wajah dikirim ke pihak ketiga (isu privasi)

Alur Lengkap Sistem

User membuka halaman absensi
Kamera aktif otomatis
face-api.js mendeteksi wajah
Jika wajah ditemukan:
- Capture image
- Kirim ke Laravel
Laravel:
- Ambil image
- Kirim ke Face++ API
API mengembalikan similarity/confidence
Laravel menentukan:
- Cocok → absensi berhasil
- Tidak cocok → retry
Response dikirim ke frontend

❓ Q&A

Q: Kenapa harus pakai face-api.js di frontend?

A: Untuk menghindari kirim gambar terus-menerus. Sistem hanya mengirim gambar jika wajah benar-benar terdeteksi.

Q: Apakah Face++ menyimpan wajah?

A: Ya, wajah direpresentasikan sebagai face_token yang bisa disimpan di database dan digunakan untuk comparison.

Q: Apakah bisa tanpa Face++?

A: Bisa, tapi harus build model sendiri (lebih kompleks, butuh ML & training).

Q: Kenapa tidak langsung kirim semua frame?

A: Akan membebani server dan API. Deteksi di frontend membuat sistem lebih efisien.

Q: Threshold confidence ideal berapa?

A: Umumnya:

70–80 → cukup longgar
80–90 → lebih aman
90 → sangat strict

Kesimpulan

Integrasi Face++ dengan Laravel + face-api.js adalah solusi praktis untuk sistem absensi wajah real-time. Dengan kombinasi:

Deteksi wajah di frontend
Verifikasi wajah di backend via API
Response otomatis untuk absensi

Sistem menjadi:

Efisien
Akurat
Mudah diimplementasikan

bagi yang membutuhkan aplikasi jadi dan untuk demo atau sourcode gratis menyusul, atau bisa hubingi kontak saya.

Source Code Aplikasi Help Desk Ticket IT Berbasis Web (Laravel 11) – Sistem Manajemen Tiket IT Modern V1.1

Cara Import Excel ke Database Laravel dengan PhpSpreadsheet phpoffice (Mudah & Cepat & Contoh kasus)

Alur Sistem Absensi Wajah (Face Recognition + Face Detection + Face++)