Camera Access Control (Camera Lock)
Relevant source files
The following files were used as context for generating this wiki page:
1. Introduction
Camera Access Control is a critical module within the Smart Absen Face Recognition system, responsible for managing all interactions with physical and virtual webcams. Its primary functions include discovering available cameras, initializing video streams for face capture, and providing a user interface for camera selection and configuration. This system is integral to both the daily attendance process and the initial face data training for new employees.
A key documented feature of this module is the "Camera Lock," a backend mechanism designed to prevent multiple, redundant detections of a single face in a short period. While the specific implementation of camera_lock.py is not detailed in the provided files, its purpose is to enhance the reliability and efficiency of the attendance system. This document focuses on the broader camera access and management architecture as implemented in the frontend and referenced in project documentation.
Sources: README.md, CLEANUP_REPORT.md
2. System Architecture
The camera management system is a client-server architecture where the frontend JavaScript handles device interaction and the backend provides device information and processes captured data.
2.1. Component Interaction
The following diagram illustrates the interaction between the user, frontend, backend, and camera hardware.
This diagram shows that frontend pages like admin_camera.html and user_home.html fetch the list of available cameras from a backend API. The JavaScript on these pages, and in dedicated files like capture-simple.js, then uses the browser's MediaDevices API to request access to the physical webcam. The camera_lock.py module is noted as a backend component for camera management.
Sources: templates/admin_camera.html, templates/user_home.html, static/js/capture-simple.js, README.md
3. Frontend Camera Management
The majority of camera control logic resides on the client-side, implemented in JavaScript within various HTML templates.
3.1. Camera Discovery and Selection
Users can select from a list of available cameras. This list is populated dynamically by querying a backend endpoint.
Camera Loading Sequence
This sequence shows the process of fetching and displaying the list of available cameras in the admin panel.
Sources: templates/admin_camera.html:602-629, templates/user_home.html:432-450
3.2. Camera Initialization
Camera streams are initiated using the standard navigator.mediaDevices.getUserMedia() browser API. The system requests a user-facing camera with specific resolution and frame rate constraints.
Key Initialization Logic
The core logic for starting a camera stream is found in templates/admin_camera.html and static/js/capture-simple.js.
// Simplified example from admin_camera.html
async function startCamera() {
// ... checks and constraints setup ...
try {
// Request permission and stream
currentStream = await navigator.mediaDevices.getUserMedia(constraints);
const videoElement = document.getElementById('cameraPreview');
videoElement.srcObject = currentStream;
// ... handle success ...
} catch (error) {
// ... handle errors like NotAllowedError, NotFoundError, etc. ...
console.error('Error starting camera:', error);
showNotification('Gagal mengaktifkan kamera: ' + error.name, 'error');
}
}
The system is designed to handle various common errors, providing user-friendly feedback for issues like:
NotFoundError: Camera not found.NotAllowedError: User denied permission.NotReadableError: Camera is in use by another application.SecurityError: Page is not served over HTTPS or localhost.
Sources: templates/admin_camera.html:730-822, static/js/capture-simple.js:77-91, templates/camera_test.html:198-269
3.3. Photo Capture
For training purposes, the system captures still frames from the video stream. This is done by drawing the current video frame onto a hidden <canvas> element and converting it to a Base64-encoded JPEG.
Capture Flow
This process is handled by the capturePhoto() function in the face capture JavaScript.
Sources: static/js/capture-simple.js:94-107, templates/capture_wajah.html
4. Admin Camera Configuration
The admin_camera.html page provides a comprehensive interface for testing and configuring cameras.
4.1. UI Components
| Component | Description | Source File |
|---|---|---|
| Camera Preview | Displays the live feed from the selected camera. | templates/admin_camera.html:362-373 |
| Camera Controls | Buttons to start, stop, test, and capture from the camera. | templates/admin_camera.html:375-412 |
| Camera Settings | Form to select a camera and configure its resolution, frame rate, brightness, and contrast. | templates/admin_camera.html:420-474 |
| Available Cameras | A list of all detected camera devices and their status. | templates/admin_camera.html:481-502 |
| Advanced Settings | Checkboxes to enable/disable face detection, logging, and saving of images. | templates/admin_camera.html:508-556 |
4.2. Debug and Test Functions
The admin panel and a dedicated test page include several functions for diagnosing camera issues.
| Function | Purpose | Source File |
|---|---|---|
requestPermission() | Explicitly triggers the browser's camera permission prompt. | templates/admin_camera.html:926-945 |
debugCamera() | Logs a comprehensive debug report to the browser console, including browser support, available devices, and API test results. | templates/admin_camera.html:881-924 |
testBrowserSupport() | Checks for mediaDevices, getUserMedia, and enumerateDevices support and lists available video devices. | templates/camera_test.html:128-171 |
captureTest() | Captures a single frame from the live preview and downloads it as a JPG file for quality checking. | templates/admin_camera.html:834-855 |
Sources: templates/admin_camera.html, templates/camera_test.html
5. The "Camera Lock" Feature
The "Camera Lock" is a conceptual feature mentioned in the project's documentation, intended to improve the attendance-taking process.
- Purpose: To prevent multiple detections of the same face in rapid succession.
- Implementation: Documented as
camera_lock.py. - Functionality: While the source code is not available for analysis, this module likely works by creating a temporary, user-specific lock after a successful face recognition event. This lock would prevent the attendance marking endpoint from processing another request from the same user for a short cooldown period.
This feature is crucial for ensuring that a single appearance by an employee does not result in multiple, erroneous attendance records.
Sources: README.md, CLEANUP_REPORT.md
6. Summary
The Camera Access Control system in Smart Absen is a robust, client-centric module that leverages standard browser APIs for device interaction. It provides administrators with powerful tools for configuration and debugging, while offering a straightforward experience for end-users. The architecture effectively separates concerns, with the frontend managing the user-facing camera interaction and the backend handling device discovery and data processing. The conceptual "Camera Lock" feature further enhances this system by adding a layer of logic to prevent data duplication, ensuring the integrity of attendance logs.