Cara menggunakan face recognition php mysql

Halo semuanya, good to see you again reading this post. Kita akan membuat face detection dengan face-api.js javascript. Minggu karantina ini betul-betul bikin kita cepet bosen. Karena virus covid19 ini, kita jadi harus ngelakuin social distancing yang mana gaboleh keluar rumah kalo gak penting-penting amat. Semoga saja wabah ini cepat berlalu.

Nah, disaat itulah saya merasa bosan karena setelah WFH [work from home] selesai, maka kegiatan saya hanya malas-malasan. Disitulah saya berfikir, kenapa saya gabuat tutorial tentang face detection? Bukankah suatu yang bagus juga untuk diposting.

Face Detection adalah proses pendeteksian wajah dari video atau gambar yang dilakukan oleh komputer dan bukan manusia. Face Detection yang kita akan buat diimplementasikan secara realtime melalui video dari webcam laptop kita di browser.

Disini kita akan implementasi face detection menggunakan library yang namanya face-api.js.

Maka kita mulai saja ya caranya.

Let’s start

Requirements

Pertama, kita masuk ke bagian bahan-bahan dulu yang diperlukan yakni,

• Laptop [yang ada webcamnya yaa]
• Code Editor [VSCode, Sublime Text]
• face-api.js [library based on TensorFlow Core yang membantu kita untuk pendeteksian]
• File pre-trained model [file yang berisi data pendeteksian]
• Browser [saya saranin pakai Chrome]
• Internet dan StackOverflow [kalo-kalo stuck]
• Secangkir kopi, semangat, dan kemauan 🙂

Oke, setelah bahan-bahan telah dimiliki, kita mulai ke tutorialnya. Download dulu library face-api.js yang akan kita gunakan disini.

Struktur Direktori

Struktur direktori dari project ini bisa dilihat di bawah ini yaa

project/
--index.html
--main.js
--face-api.js
--model/
---- *all the models

Menampilkan Output Webcam di Browser

Kita masuk ke tahap yang pertama, buat satu file html seperti di bawah ini. Untuk file index.html dan main.js. Untuk library face-api.js nanti akan kita libatkan selanjutnya :].

index.html

    
    
    CodeSeem Face Detection
    
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #videoEl {
            transform: rotateY[180deg];
            -webkit-transform: rotateY[180deg];
        }
    


    
    

main.js

//Get elemen video untuk menampilkan kamera
const videEl = document.getElementById['videEl'];

//Membuat function untuk menampilkan input webcam di elemen video
async function startCamera[]{
    navigator.mediaDevices.getUserMedia[{video: true}]
    .then[function[stream]{
        videoEl.srcObject = stream;
    }]
    .catch[function[err]{
        console.log['Ada yang error'];
        console.log[err];
    }]
}

startCamera[];

Dengan code diatas, kita sudah bisa menampilkan output dari webcam kita di browser. Hasilnya seperti di bawah ini.

Memulai Implementasi Face Detection

Selanjutnya, setelah kita berhasil menampilkan output dari webcam kita, kita akan mulai untuk mengintegrasikan face-api.js supaya bisa melakukan proses face detection.

Tambahkan satu baris tag script seperti dibawah ini. Kode dibawah diletakkan diatas tag script dari file main.js.

index.html