Camera Capture Interface

Relevant source files

The following files were used as context for generating this wiki page:

• static/js/capture.js
• static/js/capture-simple.js
• templates/capture_wajah.html
• templates/add_employee_form.html
• templates/admin_camera.html
• templates/home.html
• templates/user_home.html

The Camera Capture Interface is a critical component of the Smart Absen system, serving as the primary input mechanism for face data. It encompasses two distinct but related functionalities: Face Data Registration for training the recognition model and Daily Attendance Marking. The interface is designed to be user-friendly, providing real-time feedback and multiple capture modes to ensure high-quality data collection for the InsightFace/ArcFace backend, which boasts 99%+ accuracy.

The system provides dedicated UIs for administrators to configure and test cameras, for new employees to register their faces, and for daily users to perform attendance actions. The client-side logic is handled by JavaScript modules that manage camera streams, photo capture, and communication with the backend API.

System Architecture

The camera interface is split across several files, creating a modular system for different use cases.

• Face Data Registration: templates/capture_wajah.html provides the UI for capturing training photos for a new employee. It is driven by static/js/capture-simple.js. The workflow starts from the templates/add_employee_form.html page, which redirects to the capture page upon successful employee data submission.
• Attendance Marking: The main attendance page, templates/home.html, integrates camera functionality to allow users to mark their attendance by scanning their face.
• Camera Configuration: templates/admin_camera.html offers a comprehensive dashboard for administrators to detect, preview, test, and configure all available camera devices.

This diagram illustrates the high-level user flow for camera-related actions.

Face Data Registration

This module is responsible for collecting a set of face images for a new employee, which are then used to train the face recognition model. The primary interface is capture_wajah.html, which is loaded after an admin successfully adds a new employee's details via add_employee_form.html.

Sources: templates/capture_wajah.html, templates/add_employee_form.html:718-723

UI Components

The registration UI is composed of several key interactive elements:

Component	ID / Class	File	Description
Employee Info	employeeInfo	capture_wajah.html:482-486	Displays the name and department of the employee being registered.
Webcam Feed	trainingWebcam	capture_wajah.html:511	The live video stream from the user's camera.
Mode Selector	mode-selector	capture_wajah.html:497-508	Buttons to switch between Manual, Auto, and Upload capture modes.
Capture Buttons	captureManualBtn, startAutoBtn	capture_wajah.html:520,527	Triggers for manual and automatic photo capture.
Photo Preview	previewGrid	capture_wajah.html:557-562	A grid that displays thumbnails of the captured photos.
Progress Bar	progressBar	capture_wajah.html:552	Visual indicator of the number of photos captured towards the target.
Save Button	saveBtn	capture_wajah.html:566	Submits the captured photos to the backend for processing.

Client-Side Logic (capture-simple.js)

The capture-simple.js script orchestrates the entire registration process on the client side. It manages the application state, camera interaction, and data submission.

Sources: static/js/capture-simple.js, templates/capture_wajah.html:583

State Management

A global captureState object holds the current state of the capture session.

const captureState = {
    mode: 'manual',
    photos: [],
    isCapturing: false,
    stream: null,
    employeeId: null,
    employeeName: '',
    employeeDept: ''
};

Sources: static/js/capture-simple.js:5-13

Key Functions

Function	Description	Source File
initCamera()	Requests access to the user's webcam and starts the video stream.	static/js/capture-simple.js:68-81
capturePhoto()	Captures a frame from the video stream, converts it to a Base64 JPEG, and adds it to the photos array.	static/js/capture-simple.js:88-99
startAutoCapture()	Initiates an interval to automatically capture photos until the target count is reached.	static/js/capture-simple.js:115-131
updateProgress()	Updates the progress bar and photo count on the UI. Enables the save button when the minimum photo count is met.	static/js/capture-simple.js:28-46
savePhotos()	Sends the collected photos and employee data to the /api/save_face_training endpoint.	static/js/capture-simple.js:139-168

Configuration

The script uses a CONFIG object to define key parameters for the capture process.

Constant	Value	Description
MIN_PHOTOS	5	The minimum number of photos required to enable the save button.
TARGET_PHOTOS	10	The target number of photos for 100% progress.
AUTO_CAPTURE_INTERVAL	500	The time in milliseconds between each photo in auto-capture mode.
Sources: static/js/capture-simple.js:15-19

Data Submission Flow

The following sequence diagram shows the process of capturing and saving face training data.

The payload sent to the server is a JSON object containing the employee's information and an array of Base64-encoded images.

{
  "employee_id": "123",
  "employee_name": "Budi Santoso",
  "employee_dept": "Operasional",
  "photos": [
    "data:image/jpeg;base64,/9j/4AAQSkZJRg...",
    "data:image/jpeg;base64,/9j/2wBDAAMCAg..."
  ]
}

Sources: static/js/capture-simple.js:148-154

Attendance Marking

The camera is also used for daily attendance. The home.html and user_home.html pages provide buttons for "Absen Masuk" and "Absen Pulang". When clicked, these trigger a backend process that opens a camera window (handled by OpenCV on the server, not in the browser) to perform face recognition.

The user interface provides buttons that call the markAttendance(mode) JavaScript function. This function sends a request to the backend to initiate the face scan.

<!-- From templates/user_home.html -->
<button class="attendance-btn btn-masuk" onclick="markAttendance('masuk')">
    <i class="bi bi-box-arrow-in-right"></i>
    Absen Masuk
</button>

<button class="attendance-btn btn-pulang" onclick="markAttendance('pulang')">
    <i class="bi bi-box-arrow-right"></i>
    Absen Pulang
</button>

Sources: templates/user_home.html:200-209

The markAttendance function in user_home.html sends a POST request to the /mark_attendance endpoint.

// From templates/user_home.html
function markAttendance(mode) {
    // ...
    fetch(getApiEndpoint('/mark_attendance'), {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `mode=${mode}&camera_id=${selectedCamera}`
    })
    // ...
}

Sources: templates/user_home.html:314-338

Camera Configuration (admin_camera.html)

The system includes a comprehensive admin page for managing camera hardware. This interface allows an administrator to:

• View a list of all detected camera devices.
• See the status of each camera (e.g., active, virtual, error).
• Select a camera to preview its live feed.
• Start and stop the camera stream.
• Adjust camera settings like resolution, frame rate, brightness, and contrast.
• Save settings to the server.

This diagram shows the flow for initializing the camera configuration page.

The page uses JavaScript to dynamically fetch and display camera information, providing a responsive and interactive experience for managing hardware. Key functions like startCamera, stopCamera, and loadAvailableCameras handle all user interactions.

Sources: templates/admin_camera.html:356-512

Alternative Capture Module (capture.js)

The repository also contains static/js/capture.js, a more advanced capture module that integrates face-api.js for client-side face detection. This script is not currently used by capture_wajah.html but represents an alternative implementation.

Key differences from capture-simple.js:

• Client-Side Detection: Uses face-api.js to detect faces directly in the browser.
• UI Feedback: Draws an overlay box and landmarks on the detected face.
• Capture Condition: Can be configured to only allow photo capture when a face is detected.

// Example of face detection in capture.js
async function detectFaceInVideo(videoElement) {
    if (!captureState.faceDetectionReady) return null;
    
    try {
        const detection = await faceapi
            .detectSingleFace(videoElement, new faceapi.TinyFaceDetectorOptions())
            .withFaceLandmarks(true);
        
        return detection;
    } catch (error) {
        console.error('Face detection error:', error);
        return null;
    }
}

Sources: static/js/capture.js:46-59

This module provides a more robust capture experience by ensuring a face is present and properly framed before a photo is taken, potentially improving the quality of training data.

Conclusion

The Camera Capture Interface is a well-structured and versatile feature of the Smart Absen system. It effectively separates the concerns of face data registration, daily attendance, and hardware configuration into distinct modules and user interfaces. The use of JavaScript for client-side logic provides a responsive user experience, while clear API endpoints handle the communication with the powerful backend recognition engine. The system is flexible, offering multiple capture modes and even an alternative, more advanced capture script, demonstrating a thoughtful approach to data quality and user interaction.