Next-Gen Face Recognition Attendance System Using Deep Learning

Abstract

Conventional attendance tracking methods such as manual roll calls, ID-card swipes, and RFID-based systems suffer from proxy attendance, time inefficiency, and scalability issues. This paper presents a next-generation face recognition attendance system built on deep learning principles using the face-api.js library, which leverages TensorFlow.js for real-time, browser-based facial detection and recognition. The proposed system is implemented as a modern, full-stack web application using Next.js 15 (React 19) on the front end and MongoDB as the NoSQL database. The architecture separates administrative and employee portals with JWT-based authentication and bcrypt password hashing for robust security. The face recognition pipeline employs a Tiny Face Detector model for lightweight face detection and SSD MobileNet v1 for extracting 128-dimensional face descriptors, which are then matched using Euclidean distance thresholding. The system supports real-time webcam streaming, automatic face detection polling, GPS-based geolocation logging, and mobile-responsive UI. Experimental results on internal deployments demonstrate high recognition accuracy (?97.5%), low latency inference (<500 ms per recognition cycle), and resilient performance under varying lighting conditions. The system offers a scalable, cost-effective, and tamper- resistant alternative to traditional attendance mechanisms, suitable for educational institutions and corporate environments.

Introduction

Attendance management is critical across educational, corporate, and industrial settings. Traditional methods like manual roll calls, swipe cards, and RFID systems are prone to errors, fraud (buddy punching, card sharing), and operational inefficiency. Biometric solutions like fingerprints and iris scans improve security but face hygiene concerns and require dedicated hardware. Face recognition, being contactless, offers convenience, non-intrusiveness, and can leverage standard webcams for deployment.

Proposed System:
The paper presents a browser-based face recognition attendance system combining deep learning with modern full-stack web technologies. Key features include:

• Face Recognition Pipeline: Uses face-api.js (TensorFlow.js) for in-browser face detection, landmark localization, and 128-dimensional descriptor extraction. Faces are matched to registered profiles using Euclidean distance for real-time attendance verification.

• Architecture: Three-tier web architecture using Next.js 15, React 19, and TypeScript for modular, scalable, and role-based design.

• Authentication & Security: JWT-based authentication, bcrypt-hashed passwords, OTPs for multi-factor security.

• Database: MongoDB stores employee profiles, face descriptors, attendance records, GPS-stamped check-ins, and leave requests.

• System Modules:

  • Admin Portal: Dashboard, employee management, attendance console, leave approvals, reports/analytics, system settings.

  • Employee Portal: Mark attendance, view personal dashboard, attendance calendar, leave requests, profile management.

• Technology Stack: Modern full-stack tools including Tailwind CSS, Shadcn/UI, Framer Motion, SWR, jsPDF, Progressive Web App support, ensuring cross-platform usability.

Experimental Results:

• Recognition Accuracy: Achieved 97.6% overall accuracy across different lighting conditions, angles, devices, and accessory usage (spectacles).

• Inference Latency: Real-time performance with sub-500ms recognition cycles on mobile devices, and faster performance on desktops/laptops.

Advantages:

• Contactless, hygienic, and convenient biometric attendance.

• Fully browser-based, removing dependency on server GPUs.

• Real-time, GPS-stamped, scalable, and secure attendance management.

• Role-based portals and comprehensive reporting for institutional use.

Conclusion

This paper presented a comprehensive, next-generation face recognition attendance system that leverages deep learning for real-time, browser-based biometric verification. By utilizing face-api.js atop TensorFlow.js, the system eliminates the dependency on server-side GPU infrastructure and specialised hardware, enabling deployment on any device with a standard webcam and modern web browser. The modular architecture built with Next.js 15 and MongoDB ensures clean separation between administrative and employee functionalities, while JWT-based authentication and bcrypt password hashing provide robust security. The face recognition pipeline, employing a Tiny Face Detector and ResNet-based 128-dimensional descriptor extraction with Euclidean distance matching, achieves an overall accuracy of 97.6% with sub-500ms latency. The experimental evaluation demonstrates that the system is practical, accurate, and cost-effective for real-world deployment in educational and corporate settings. The contactless nature of face recognition, combined with GPS logging, PWA support, and comprehensive analytics, positions the proposed system as a modern, viable replacement for traditional attendance tracking mechanisms.

References

[1] S. Kadry and K. Smaili, \"A design and implementation of a wireless iris recognition attendance management system,\" Information Technology and Control, vol. 36, no. 4, pp. 323–329, 2007. [2] M. Kassim, H. Mazlan, N. Zaini, and M. K. Salleh, \"Web-based student attendance system using RFID technology,\" IEEE Contro and System Graduate Research Colloquium, pp. 64–69, 2012. [3] S. Pankanti, S. Prabhakar, and A. K. Jain, \"On the individuality of fingerprints,\" IEEE Trans. Pattern Analysis and Machine Intelligence, vol. 24, no. 8, pp. 1010–1025, 2002. [4] J. Daugman, \"How iris recognition works,\" IEEE Trans. Circuits and Systems for Video Technology, vol. 14, no. 1, pp. 21–30, 2004. [5] M. Turk and A. Pentland, \"Eigenfaces for recognition,\" Journal of Cognitive Neuroscience, vol. 3, no. 1, pp. 71–86, 1991. [6] T. Ahonen, A. Hadid, and M. Pietikainen, \"Face description with local binary patterns: Application to face recognition,\" IEEE Trans Pattern Analysis and Machine Intelligence, vol. 28, no. 12, pp. 2037–2041, 2006. [7] A. Krizhevsky, I. Sutskever, and G. E. Hinton, \"ImageNet classification with deep convolutional neural networks,\" Advances in Neural Information Processing Systems, vol. 25, pp. 1097–1105, 2012. [8] F. Schroff, D. Kalenichenko, and J. Philbin, \"FaceNet: A unified embedding for face recognition and clustering,\" IEEE Conf Computer Vision and Pattern Recognition, pp. 815–823, 2015. [9] J. Deng, J. Guo, N. Xue, and S. Zafeiriou, \"ArcFace: Additive angular margin loss for deep face recognition,\" IEEE Conf Computer Vision and Pattern Recognition, pp. 4690–4699, 2019. [10] H. Wang et al., \"CosFace: Large margin cosine loss for deep face recognition,\" IEEE Conf. Computer Vision and Pattern Recognition, pp. 5265–5274, 2018. [11] V. Juefei-Xu, D. K. Narasimhan, and M. Savvides, \"Local binary convolutional neural networks,\" IEEE Conf. Computer Vision and Pattern Recognition, pp. 19–28, 2017. [12] D. Smilkov et al., \"TensorFlow.js: Machine learning for the web and beyond,\" Proc. Machine Learning and Systems, vol. 1, pp. 309–321, 2019. [13] K. Simonyan and A. Zisserman, \"Very deep convolutional networks for large-scale image recognition,\" arXiv preprin arXiv:1409.1556, 2014. [14] K. He, X. Zhang, S. Ren, and J. Sun, \"Deep residual learning for image recognition,\" IEEE Conf. Computer Vision and Pattern Recognition, pp. 770–778, 2016. [15] A. G. Howard et al., \"MobileNets: Efficient convolutional neural networks for mobile vision applications,\" arXiv preprin arXiv:1704.04861, 2017.

Copyright

Copyright © 2026 Darapureddy Manikanta, Appari Nava Saideep, Relangi Vikas, Ponnamanda Ravi Teja, B. Narasimha Rao. This is an open access article distributed under the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.