Tutorial Deteksi Wajah Dengan Javascript

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.

Tutorial Deteksi Wajah Dengan Javascript

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:

Struktur Direktori Project :

Folder project
|– models (folder)
|—— face_expression_model-shard1
|—— face_expression_model-weights_manifest.json
|—— face_landmark_68_model-shard1
|—— face_landmark_68_model-weights_manifest.json
|—— face_landmark_68_tiny_model-shard1
|—— face_landmark_68_tiny_model-weights_manifest.json
|—— face_recognition_model-shard1
|—— face_recognition_model-shard2
|—— face_recognition_model-weights_manifest.json
|—— tiny_face_detector_model-shard1
|—— tiny_face_detector_model-weights_manifest.json
|—face-api.min.js
|—index.html
|—script.js

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
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

Share Post:

Add a Comment

Your email address will not be published. Required fields are marked *