Integrate USB Barcode Scanner + Camera Settings in CodeIgniter School System
Budget: ₹12,500 – ₹37,500 INR
Integrate USB Barcode Scanner + Camera Settings in CodeIgniter School System
Project Goal:
Enhance our existing QR Code Attendance System (built in PHP CodeIgniter) to support both:
1. USB HID Barcode Scanning (simulates keyboard input)
2. Camera-based QR scanning (already present)
With a clean UI toggle in the settings panel to switch modes.
⸻
Scope of Work:
1. USB Barcode Scanner Integration (HID):
• The scanner (CROWN FS) acts like a keyboard.
• It types the QR/barcode content followed by Enter.
• Your task:
• Add a hidden or autofocus input to receive the scan.
• Detect the end of scan on Enter key.
• Automatically trigger attendance logic (AJAX or form submit).
• Clear the field and re-ready it for the next scan.
• Ensure no conflicts with camera-based scanner.
2. Extend the Settings Panel (Existing UI shown in screenshot)
Add a setting called:
If Camera Scanner is selected, show the current camera selector:
• Primary (Back) / Secondary (Front)
• If USB Barcode Scanner is selected, hide the camera options
• Persist this setting using localStorage or cookies (no backend storage required)
• On page load, initialize the appropriate scanner logic (camera vs keyboard)
3. Preserve Existing Camera Logic
• Existing camera-based QR scanning uses html5-qrcode
• This runs inside a centered red square frame (see screenshot) with the prompt:
“Scan Your ID Card QR Code / Barcode”
• Make sure camera scanning continues to work as-is when selected.
⸻
Tech Environment:
• Backend: PHP (CodeIgniter)
• Frontend: JavaScript (vanilla or jQuery)
• Deployment: Chrome browser in kiosk mode on Android tablets
• Hardware: Built-in USB HID barcode scanner, front/back cameras
⸻
Assets Provided:
• View file (HTML/PHP) used for attendance
• Current QR scan logic (JS)
• Screenshot of settings panel and scanning view
• Sample QR code (optional)
⸻
Deliverables:
• Working JS + PHP integration to support both scanner types
• UI update in Settings to toggle scanner mode
• Persistent scanner setting (per browser instance is OK)
• Updated attendance view with proper conditional scanner logic
• Clear and well-commented code
Notes:
• The USB scanner is a CROWN Barcode Keyboard FS, which behaves as a keyboard HID input. It types the scanned value followed by an Enter key.
• This means the integration involves capturing keypress/keydown events (not camera feed or video analysis).
The scanner we use is a CROWN Barcode Keyboard FS. It is a USB HID barcode reader that functions like a physical keyboard — when a QR code is scanned, it “types” the value rapidly and ends the input with the Enter key. Your implementation must capture this input (likely in a hidden or autofocused input box), detect completion on Enter, and trigger the attendance logic using the scanned value.
Project Goal:
Enhance our existing QR Code Attendance System (built in PHP CodeIgniter) to support both:
1. USB HID Barcode Scanning (simulates keyboard input)
2. Camera-based QR scanning (already present)
With a clean UI toggle in the settings panel to switch modes.
⸻
Scope of Work:
1. USB Barcode Scanner Integration (HID):
• The scanner (CROWN FS) acts like a keyboard.
• It types the QR/barcode content followed by Enter.
• Your task:
• Add a hidden or autofocus input to receive the scan.
• Detect the end of scan on Enter key.
• Automatically trigger attendance logic (AJAX or form submit).
• Clear the field and re-ready it for the next scan.
• Ensure no conflicts with camera-based scanner.
2. Extend the Settings Panel (Existing UI shown in screenshot)
Add a setting called:
If Camera Scanner is selected, show the current camera selector:
• Primary (Back) / Secondary (Front)
• If USB Barcode Scanner is selected, hide the camera options
• Persist this setting using localStorage or cookies (no backend storage required)
• On page load, initialize the appropriate scanner logic (camera vs keyboard)
3. Preserve Existing Camera Logic
• Existing camera-based QR scanning uses html5-qrcode
• This runs inside a centered red square frame (see screenshot) with the prompt:
“Scan Your ID Card QR Code / Barcode”
• Make sure camera scanning continues to work as-is when selected.
⸻
Tech Environment:
• Backend: PHP (CodeIgniter)
• Frontend: JavaScript (vanilla or jQuery)
• Deployment: Chrome browser in kiosk mode on Android tablets
• Hardware: Built-in USB HID barcode scanner, front/back cameras
⸻
Assets Provided:
• View file (HTML/PHP) used for attendance
• Current QR scan logic (JS)
• Screenshot of settings panel and scanning view
• Sample QR code (optional)
⸻
Deliverables:
• Working JS + PHP integration to support both scanner types
• UI update in Settings to toggle scanner mode
• Persistent scanner setting (per browser instance is OK)
• Updated attendance view with proper conditional scanner logic
• Clear and well-commented code
Notes:
• The USB scanner is a CROWN Barcode Keyboard FS, which behaves as a keyboard HID input. It types the scanned value followed by an Enter key.
• This means the integration involves capturing keypress/keydown events (not camera feed or video analysis).
The scanner we use is a CROWN Barcode Keyboard FS. It is a USB HID barcode reader that functions like a physical keyboard — when a QR code is scanned, it “types” the value rapidly and ends the input with the Enter key. Your implementation must capture this input (likely in a hidden or autofocused input box), detect completion on Enter, and trigger the attendance logic using the scanned value.