ExpertMax

🚀 🟩 Semana JS Expert - 2023 🟩 🚀

Application developed during a JavaScript Event, the JS Expert #07 promoted by @ErickWendel

|   Overview   |    Technologies   |    Project   |   Run   |   Author   |   

| 🛰️ About:

Streaming platform with pure JS CSS HTML, with support for gesture navigation, receives data from the camera and, with user permission of course (privacy in 1st place), processes data with a Google AI that maps the points of your hands and recreates from them a 2d representation of your hand on the screen in real time

Also while identifying hand gestures and interpreting what they mean, translating to a code comman. It has a facial recognition to map the eyes and identify eye blinks, it automatically identifies the blink and translates it into a command in code

All this happening in real time 60 times per second (60 fps), made with performance to run on any potato that dares to show video, compatible with Google, Firefox, Opera GX and other browsers

• Site: ExpertMax - Home Page

• This Site is hosted on Github Pages
• Current Version: 1.0.0

🏗️ | Technologies and Concepts Studied:

• JavaScript
• HTML
• CSS
• Tensorflow
• Webworkers
• Browser-Sync
• MVC
• Desing Patterns
• Camera Handling
• Canvas
• Perfomance

Among Others...

💻 | Application:

• Click on GIFs to open the full HD (1080p) video and see details

This application map 4 gestures with possibilities to expando for more, you can control the screen scroll and click in any place of screen without touch on mouse or screen or any place, just with gestures, you to can control the video player, pausing and resuming with just a blink.

Firefox Demo

Application running on Firefox browser, by the way, firefox browser dont have support to blink detection, but, the application look more fluid.

Brave Demo

Application running on Brave, google chromiun based browser.

✌ | Gestures

| - Scroll Up: [✋]

To Scroll Up you just need to open your hands in front of camera

| - Scroll Down: [✊]

to scroll down you just need to close your hands

| - Mouse Click - [🤏]

To hover you just need to hover your hands through the elements, to click, you just need to make the pinch gesture, i put a dlay of 1 second else it was clicking to many times by second

| Pause / Resume video - [😉]

To pause and resume video, you need to active the facial recognition on button above the video and wait a second to start, when it ready will display a blink counter and you can blink to pause and resume video, stay close to camera for better experience

• This Site is hosted on Github Pages
• Current Version: 1.0.0

👨‍💻 | How to use

Open your Git Terminal and clone this repository

  $ git clone "[email protected]:Samuel-Ricardo/ExpertMax.git"

Make Pull

  $ git pull "[email protected]:Samuel-Ricardo/ExpertMax.git"

You need to have NodeJS on your machine and a package manager (npm, yarn, or other...) to interpret the code and install the dependecies.

  
  # To install all the dependencies 
  $ yarn  
  $ npm install
  $ npm ci


  # To run the project
  $ yarn run start
  $ npm run start

| Author:

- Samuel Ricardo