charliegerard / Gaze Detection
Licence: gpl-3.0
👀 Use machine learning in JavaScript to detect eye movements and build gaze-controlled experiences.
Stars: ✭ 376
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Gaze Detection
Redux Requests
Declarative AJAX requests and automatic network state management for single-page applications
Stars: ✭ 330 (-12.23%)
Mutual labels: frontend
Fakerest
Patch fetch/XMLHttpRequest to fake a REST API server in the browser, based on JSON data.
Stars: ✭ 350 (-6.91%)
Mutual labels: frontend
Shader Doodle
A friendly web-component for writing and rendering shaders.
Stars: ✭ 356 (-5.32%)
Mutual labels: creative-coding
Jparticles
A concise, lightweight, and efficient Canvas library for building some cool particle effects.
Stars: ✭ 350 (-6.91%)
Mutual labels: frontend
Beeva Best Practices
Best Practices and Style Guides in BEEVA
Stars: ✭ 335 (-10.9%)
Mutual labels: frontend
Frontend Vscode Extensionpack
(820+ Users) Handpicked collection of vscode extensions for FE development. Get the extension @ https://marketplace.visualstudio.com/items?itemName=solodynamo.frontend-vscode-extensionpack
Stars: ✭ 329 (-12.5%)
Mutual labels: frontend
Multipages Generator
🥇 generator for multiple pages webpack application
Stars: ✭ 354 (-5.85%)
Mutual labels: frontend
Hooks
FullStack | Zero Api | Using "React Hooks" to develop the back-end | Vite
Stars: ✭ 367 (-2.39%)
Mutual labels: frontend
Forum
🍺 Portando discussões feitas em grupos (Facebook, Google Groups, Slack, Disqus) para o GitHub Discussions
Stars: ✭ 3,868 (+928.72%)
Mutual labels: frontend
Pegasus Frontend
A cross platform, customizable graphical frontend for launching emulators and managing your game collection.
Stars: ✭ 364 (-3.19%)
Mutual labels: frontend
Gaze-detection
Use machine learning in JavaScript to detect eye movements and build gaze-controlled experiences!
Demo
Visit https://gaze-keyboard.netlify.app/ (Works well on mobile too!!) 😃
Inspired by the Android application "Look to speak".
Uses Tensorflow.js's face landmark detection model.
Detection
This tool detects when the user looks right, left, up and straight forward.
How to use
Install
As a module:
npm install gaze-detection --save
Code sample
Start by importing it:
import gaze from "gaze-detection";
Load the machine learning model:
await gaze.loadModel();
Then, set up the camera feed needed for the detection. The setUpCamera
method needs a video
HTML element and, optionally, a camera device ID if you are using more than the default webcam.
const videoElement = document.querySelector("video");
const init = async () => {
// Using the default webcam
await gaze.setUpCamera(videoElement);
// Or, using more camera input devices
const mediaDevices = await navigator.mediaDevices.enumerateDevices();
const camera = mediaDevices.find(
(device) =>
device.kind === "videoinput" &&
device.label.includes(/* The label from the list of available devices*/)
);
await gaze.setUpCamera(videoElement, camera.deviceId);
};
Run the predictions:
const predict = async () => {
const gazePrediction = await gaze.getGazePrediction();
console.log("Gaze direction: ", gazePrediction); //will return 'RIGHT', 'LEFT', 'STRAIGHT' or 'TOP'
if (gazePrediction === "RIGHT") {
// do something when the user looks to the right
}
let raf = requestAnimationFrame(predict);
};
predict();
Stop the detection:
cancelAnimationFrame(raf);
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].