A Vuejs web solution for Attendance Tracking System (ATS)

Attendance Tracking System

A VueJs web progressive application for ATS (attendance tracking system).

ATS web is a Vuejs Progressive web application, which work on any machine which is having camera inbuilt including mobile devices, it is powered with TensorflowJs Face identification library trained by for face tracking and Azure API for accuret Face matching.

Features!

• Import Your picture via URL and it will get trained automatically for face match with name.
• It Tracks and Identifies face.
• On each encounter it changes status from Entry to Exit and vice versa.

You can also:

• Deploy this web app on Linux server.
• In a Doker container
• Even on github pages as i have did : atsweb

Tech

ATS uses a number of open source projects:

• vuejs - The Progressive JavaScript Framework
• TensorflowJs- face-api.js - For face tracking and matching!
• bootstrap Design - An awesome and the world’s most popular framework for building responsive, mobile-first sites.
• Animate.js - For animation's, must have library!
• SweetAlert.js - SweetAlert for Bootstrap a beautiful replacement for JavaScript's "alert"
• axios - axios a promise based HTTP client for the browser and node.js
• github - Hosting this project on github.
• JsonAPI - My JSON Server an instant Json API server for app's

And of course ATS itself is an open source ats on GitHub.

Installation

• Fake Online REST server for teams
• ATS web requires face-api.min.js and it's modules to be vailable in source directory.
• Any Json based API to pull user details.

Sample Json API response

[
  {
    "id": "5e830aa31c9d440000b91e06",
    "name": "Anand Tiwari",
    "image": "https://res.cloudinary.com/dq3npvyjj/image/upload/v1585571840/anand_lnkdn_yzmu5g.jpg",
    "entry": "",
    "exit": "",
    "status": "enter"
  }
  ]

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

License

MIT