Cara membuat pengenalan wajah dengan javascript

Hamzah Xou
Hamzah Xou
October 26, 2021

 Menurut Wikipedia JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer, Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT. 

code unik milik javascript sangat banyak dan memiliki fungsi yang berbeda-beda

Biasanya javascript di tempatkan di website agar web menjadi lebih menarik dari animasi nya 

JavaScript bahkan telah diklaim sebagai bahasa pemrograman paling populer yang prinsipnya dapat diterapkan di berbagai produk digital. Maka, bukan hal yang mengherankan jika kebutuhan publik akan JavaScript developer profesional semakin banyak dan akan terus meningkat.


Berikut ini source code javascript pengenalan wajah / face

Untuk membuat nya 

  • Pertama buat folder kosong 
  • Isi folder kosong dengan menambahkan folder baru bernama 
models

  • Setelah itu Download dan exstrak file ini ke dalam folder models
  • Setelah di exstrak . selanjutnya masuk ke apk editor dan buat file 
index.html salin dan pastekan di 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 - hamzah xou</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>


  • Lalu buat file script.js
salin dan pastekan di 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)

})





  • dan yang terakhir Download file face-api.min.js
fie index.html
file script.js
file face-api.min.js
di tempatkan di luar file models lihat gambar dibawah


di jalanan di localhost
proses biasanya 10 detik tunggu saja



Gambar/gif di atas berasal dari github.com/justadudewhohacks/face-api.js


Mungkin sekian tutorial dari saya kembali lagi di postingan selanjutnya



Sumber//www.kopicoding.com
Hamzah Xou