Pada era teknologi saat ini, kemampuan untuk melacak wajah dalam aplikasi web telah membuka pintu untuk aplikasi yang sangat menarik dan inovatif. Dalam tutorial ini, kita akan membahas cara membuat sistem camera tracking di browser menggunakan Face-API.js.
Face-API.js adalah perpustakaan JavaScript yang memungkinkan kita untuk mendeteksi dan melacak wajah dalam waktu nyata di browser web. Mari mulai!
Catatan
Sebelum kita mulai, pastikan Anda memiliki pengetahuan dasar dalam HTML, JavaScript, dan bekerja dengan Node.js (atau Anda bisa memilih untuk bekerja dalam environment JavaScript lain yang Anda sukai).
Buat Project Baru
Pertama, buat direktori proyek baru dan inisialisasi proyek Node.js dengan menggunakan perintah berikut:
mkdir camera-tracking-tutorial cd camera-tracking-tutorial npm init -y
Install Face-API.js
Sekarang, instal Face-API.js sebagai dependensi proyek dengan perintah npm:
npm install face-api.js
Baca Juga
Membuat Struktur Proyek:
Buat struktur dasar proyek dengan file index.html dan script.js dalam direktori proyek Anda.
Selanjutnya, buka file index.html dan tambahkan struktur HTML dasar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Camera Tracking with Face-API.js</title>
</head>
<body>
<video id="video" autoplay></video>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>Setelah itu, buka file script.js dan mari mulai mengimplementasikan camera tracking dengan Face-API.js
// Import library Face-API.js
const faceapi = require('face-api.js');
const { Canvas, faceDetectionNet, faceDetectionOptions } = faceapi;
// Inisialisasi media stream kamera
const video = document.getElementById('video');
navigator.getUserMedia(
{ video: {} },
stream => video.srcObject = stream,
err => console.error(err)
);
video.onloadedmetadata = () => {
// Mengatur canvas untuk deteksi wajah
const canvas = faceapi.createCanvasFromMedia(video);
document.body.append(canvas);
const displaySize = { width: video.width, height: video.height };
faceapi.matchDimensions(canvas, displaySize);
setInterval(async () => {
// Mendeteksi wajah dalam setiap frame
const detections = await faceapi.detectAllFaces(video, faceDetectionOptions)
.withFaceLandmarks()
.withFaceDescriptors();
const resizedDetections = faceapi.resizeResults(detections, displaySize);
canvas
.getContext('2d')
.clearRect(0, 0, canvas.width, canvas.height);
// Menggambar kotak di sekitar wajah yang terdeteksi
faceapi.draw.drawDetections(canvas, resizedDetections);
}, 100);
};Kini, Anda siap untuk menjalankan aplikasi Anda. Buka terminal, pergi ke direktori proyek Anda, dan jalankan aplikasi dengan perintah:
npm start
Ini akan membuka aplikasi dalam browser Anda, menampilkan video dari kamera perangkat Anda dengan kotak di sekitar wajah yang terdeteksi.
Anda dapat mengkustomisasi lebih lanjut aplikasi ini, seperti menambahkan tindakan saat wajah terdeteksi atau menggambar elemen tambahan pada wajah yang terdeteksi.
Selamat! Anda baru saja membuat aplikasi camera tracking di browser menggunakan Face-API.js. Dengan pengetahuan ini, Anda dapat mengembangkan aplikasi yang lebih canggih dengan deteksi wajah dalam browser Anda.