CoolFace
Apppublic

sy17258/GestureControlledMediaPlayer

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
App README

title: Hand Gesture-Controlled Media Player emoji: 👋 colorFrom: indigo colorTo: purple sdk: docker app_port: 7860 pinned: false ---

Hand Gesture-Controlled Media Player

... ---

Gesture Controlled Media Player

This project is a web-based media player that allows users to control video playback using hand gestures captured through their webcam. It uses MediaPipe's hand tracking and gesture recognition to enable a touchless interface for controlling media playback.

Features

  • —Gesture Controls: Control your media player with simple hand gestures
  • —Open Palm: Play video
  • —Closed Fist: Pause video
  • —Thumbs Up: Increase volume
  • —Thumbs Down: Decrease volume
  • —Victory Sign: Next track
  • —Swipe Left/Right: Navigate between videos
  • —Real-time Hand Tracking: Visualizes hand landmarks and gestures in real-time
  • —Responsive Design: Works on desktop and mobile devices
  • —Local File Playback: Play videos from your local device

How to Use

  1. 1.Click the "Open Camera" button to activate your webcam
  2. 2.Allow camera permissions when prompted
  3. 3.Upload video files using the file selector
  4. 4.Use hand gestures to control playback:
  5. 5.Show an open palm to play
  6. 6.Make a fist to pause
  7. 7.Give a thumbs up to increase volume
  8. 8.Give a thumbs down to decrease volume
  9. 9.Make a victory sign to skip to the next video
  10. 10.Swipe left/right to navigate between videos

Technology Stack

  • —React.js for the UI
  • —MediaPipe for hand tracking and gesture recognition
  • —Web APIs (getUserMedia, Canvas API)
  • —CSS for styling and animations

Privacy

This application processes all video and gesture data locally in your browser. No video or image data is sent to any server.

Limitations

  • —Requires a webcam and browser permissions
  • —Works best in well-lit environments
  • —Performance may vary based on your device's capabilities
  • —Gesture recognition accuracy depends on camera quality and positioning

Future Improvements

  • —Additional gesture controls
  • —Customizable gesture mappings
  • —Support for more media formats
  • —Improved gesture recognition accuracy

Try It Out

Upload your videos and control them with hand gestures - no touch required!

This project was created as a demonstration of computer vision and gesture recognition technologies in web applications.