FACE DETECTION MENGGUNAKAN JAVASCRIPT SEBAGAI FILTER AWAL PRESENSI BERBASIS WEB. Abstrak

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


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


masuk untuk diteliti apakah foto pegawai

});

benar-benar sesuai dengan ID pegawai

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,


$.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

<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


}, errorCallback);

6


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


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


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

FACE DETECTION MENGGUNAKAN JAVASCRIPT SEBAGAI FILTER AWAL PRESENSI BERBASIS WEB. Abstrak

Recommend Documents