WebGazer JS, Cara Unik Menggerakan Pointer dengan Kalibrasi Mata

Fitur unik dalam suatu web adalah hal yang menarik bagi pengguna web. Web developer harus mempunyai ide yang unik agar web yang dibangun disukai pengguna.

Baru-baru ini, fitur unik dalam web yang berguna menggerakan pointer tanpa mouse telah hadir. Mengapa unik? Karena pointer bisa digerakkan dengan regresi atau pergerakan mata secara langsung sehingga ketika ingin memilih suatu konten web, cukup dengan menggerakan mata saja. Fitur unik ini telah tersedia di library WebGazer JS.

WebGazer JS

WebGazer JS adalah library javascript yang mempunyai fungsi pelacakan mata dengan menggunakan webcam untuk menyimpulkan lokasi mata atau tatapan pengunjung web pada halaman secara real time. Model pelacakan mata ini terdiri dari kalibrasi pelacakan mata dengan melihat pengunjung web yang berinteraksi dengan halaman web dan mengarahkan pemetaan antara fitur mata dan posisi di layar.

WebGazer JS seluruhnya ditulis dalam JavaScript dan hanya memiliki beberapa baris kode saja sehingga dapat diintegrasikan dengan mudah dalam situs web. WebGazer berguna untuk memberi pengalaman pengguna dalam menggunakan aplikasi web maupun website dengan cara yang unik.

Baca juga: Mengenal Three.js, Library JavaScript untuk Membuat Objek 3D pada Browser

WebGazer JS berjalan sepenuhnya di browser klien, sehingga tidak ada data video yang perlu dikirim ke server. WebGazer JS hanya berjalan jika pengguna setuju dalam memberikan akses ke webcam mereka.

Fitur penting dalam WebGazer JS diantaranya:

• Prediksi tatapan atau pelacakan mata secara real-time pada browser
• Tidak memerlukan hardware khusus, WebGazer JS menggunakan webcam standar
• Kalibrasi dengan klik maupun gerakan kursor
• Mudah untuk diintegrasikan dalam web karena hanya memerlukan beberapa baris JavaScript saja
• Komponen swappable untuk deteksi mata
• Variasi model prediksi tatapan

Demo

https://youtu.be/NRLlRh2apA8

Penggunaan

Untuk menggunakan WebGazer JS, Anda perlu menambahkan file WebGazer JS sebagai script dalam situs web:

/* WebGazer.js library */ 
<script src="webgazer.js" type="text/javascript" >/

Setelah script disertakan, objek webgazer dimasukkan ke dalam namespace global. Webgazer memiliki API untuk mengontrol operasi WebGazer JS sehingga memungkinkan kita untuk memulai dan menghentikan kalibrasi mata dan didalamnya bisa ditambahkan fungsi callback atau langsung mengganti modul.

Dua API yang paling penting pada webgazer adalah webgazer.begin() dan webgazer.setGazeListener().  API webgazer.begin() berguna untuk memulai pengumpulan data yang memungkinkan prediksi kalibrasi mata, jadi penting untuk ditulis dalam awal kode. Setelah webgazer.begin() ditulis, WebGazer JS siap untuk mulai memberikan prediksi.

Sedangkan webgazer.setGazeListener() berguna untuk mengakses prediksi ini. API ini memanggil fungsi callback yang diberikan setiap beberapa milidetik untuk memberikan tatapan lokasi melalui pengguna. Jika Anda tidak membutuhkan akses konstan untuk aliran data, Anda bisa menggunakan fungsi alternatif dengan memanggil API webgazer.getCurrentPrediction() yang akan memberikan prediksi pada saat pengguna mengakses web.

webgazer.setGazeListener(function(data, elapsedTime) {
    if (data == null) {
        return;
    }
    var xprediction = data.x; //these x coordinates are relative to the viewport 
    var yprediction = data.y; //these y coordinates are relative to the viewport
    console.log(elapsedTime); //elapsed time is based on time since begin was called
}).begin();

Berikut adalah cara alternatif untuk mendapatkan prediksi di mana Anda dapat meminta prediksi tatapan yang diperlukan.

var prediction = webgazer.getCurrentPrediction();
if (prediction) {
    var x = prediction.x;
    var y = prediction.y;
}

Baca juga: 10 Ekstensi Chrome yang Wajib Diinstal untuk Meningkatkan Produktivitas Programmer Web

WebGazer JS menggunakan API getUserMedia untuk mendapatkan akses ke webcam. Browser yang mendukung API ini diantaranya:

• Google Chrome versi 47 keatas
• Microsoft Edge versi 13 keatas
• Mozilla Firefox versi 44 keatas
• Opera versi 36 keatas

Hmm, sangat unik bukan? Pengalaman pengguna dalam menggunakan web tidak harus menggunakan cara konvensional seperti menggerakan pointer dengan mouse. Cara-cara unik kalibrasi atau pelacakan mata untuk menggerakan pointer juga memberikan pengalaman pengguna yang unik dan menarik. Tertarik mencobanya? Kunjungi situs penyedia WebGazer JS. (yp)