<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Syahrul Kahfi</title>
    <description>The latest articles on DEV Community by Syahrul Kahfi (@syahrul_kahfi_4f902e4e12b).</description>
    <link>https://dev.to/syahrul_kahfi_4f902e4e12b</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3257554%2F4813d98a-85df-4701-adbb-42dfe6c57ac5.png</url>
      <title>DEV Community: Syahrul Kahfi</title>
      <link>https://dev.to/syahrul_kahfi_4f902e4e12b</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/syahrul_kahfi_4f902e4e12b"/>
    <language>en</language>
    <item>
      <title>Building a Real-Time Face Recognition Attendance System with Python, OpenCV, and Flask</title>
      <dc:creator>Syahrul Kahfi</dc:creator>
      <pubDate>Wed, 11 Jun 2025 08:40:14 +0000</pubDate>
      <link>https://dev.to/syahrul_kahfi_4f902e4e12b/building-a-real-time-face-recognition-attendance-system-with-python-opencv-and-flask-9mi</link>
      <guid>https://dev.to/syahrul_kahfi_4f902e4e12b/building-a-real-time-face-recognition-attendance-system-with-python-opencv-and-flask-9mi</guid>
      <description>&lt;p&gt;By : Raden Gumilar Riyansyah, Iwan Muttaqin, Syahrul Kahfi, Riko Andrianto Tarigan, Khanes Setiyo Aji&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;In an era of increasing digital transformation, facial recognition is emerging as a modern and secure alternative to traditional attendance methods. In this article, I’ll walk you through how I built a real-time face recognition attendance system using Python, Flask, OpenCV, and the face_recognition library.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;This web-based system captures faces via webcam, verifies users against stored data, prevents duplicate check-ins or check-outs, and exports attendance records to Excel — making it ideal for offices, schools, or small organizations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What This App Does&lt;/strong&gt;&lt;br&gt;
This facial recognition-based attendance system allows you to:&lt;br&gt;
• Register users by storing facial images as datasets.&lt;br&gt;
• Perform clock in and clock out using face verification.&lt;br&gt;
• Block duplicate attendance attempts in a single day.&lt;br&gt;
• View and export attendance logs to Excel files.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tech Stack Overview&lt;/strong&gt;&lt;br&gt;
• Python — Core programming language.&lt;br&gt;
• Flask — Web framework for routing and interface logic.&lt;br&gt;
• OpenCV — Real-time image capture and face detection.&lt;br&gt;
• face_recognition — Deep learning-based facial recognition.&lt;br&gt;
• Pandas — Data processing and manipulation.&lt;br&gt;
• XlsxWriter / openpyxl — Exporting attendance to Excel.&lt;/p&gt;

&lt;p&gt;**Face Recognition Methods: OpenCV, LBP &amp;amp; CNN&lt;/p&gt;

&lt;p&gt;OpenCV for Real-Time Face Capture**&lt;br&gt;
OpenCV handles webcam access and frame processing :&lt;/p&gt;

&lt;p&gt;video_capture = cv2.VideoCapture(0)&lt;br&gt;
ret, frame = video_capture.read()&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;LBP (Local Binary Pattern)&lt;/strong&gt;&lt;br&gt;
LBP is a fast and lightweight face detection method based on pixel pattern comparisons, ideal for limited-resource systems:&lt;br&gt;
face_cascade = cv2.CascadeClassifier('lbpcascade_frontalface.xml')&lt;br&gt;
faces = face_cascade.detectMultiScale(gray_frame, scaleFactor=1.1, minNeighbors=5)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;CNN (Convolutional Neural Network)&lt;/strong&gt;&lt;br&gt;
For face recognition, the face_recognition library uses a pre-trained CNN model (via dlib) to:&lt;br&gt;
• Detect facial landmarks.&lt;br&gt;
• Generate 128-dimensional face encodings (feature vectors).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;User Interface Overview (Based on the UI PDF)&lt;/strong&gt;&lt;br&gt;
The Flask-based web interface includes:&lt;br&gt;
• &lt;strong&gt;Register Face&lt;/strong&gt; — Capture and store a new user’s facial data.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2irqf3jogdogljpfz4cc.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2irqf3jogdogljpfz4cc.jpg" alt="Image description" width="451" height="203"&gt;&lt;/a&gt;&lt;br&gt;
• &lt;strong&gt;Clock In / Clock Out&lt;/strong&gt; — Attendance via facial recognition.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdl1zuoxso8vt1eruw02u.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdl1zuoxso8vt1eruw02u.jpg" alt="Image description" width="451" height="204"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft6p2g1siywrdv4d0d9lu.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft6p2g1siywrdv4d0d9lu.jpg" alt="Image description" width="451" height="204"&gt;&lt;/a&gt;&lt;br&gt;
• &lt;strong&gt;Attendance History&lt;/strong&gt; — View logs of check-ins and check-outs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frius1xlv5oi5ytfmfswn.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frius1xlv5oi5ytfmfswn.jpg" alt="Image description" width="451" height="205"&gt;&lt;/a&gt;&lt;br&gt;
• &lt;strong&gt;Export to Excel&lt;/strong&gt; — Downloadable attendance data.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Futu9ft2tadcusnw801x1.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Futu9ft2tadcusnw801x1.jpg" alt="Image description" width="451" height="226"&gt;&lt;/a&gt;&lt;br&gt;
• *&lt;em&gt;Timer Settings *&lt;/em&gt;— Control the time windows for valid check-&lt;br&gt;
  ins/outs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr4csqulsmi2kmhyzmrfh.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr4csqulsmi2kmhyzmrfh.jpg" alt="Image description" width="451" height="204"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
