semana-javascript-expert07

JSExpertMax Gesture Controller - Semana JS Expert 7.0

Welcome to the seventh edition of the JavaScript Expert Week. The JSExpertMax Gesture Controller is an innovative project designed to explore the capabilities of hand gesture recognition using JavaScript. This project provides the necessary code infrastructure that participants will need to start their journey towards mastering these skills.

Live Demo

For those interested in experiencing the project firsthand, a live demo is available. Click here to test the final project.

Project Overview

The JSExpertMax Gesture Controller offers a glimpse into the future of user interaction by harnessing the power of hand gestures. Here's a preview of what the project looks like:

Prerequisites

To successfully run the project, participants will need to have Node.js v19.6 installed. It's recommended to operate in a Unix environment, such as Linux. For those using Windows, the Windows Subsystem for Linux is suggested to ensure compatibility with the Linux commands used throughout the lessons.

Important Reminders

Each day at 6 PM, the code for that day's lesson is uploaded in the classes directory. It's important to remove this directory if you're starting fresh.

How to Run the Project

To get started with the project:

1. Run npm ci in the directory containing the package.json file to restore packages.
2. Execute npm start, then open your web browser and visit http://localhost:3000.

Features Checklist

The project's interactive features include:

• Titles List

  • Responsive search field that does not lag.
  • Hand-drawn interface allowing background elements to remain interactive.
  • Scrolling control using open and closed palm gestures.
  • Click execution on the nearest element with a pinch gesture.
  • Triggering hover events when hovering over elements.

• Video Player

  • Control video playback using eye blinks.
  • All machine learning processing is handled via Web Worker.

Challenges

Participants can undertake a series of challenges to deepen their understanding:

• Class 01: Differentiate between right and left eye blinks, updating the log accordingly.
• Class 02: Recognize individual hand gestures and log them.
• Class 03: Adjust the video title banner to appear behind the hand-drawn interface and remain clickable.
• Class 04: Implement virtual hand gestures to control the Video Player.

Advanced Challenge: Implement unit tests with a goal of achieving 100% coverage.

Helpful Links

All links discussed in the lessons can be found in references.

Considerations

For those facing challenges, the community is there to help. Don't hesitate to ask questions and share your achievements in the #desafios channel on Discord.

Frequently Asked Questions (FAQ)

• Issue with browser-sync on Windows:
  If browser-sync is not launching, consider using http-server. Replace browser-sync with http-server, install it with npm i -D http-server, then modify the package.json to use npx http-server . (note: the project won't auto-refresh; manual refresh required).

• WebGL not supported error:
  Verify WebGL settings by visiting chrome://gpu/ in Chrome. Possible solutions include enabling hardware acceleration, updating graphics drivers, or switching to CPU or WebAssembly processing.

Credits

The user interface is based on Streaming Service by Gunnarhawk.

This concludes the introduction to the JSExpertMax Gesture Controller project, a unique opportunity to enhance your skills in JavaScript and gesture recognition technology.