Absensi camera wajah dengan php mysql zip

Tutorial Deteksi Wajah Dengan Javascript – Hallo sobat kopi coding, pada tutorial kali ini kita akan mempelajari bagaimana cara membuat aplikasi web untuk mendeteksi wajah dengan javascript secara realtime.

Table of Contents Show

Persiapan :
Langkah 1 : Menambahkan model kedalam folder models
Langkah 2 : Menambahkan file face api kedalam folder project
Langkah 3 : Membuat file index.html
Langkah 3 : Membuat file script.js
Langkah 4 : Menjalankan aplikasi web dengan Live Server

Face recognition atau pengenalan wajah adalah sebuah teknologi yang mampu mengidentifikasi atau memverifikasi wajah seseorang dari gambar digital atau video.

Dalam tutorial ini kita akan mendeteksi wajah real time melalui webcam menggunakan AI. AI ini sangat cepat sehingga kita dapat menggambar secara real time berbagai wajah dan ekspresi setiap orang dalam video tanpa banyak overhead kinerja. Kita akan menggunakan Face API JS Library yang dibangun di atas TensorFlow untuk mendeteksi wajah. Pada akhir video ini, Anda akan memiliki deteksi wajah real-time yang berfungsi penuh di situs Anda yang dapat digunakan dengan kamera web atau webcam apa pun.

Konsep dari tutorial ini sebagai berikut :

Streaming webcam melalui HTML
Menggunakan Face API untuk mendeteksi wajah secara real time
Menggambar pola wajah secara real time
Mengidentifikasi emosi melalui ekspresi wajah secara real time

Yuk langsung saja kita eksekusi tutorial kali ini…

Persiapan :

Ada beberapa tools yang harus dipersiapkan sebelum melakukan tutorial kali ini, berikut adalah tools yang digunakan:

Visual Studio Code
Live Server (Extension VSCode)
Face Api Library

Struktur Direktori Project :

Langkah 1 : Menambahkan model kedalam folder models

Download file model berikut dan ekstrak kedalam folder models.

models.zip

Langkah 2 : Menambahkan file face api kedalam folder project

Download file face-api.min.js berikut dan pindahkan kedalam folder project

face-api.min.js

Langkah 3 : Membuat file index.html

Buat file index.html di dalam folder project lalu masukkan code dibawah ini dan simpan.

File index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Deteksi Wajah - Kopi Coding</title>
    <script defer src="face-api.min.js"></script>
    <script defer src="script.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      canvas {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <video id="video" width="720" height="560" autoplay muted></video>
  </body>
</html>

Langkah 3 : Membuat file script.js

Buat file script.js di dalam folder project lalu masukkan code dibawah ini dan simpan.

File script.js

const video = document.getElementById('video')

Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(startVideo)

function startVideo() {
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )
}

video.addEventListener('play', () => {
  const canvas = faceapi.createCanvasFromMedia(video)
  document.body.append(canvas)
  const displaySize = { width: video.width, height: video.height }
  faceapi.matchDimensions(canvas, displaySize)
  setInterval(async () => {
    const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
    const resizedDetections = faceapi.resizeResults(detections, displaySize)
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
    faceapi.draw.drawDetections(canvas, resizedDetections)
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
    faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
  }, 100)
})

Langkah 4 : Menjalankan aplikasi web dengan Live Server

Untuk menjalankan aplikasi web dengan Live Server dengan cara klik kanan pada file index.html lalu pilih Open With Live Server.

Menjalankan aplikasi web dengan Live Server

Hasil :

Secara otomatis Live Server akan membuka aplikasi browser serta menampilkan web dengan URL http://127.0.0.1:5500/index.html

Sekian tutorial cara membuat aplikasi web untuk deteksi wajah dengan javascript, semoga bermanfaat..

Happy Coding 🙂

Sumber : webdevsimplified.com

About The Author

aribambang

Media belajar Bahasa Pemograman Indonesia yang gratis dan lengkap dengan konten yang mudah dipahami. "Everybody in this country should learn to program a computer, because it teaches you how to think" - Steve Jobs