GesturePresenter
Control Slides with just hand gestures!
GesturePresenter enables users to control slide presentations through hand gestures, utilizing any device with web access and a camera. This project leverages Google's MediaPipe Hands for gesture recognition and consists of a three-part system: a Remote website, a Chrome extension, and a backend server.
Key Components
-
Remote Website : Developed with ReactJS, this website uses your device's camera to recognize hand gestures for slide control.
-
Chrome Extension : Facilitates navigation through a Google Slides presentation by communicating with the Remote Website via WebSockets.
-
Backend Server : A Python3 Flask server that connects the Remote Website with the Chrome Extension, ensuring seamless interaction between the two.
Quick Links
Screenshots
Getting Started
Prerequisites
-
Node.js and npm: Required for setting up the frontend website. Download from nodejs.org , which includes npm.
-
Python 3 and pip: Needed for the backend server. Available for download at python.org .
-
Chromium Browser: Necessary for installing and using the Chrome Extension.
Installation Guide
Setting Up the Frontend Website
-
Clone the Repository : Obtain the GesturePresenter codebase.
git clone https://github.com/anonymousaaardvark/gesture-presenter.git
cd GesturePresenter/frontend
-
Install Dependencies : Get all required libraries.
npm install
Development and Deployment
-
Development Server :
npm start
launches the app in development mode.
-
Production Build :
npm run build
compiles the app for production.
-
GitHub Pages Deployment :
npm run deploy
pushes the build to the gh-pages
branch.
Setting Up the Backend Server
-
Navigate and Install : Move to the backend directory and set up.
cd GesturePresenter/backend
pip install -r requirements.txt
-
Launch the Server : Start the Flask application with
python app.py
.
Installing the Chrome Extension
-
Prepare the Extension : Switch to the chrome-extension directory and install dependencies.
cd GesturePresenter/chrome-extension
npm install
-
Build and Load : Compile the extension and add it to Chrome.
- Build:
npm run build
- Develop:
npm run watch
- Load in Chrome: Enable Developer Mode in
chrome://extensions/
, choose "Load unpacked", and select the build directory.
Using GesturePresenter
After installation, navigate to a Google Slides presentation in Chrome, use the GesturePresenter website on another device for gesture recognition, and control your presentation seamlessly.
Contributing
Contributions are welcome! To contribute:
- Fork the repository.
- Create your feature branch:
git checkout -b feature/AmazingFeature
.
- Commit your changes:
git commit -am 'Add some AmazingFeature'
.
- Push to the branch:
git push origin feature/AmazingFeature
.
- Open a Pull Request.
License
GesturePresenter is licensed under the MIT License. For more details, see the LICENSE.md file.