Table of Contents

1. About The Project
   • Demo
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Contact

About The Project

For this project, I built out a training application for an Google Chrome Extension I plan to create in the future called Eye Browser Chrome. The goal of Eye Browser is to improve accessibility by allowing users to browse the web with their eyes with the help of their webcams and an eye tracking library called WebGazer.

As a first step toward that goal, I created this training application, Eye Browser, with a series of training modules that allow the user to become accustomed to using eye tracking for cursor movement in a variety of ways. This includes a keyboard module to practice typing on a virtual keyboard with your eyes, a target module to practice precise cursor movement, and also a browser module that simulates a webpage and prompts the user to perform actions. Currently, the eye tracking functionality is limited and will show a red dot on the screen which is a prediction of where the user is looking.

These modules were built with a combination of React and Bootstrap and an ArangoDB database was also used to store user logins and performance. Leaderboards were implemented across the modules to encourage continued practice and reward returning users.

Project Link: https://github.com/ecetino/eye-browser

Demo Link (not optimized for mobile): https://eye-browser-git-master-ecetino.vercel.app/

Demo

Login and Tabs Demo

Keyboard Module Demo

Target Module Demo

Browser Module Demo

Built With

• React
• Express
• Axios
• Bootstrap
• ArangoDB
• WebGazer.js

Getting Started

To get a local copy up and running locally please follow these simple steps.

Or you could view my demo here (not optimized for mobile): https://eye-browser-git-master-ecetino.vercel.app/

Prerequisites

• npm

  npm install npm@latest -g

• ArangoDB
  macOS Installation
  Windows Installation
• Requires a working Webcam for eye tracking functionality

Installation and starting the project

1. Clone the repo and then cd into the repo

   git clone https://github.com/ecetino/eye-browser.git

2. Install NPM packages

   npm install

3. Seed ArangoDB database

   npm run seed

4. Build with Webpack

   npm run build

5. Run with NPM

   npm start

6. Go to localhost:3000 on your browser and to allow eye tracking functionality allow camera access.

Contact