Home  ›  JavaScript

Tutorial Deteksi Wajah Dengan Javascript

Written By Monday, April 6, 2020 Add Comment Edit
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.

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 :

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <title>Deteksi Wajah - Kopi Coding</title>
  8. <script defer src="face-api.min.js"></script>
  9. <script defer src="script.js"></script>
  10. <style>
  11. body {
  12. margin: 0;
  13. padding: 0;
  14. width: 100vw;
  15. height: 100vh;
  16. display: flex;
  17. justify-content: center;
  18. align-items: center;
  19. }
  21. canvas {
  22. position: absolute;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <video id="video" width="720" height="560" autoplay muted></video>
  28. </body>
  29. </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

  1. const video = document.getElementById('video')
  3. Promise.all([
  4. faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  5. faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  6. faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  7. faceapi.nets.faceExpressionNet.loadFromUri('/models')
  8. ]).then(startVideo)
  10. function startVideo() {
  11. navigator.getUserMedia(
  12. { video: {} },
  13. stream => video.srcObject = stream,
  14. err => console.error(err)
  15. )
  16. }
  18. video.addEventListener('play', () => {
  19. const canvas = faceapi.createCanvasFromMedia(video)
  20. document.body.append(canvas)
  21. const displaySize = { width: video.width, height: video.height }
  22. faceapi.matchDimensions(canvas, displaySize)
  23. setInterval(async () => {
  24. const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
  25. const resizedDetections = faceapi.resizeResults(detections, displaySize)
  26. canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
  27. faceapi.draw.drawDetections(canvas, resizedDetections)
  28. faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
  29. faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
  30. }, 100)
  31. })

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


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

0 Response to "Tutorial Deteksi Wajah Dengan Javascript"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel