hyunuk/blinkr

Blinkr is the Chrome Extension that detects eye blink and notify users to prevent their eye dry out.

About the project

blinkr is the Chrome Extension that detects eye blink and notify users to prevent their eye dry out.

You can try it via the Chrome web store!

Built with

• Chrome Extension
• Javascript
• HTML/CSS
• face-api.js

Getting Started

Prerequisite

This app is a Chrome extension, so you must have the latest version of Chrome browser.

Installation

1. Clone the repo with the following command on your cli. git clone [email protected]:hyunuk/blinkr.git
2. Open Chrome and go to the extensions
3. Activate Developer mode and click Load unpacked
4. Select the folder you cloned.
5. Once you select the right folder, you can click the extentions button on the top right of your browser. Find blinkr and pin it.
6. Click the eye icon on the top right and click blink!
7. This will open a new Chrome tab and start the video.
8. It will detect your blinks and let you know if you have blinked less than 7 times per minute.

Roadmap

See the open issues for a list of proposed features (and known issues).

Contact

Hyunuk Lim

• 💼 LinkedIn: https://linkedin.com/in/hyunuk
• 🎒 Website: https://hyunuk.github.io
• 📫 [email protected]

Hansol Yang

• 💼 LinkedIn: https://linkedin.com/in/hansolyang/
• 🎒 Github: https://github.com/hansol-y
• 📫 [email protected]

Jeemin Kim

• 💼 LinkedIn: https://linkedin.com/in/kim-jeemin/
• 🎒 Github: https://github.com/merikurisalad
• 📫 [email protected]

blinkr's Issues

offscreen doesn't work

The main task after we completed the hackathon was hiding the video and make it work in the background.
I found the chrome.offscreen api so that it worked in the local, but it doesn't work when I published it.
This is due to the bug reported in here and it haven't been resolved yet.

So I will work on opening a new tab, which was our initial design, but without video explicitly.

Setting up the repo

create necessary files for the chrome extension

delete content.js from the content script.

Using content scripts requires host permission in a matched websites.
The problem is that adding host permission requires an in-depth review and will delay publishing.

Improvement: run without app.js

Currently, the app requires at least one tab.
We will investigate running the app in the background.

Prototyping the counter

• Create a button using JS
• when a user clicks a button, increment the counter
• shows the number of clicks within 60 seconds.

Face recognition using OpenCV

• Using OpenCVjs, the app can recognize a person's face.
• recognize a person's eye
• recognize a person's eye blink
• count the number of blinking with the timestamp

Improve process by skipping <video> element.

Currently, the current process is like this:

• Capturing video from the webcam
• Sending video stream to html
• Displaying on the html
• detecting face using face-api.js

For the third process, we need to output the video on the html, this app requires opening at least one tap.

I would like to improve the process using createCanvasFromMedia method in the face-api.js, which can make using face-api without the

UX improvement: change icon

We will remove the current html file and the app will be run in the background.
To do this, we will change the icon color if the blink count is low, especially less than 5/min for red and 12/min for yellow.
Also, the notification needs to be investigated.