1 FACE DETECTION MENGGUNAKAN

KOMPUTAKI Vol. 2 No. 1 Februari 2016
FACE DETECTION MENGGUNAKAN JAVASCRIPT SEBAGAI FILTER AWAL
PRESENSI BERBASIS WEB
Anggy Trisnawan Putra
Jurusan Ilmu Komputer, FMIPA, Universitas Negeri Semarang
Email: [email protected]
Abstrak
Presensi berbasis web merupakan salah satu alternatif praktis diantara berbagai macam
metode aplikasi presensi pegawai. Foto presensi yang diambil menggunakan webcam
komputer banyak yang tidak standar, misalnya wajah tidak lurus (tampak samping), hanya
tampak sebagian saja, bahkan ada yang sengaja tidak menampakkan wajah. Fakta semacam
ini menyebabkan pemrosesan lanjutan berupa pengenalan wajah (face recognition) maupun
monitoring pimpinan menjadi tidak efisien. Pemanfaatan javascript sebagai gerbang untuk
menjaga input foto pegawai supaya lebih tertib dapat dilakukan dengan cara menerapkan
algoritma face detection sebelum pengambilan foto. Foto tidak akan diambil jika posisi
wajah tidak sesuai dengan ketentuan, sehingga kualitas foto pegawai yang dikirim ke server
menjadi lebih baik.
Kata kunci : Face detection, Javascript, Presensi web
tidaklah tahan banting (mudah rusak)
1. Pendahuluan
Presensi merupakan salah satu cara
(Ginting, 2010). Selain itu, di beberapa
untuk mendisiplinkan pegawai. Metode
kasus juga ditemui bahwa alat ini tidak
presensi dapat dilakukan dengan berbagai
dapat mendeteksi/mengenali sidik jari
cara, mulai dari cara manual (tanda tangan
seseorang (Septiyaning, 2015). Selain itu,
di lembar presensi) sampai dengan otomasi
hasil penelitian pada (Angraini, 2009)
via
teknologi
teknologi
informasi.
Beberapa
mengatakan bahwa terdapat faktor-faktor
dapat
digunakan
yang menghambat penerapan teknologi
yang
diantaranya adalah fingerprint, webcam,
fingerprint
mesin absensi retina, dsb. Dengan adanya
instruksi penggunaan sistem yang minim,
pemanfaatan teknologi informasi terbukti
dan kecepatan waktu penggunaan sistem
bahwa
yang tidak efisien.
kecurangan-kecurangan
yang
terjadi pada metode presensi manual dapat
dikurangi (Angraini, 2009).
Kecanggihan
dari
yaitu
motivasi
pengguna,
Presensi berbasis web merupakan
salah satu alternatif yang murah dan
teknologi
praktis
untuk
memenuhi
kebutuhan
informasi ini rupanya tidak luput dari
presensi pegawai. Selain dari fakta bahwa
kelemahan. Misalnya saja untuk mesin
perangkatnya yang sangat terjangkau dan
fingerprint, alat pemindai sidik jari ini
tidak mudah rusak, implementasinya pun
1
Face Detection Menggunakan Java Script Sebagai Filter Awal Presensi Berbasis Web
(Anggy Trisnawan Putra)
tidak
serumit
metode
yang
sudah
Proses
face
recognition
baik
disebutkan sebelumnya. Presensi ini hanya
manual maupun terkomputerisasi tentunya
membutuhkan webcam, komputer yang
membutuhkan sumber foto yang bagus dan
terkoneksi dengan jaringan internet /
jelas. Padahal, pada kenyataannya di
intranet,
lapangan,
dan
browser
yang
akan
tidak
semua
pegawai
menampilkan antarmuka aplikasi presensi
memposisikan wajahnya secara benar di
untuk selanjutnya mengirim foto pegawai
depan webcam. Banyak diantara foto yang
ke server setiap kali presensi dilakukan.
terkirim
Setelah itu, sistem dapat melakukan proses
misalnya saja tertutup helm, menggunakan
face recognition untuk menentukan apakah
masker, blur/kabur, atau bahkan tidak ada
foto tersebut benar-benar foto pegawai
wajah
yang ada. Proses ini dapat dilakukan
menghambat proses selanjutnya karena
secara manual dengan melibatkan atasan
presensi dengan cara ini sangat bergantung
langsung dari pegawai yang bersangkutan
pada input foto pegawai. Tanpa foto yang
tanpa bantuan sistem.
bagus, proses verifikasi sistem tidak akan
ke
server
sama
sekali.
berjalan
tidak
Tentu
memadai,
saja
dengan
ini
baik.
Gambar 1. Contoh foto presensi yang tidak baik (sumber : simpeg.unnes.ac.id)
Algoritma face recognition secara
sia. Pada platform perangkat bergerak,
realtime seperti yang sudah diteliti di
misal android,
(Walgamage, 2014) menggunakan server
menggunakan native face detection API
backend yang melakukan proses secara
yang sudah tersedia sejak android versi 4.0
otomatis
(Walgamage, 2014).
dengan
perintah
antarmuka
aplikasi pengambil foto. Di dalamnya juga
face detection dilakukan
Face detection pada platform PC
dijelaskan bahwa proses face detection
(personal
sangatlah penting dilakukan sebelum foto
browser
dikirim ke server untuk menjamin bahwa
menggunakan perangkat lunak openCV
proses face recognition tidak berjalan sia-
melalui web service. Foto dikirimkan dari
2
computer)
dapat
menggunakan
dilakukan
dengan
KOMPUTAKI Vol. 2 No. 1 Februari 2016
web browser menuju server yang terinstall
saat
openCV, lalu diproses untuk dikembalikan
kemampuannya yang dapat berjalan di sisi
ke
client, Javascript memiliki keunggulan
web
koordinat
browser
wajah
(Rosebrock, 2015).
dengan
yang
informasi
ditemukan
ini
yaitu
(Rosebrock,
dapat
2015).
memanfaatkan
Dengan
resource
Proses ini tentu
masing-masing komputer client tanpa
membutuhkan resource yang tidak sedikit
membebani server. Dengan memanfaatkan
karena terdapat proses pengiriman ke
Javascript, algoritma face detection dapat
server, proses face detection, lalu dikirim
diterapkan tanpa melibatkan resource
kembali
server
untuk
proses
selanjutnya.
sama
sekali.
Dengan
Walaupun dapat diteruskan ke proses face
kemampuannya yang interaktif, Javascript
recognition yang dapat juga dilakukan
dapat diatur supaya foto hanya dikirimkan
oleh open CV tanpa kembali ke web
pada saat Javascript dapat menemukan
browser secara langsung, proses ini akan
wajah pegawai yang melakukan presensi.
menjadi sia-sia ketika foto yang dikirim
Dengan begitu, dapat dipastikan bahwa
ternyata tidak memenuhi standar foto yang
foto yang terkirim ke server berkualitas
baik.
baik.
Javascript telah dikenal sebagai
2. Kajian Pustaka
bahasa pemrograman yang tertanam di
Pada
(Nash,
2013)
dijelaskan
setiap browser. Bersama HTML dan CSS,
algoritma face detection menggunakan
Javascript
web browser yang mengakses server
merupakan
salah
satu
komponen penting di dalam teknologi web
terinstall openCV.
Gambar 2. Diagram algoritma face detection menggunakan openCV (Nash, 2013)
Langkah-langkah dalam proses tersebut di
4. Face-detect.php membaca pesan log
atas adalah sebagai berikut (Nash, 2013).
yang
dihasilkan
dan
mengirim
1. Pengguna mengunggah gambar.
kembali dengan bentuk JSON untuk
2. Face-detect.php mengirim gambar
dibaca di antarmuka web.
yang terunggah ke face-detect.exe.
3. Face-detect.exe mendeteksi wajah
dan menulis pesan log.
Sama halnya dengan langkah di
atas,
proses
serupa
dilakukan
di
(Kurniawan, 2014), dengan menggunakan
openCV, server mengolah data foto yang
3
Face Detection Menggunakan Java Script Sebagai Filter Awal Presensi Berbasis Web
(Anggy Trisnawan Putra)
masuk untuk diteliti apakah foto pegawai
});
benar-benar sesuai dengan ID pegawai
</script>
yang melakukan foto. Alangkah sayangnya
Setelah JFDP selesai melakukan
jika proses yang sedemikian berat ini tidak
proses, callback complete memiliki satu
didukung dengan kualitas foto yang
variabel
memadai.
ditemukan. Apabila memang ditemukan
Tulisan ini fokus pada langkah
sebelum
aplikasi
mengirim
foto
yaitu
object
wajah
wajah, variabel ini akan berisi informasi
sebagai berikut.
(mengunggah gambar) ke server. Library
1. x — koordinat X wajah pada foto
yang digunakan dalam tulisan ini adalah
2. y — koordinat Y wajah pada foto
jQuery Face Detection Plugin (JFDP) yang
3. width — lebar wajah
ditulis
4. height — tinggi wajah
oleh
Jay
Salvat
(https://github.com/jaysalvat/jquery.facede
jQuery Face Detection Plugin
JFDP
detection
6. positionY — posisi Y relatif terhadap
halaman web
(JFDP)
dengan
5. positionX — posisi X relatif terhadap
halaman web
tection).
2.1
ditulis
oleh
memanfaatkan
Jay Salvat
algoritma
dari
(https://github.com/liuliu/ccv).
face
Liu-Liu
JFDP
mampu mendeteksi wajah yang ada pada
gambar dan video lalu memberitahu
koordinat dari wajah yang ditemukan.
JFDP memiliki beberapa callback, salah
satunya yang akan dimanfaatkan adalah
7. offsetX — posisi X relatif terhadap
induk
8. offsetY — posisi Y relatif terhadap
induk
9. scaleX — rasio antara lebar foto asli
dengan lebar yang ditampilkan
10. scaleY — rasio antara tinggi foto asli
dengan tinggi yang ditampilkan
11. confidence — tingkat kepercayaan
callback complete. Callback ini akan
diri
berikan ketika JFDP selesai melakukan
2.2 jQuery
jQuery digunakan untuk membantu
proses deteksi wajah pada foto.
<script>
$('#picture').faceDetection({
complete: function (faces) {
console.log(faces);
}
4
yang
dalam proses pengiriman foto ke server
secara asynchronous. Contoh pengiriman
data menggunakan jQuery adalah sebagai
berikut
2010):
(JQuery
Community
Experts,
KOMPUTAKI Vol. 2 No. 1 Februari 2016
$.ajax({
type: „POST‟,
url: „hello-ajax.html‟,
dataType: 'html',
success: function(html, textStatus) {
$('body').append(html);
},
error: function(xhr, textStatus, errorThrown) {
alert('An error occurred! ' + errorThrown);
}
});
(streaming) (Bidelman, 2012) di tag
2.3 HTML5 Canvas
Javascript dapat digunakan untuk
mengakses
ditampilkan
kamera
secara
(webcam)
terus
untuk
HTML5 video dengan cara sebagai berikut
:
menerus
<video autoplay></video>
<script>
var errorCallback = function(e) {
console.log('Rejected!', e);
};
// Not showing vendor prefixes.
navigator.getUserMedia({video: true, audio: true},
function(localMediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
// Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
// See crbug.com/110938.
video.onloadedmetadata = function(e) {
// Ready to go. Do some stuff.
};
5
Face Detection Menggunakan Java Script Sebagai Filter Awal Presensi Berbasis Web
(Anggy Trisnawan Putra)
}, errorCallback);
</script>
6
KOMPUTAKI Vol. 2 No. 1 Februari 2016
Tampilan pada kanvas HTML5 dapat
Contoh kodenya adalah sebagai berikut
diambil
(Jenkov, 2014) :
dengan
fungsi
toDataURL().
var canvas = document.getElementById("ex1");
var dataUrl = canvas.toDataURL();
yang ada di tag video ke dalam tag
3. Metode
Tulisan
pendekatan
ini
menggunakan
metode
pengembangan
penelitian
(research
development)
dalam
hal
HTML5 canvas secara terus menerus
dan
(dalam tulisan ini dibuat setiap 33
and
milidetik). Pada saat pegawai menekan
pemanfaatan
tombol
“presensi”
atau
semacamnya,
javascript sebagai filter foto presensi
sebuah kode javascript dijalankan. Kode
pegawai
Javascript
ini mengambil gambar pada kanvas lalu
digunakan untuk menjalankan algoritma
diletakkan pada tag HTML img (dibuat
face
hidden), selanjutnya dibaca oleh JFDP
berbasis
web.
detection
dengan
manipulasi/penggabungan
berbagai
untuk dilakukan proses face detection.
macam teknik yang sudah ada.
Apabila
proses
face
detection
selesai, cek apakah wajah ditemukan. Jika
4. Hasil dan Pembahasan
Penggabungan berbagai teknik di
iya, lanjutkan proses presensi dengan
dalam HTML5, jQuery, dan Javascript
mengirim
telah berhasil dilakukan dan menghasilkan
menggunakan jQuery. Apabila wajah tidak
aplikasi presensi berbasis web yang telah
ditemukan,
mengandung filter face detection. Cara
menampilkan informasi supaya pegawai
kerja
memposisikan wajahnya dengan benar.
aplikasi
web
presensi
dapat
dijabarkan dalam langkah-langkah sebagai
gambar/foto
aplikasi
ke
presensi
server
akan
Proses presensi berbasis web yang
berikut:
disajikan dalam tulisan ini berfokus pada
Javascript digunakan untuk mengakses
proses
webcam
menangkap
sebelum foto pegawai yang akan dikirim
gambar dan ditampilkan secara terus-
ke server. Dengan adanya filter ini, foto
menerus
video.
pegawai yang terkirim ke server dapat
Menggunakan teknik menggambar pada
dipastikan berkualitas baik. Berikut ini
sehingga
pada
tag
dapat
HTML5
face
detection
sebagai
filter
kanvas HTML5, salin dan tempel gambar
7
Face Detection Menggunakan Java Script Sebagai Filter Awal Presensi Berbasis Web
(Anggy Trisnawan Putra)
adalah contoh pengambilan foto pegawai
yang tidak baik.
Gambar 3. Presensi yang gagal karena wajah tidak tampak seluruhnya
Pada gambar di atas jelas terlihat
yang melakukan presensi akan berusaha
bahwa wajah yang tidak tampak secara
menempatkan/memposisikan
wajahnya
keseluruhan tidak dapat diterima oleh
sampai dapat diterima oleh sistem. Berikut
algoritma face detection. Jadi, pegawai
ini adalah contoh presensi yang berhasil.
Gambar 4. Presensi yang berhasil dilakukan karena wajah tampak jelas
Pada gambar di atas terlihat bahwa
baik
untuk
diproses
presensi yang dilakukan dengan wajah
kebutuhan sistem.
yang lurus dan jelas dapat diterima oleh
5. Kesimpulan
sesuai
dengan
sistem. Selanjutnya, foto akan dikirimkan
Javascript telah berhasil diterapkan
ke server presensi dengan kualitas yang
sebagai media filter foto presensi pegawai
berbasis web dengan mengaplikasikan
8
KOMPUTAKI Vol. 2 No. 1 Februari 2016
algoritma
face
detection.
Dengan
menerapkan metode ini, terbukti bahwa
pegawai yang presensi tidak bisa lagi
semaunya
sendiri.
Pegawai
harus
menempatkan wajahnya sedemikian rupa
sehingga webcam dapat menangkap wajah
secara utuh dan jelas. Dengan begitu,
harapannya pegawai dapat lebih tertib di
dalam melakukan presensi setiap harinya.
6. Daftar Pustaka
Angraini. 2009. Audit Implementasi
Biometrics Fingerprint (Studi Kasus
Sistem Presensi Stmik Amikom
Yogyakarta). Prosiding Seminar
Nasional
Aplikasi
Teknologi
Informasi 2009 (SNATI 2009).
Yogyakarta, 20 Juni 2009
Bidelman, E. 2012. Capturing Audio &
Video
in
HTML5.
http://www.html5rocks.com/en/tutori
als/getusermedia/intro/, diakses 16
Oktober 2015
Ginting, K. 2010. Mesin Absensi
“Fingerprint”
Rusak.
http://www.kompasiana.com/korneli
usginting/mesin-absensi-finger-printrusak_550058478133111918fa75e6,
diakses 16 Oktober 2015
Jenkov, J. 2014. HTML5 Canvas:
toDataURL().
http://tutorials.jenkov.com/html5canvas/todataurl.html, diakses 16
Oktober 2015
jQuery Community Experts. 2010. jQuery
Cookbook. O‟Reilly Media, Inc.,
California
Kurniawan, L.M. 2014. Metode Face
Recognition
untuk
Identifikasi
Personil Berdasar Citra Wajah bagi
Kebutuhan
Presensi
Online
Universitas
Negeri
Semarang.
Scientific Journal of Informatics.
Vol 1(2): 210-220.
Nash. 2013. Web based interface for face
detection
with
OpenCV.
http://opencvcode.com/projects/web-basedinterface-for-face-detection-withopencv/, diakses 16 Oktober 2015.
Rosebrock, A. 2015. Creating a face
detection API with Python and
OpenCV (in just 5 minutes).
http://www.pyimagesearch.com/2015
/05/11/creating-a-face-detection-apiwith-python-and-opencv-in-just-5minutes/, diakses 16 Oktober 2015.
-------.
2015.
Javascript.
https://en.wikipedia.org/wiki/JavaScr
ipt, diakses 16 Oktober 2015
Septiyaning W., I. 2015. Mesin Presensi
Minim, PNS Solo Mengeluh ke
BKD.
http://www.solopos.com/2015/04/10/
disiplin-pns-mesin-presensi- minimpns-solo-mengeluh-ke-bkd-593435,
diakses 16 Oktober 2015
Walgamage, T., Farook, C. 2014. A Realtime Hybrid Approch for Mobile
Face Recognition. 2014 Fifth
International
Conference
on
Intelligent Systems, Modelling and
Simulation. Malaysia, 27 Jan-29 Jan
20
9