Membina Sistem Kehadiran dengan Pengecaman Wajah Menggunakan Nextjs dan FACEIO

Ringkasan Eksekutif

Dalam era transformasi digital, penjejakan kehadiran tradisional semakin usang. Penyelesaian termaju kami memanfaatkan teknologi pengecaman muka termaju, Next.js, dan mencipta ekosistem pengurusan kehadiran yang canggih, selamat dan pintar.

pengenalan

Pengurusan kehadiran secara tradisinya merupakan tugas yang memakan masa dan terdedah kepada kesilapan bagi organisasi. Sistem inovatif FACEIO mengubah paradigma ini dengan memperkenalkan teknologi pengecaman muka termaju, menawarkan proses diperkemas yang meningkatkan keselamatan dan pengalaman pengguna.

Sistem Kehadiran Moden dengan FACEIO

Sistem Kehadiran Moden yang dikuasakan oleh FACEIO menandakan anjakan transformatif dalam cara organisasi menjejaki kehadiran, menggunakan teknologi pengecaman muka yang terkini. Sistem canggih ini menggantikan kaedah tradisional seperti daftar manual dan sistem berasaskan kad dengan penyelesaian tanpa sentuh yang lancar, selamat dan cekap. FACEIO mengutamakan ketepatan, pencegahan penipuan dan privasi pengguna, menjadikannya pengubah permainan dalam pengurusan kehadiran.

Struktur Projek

Pasang Pakej

Konfigurasi Persekitaran

Konfigurasi Next.js

Persediaan Pembekal

Hadapi Konteks IO

// src/context/FaceIOContext.tsx
'use client';

import React, { 
  createContext, 
  useState, 
  useContext, 
  useEffect, 
  ReactNode 
} from 'react';
import faceIO from '@faceio/fiojs';

interface FaceIOContextType {
  faceioInstance: any;
  error: Error | null;
}

const FaceIOContext = createContext<faceiocontexttype>({
  faceioInstance: null,
  error: null,
});

export const FaceIOProvider = ({ children }: { children: ReactNode }) => {
  const [faceioInstance, setFaceioInstance] = useState<any>(null);
  const [error, setError] = useState<error null>(null);

  useEffect(() => {
    const initializeFaceIO = async () => {
      try {
        if (process.env.NEXT_PUBLIC_FACEIO_PUBLIC_KEY) {
          const instance = new faceIO(process.env.NEXT_PUBLIC_FACEIO_PUBLIC_KEY);
          setFaceioInstance(instance);
        } else {
          throw new Error('FACEIO Public Key is not configured');
        }
      } catch (err) {
        console.error('Face Recognition Initialization Failed', err);
        setError(err instanceof Error ? err : new Error('Initialization failed'));
      }
    };

    initializeFaceIO();
  }, []);

  return (
    <faceiocontext.provider value="{{" faceioinstance error>
      {children}
    </faceiocontext.provider>
  );
};

export const useFaceIO = () => useContext(FaceIOContext);
</error></any></faceiocontexttype>

Cangkuk Pengecaman Wajah

// src/hooks/useFaceRecognition.ts
'use client';

import { useState } from 'react';
import { useFaceIO } from '../context/FaceIOContext';

export function useFaceRecognition() {
  const { faceioInstance } = useFaceIO();
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<error null>(null);

  const enrollUser = async (userMetadata: Record<string any>) => {
    if (!faceioInstance) {
      throw new Error('FaceIO not initialized');
    }

    setIsLoading(true);
    setError(null);

    try {
      const enrollResult = await faceioInstance.enroll({
        locale: "auto",
        payload: {
          ...userMetadata,
          enrollmentTimestamp: new Date().toISOString()
        }
      });

      setIsLoading(false);
      return {
        facialId: enrollResult.facialId,
        metadata: enrollResult
      };
    } catch (err) {
      setIsLoading(false);
      setError(err instanceof Error ? err : new Error('Enrollment failed'));
      throw err;
    }
  };

  const authenticateUser = async () => {
    if (!faceioInstance) {
      throw new Error('FaceIO not initialized');
    }

    setIsLoading(true);
    setError(null);

    try {
      const authResult = await faceioInstance.authenticate({
        locale: "auto"
      });

      setIsLoading(false);
      return {
        facialId: authResult.facialId,
        payload: authResult.payload
      };
    } catch (err) {
      setIsLoading(false);
      setError(err instanceof Error ? err : new Error('Authentication failed'));
      throw err;
    }
  };

  return { 
    enrollUser, 
    authenticateUser, 
    isLoading, 
    error 
  };
}
</string></error>

Komponen Pengecaman Wajah

// src/components/FaceRecognition.tsx
'use client';

import { useState } from 'react';
import { useFaceRecognition } from '../hooks/useFaceRecognition';

export function FaceRecognitionComponent() {
  const { enrollUser, authenticateUser, isLoading, error } = useFaceRecognition();
  const [userData, setUserData] = useState(null);

  const handleEnroll = async () => {
    try {
      const result = await enrollUser({
        username: 'example_user',
        email: 'user@example.com'
      });
      setUserData(result);
    } catch (err) {
      console.error('Enrollment error', err);
    }
  };

  const handleAuthenticate = async () => {
    try {
      const result = await authenticateUser();
      setUserData(result);
    } catch (err) {
      console.error('Authentication error', err);
    }
  };

  return (
    <div>
      {isLoading && <p>Processing...</p>}
      {error && <p>Error: {error.message}</p>}
      <button onclick="{handleEnroll}">Enroll</button>
      <button onclick="{handleAuthenticate}">Authenticate</button>
      {userData && <pre class="brush:php;toolbar:false">{JSON.stringify(userData, null, 2)}

}