Inspiration

Presentations often depend on a keyboard, mouse, or clicker, which can limit the presenter’s movement and make the presentation feel less natural. We wanted to create a smarter and more interactive way to control slides using only hand gestures through a webcam.

What it does

Gesture Presenter System is a web application that allows users to control presentation slides with hand gestures. Users can move to the next slide, go back to the previous slide, and use pointer mode without touching any physical device.

How we built it

We built the system as a browser-based web application. The webcam captures hand movements, and gesture detection is used to recognize specific gestures in real time. The detected gestures are then converted into slide control actions such as next slide, previous slide, and pointer movement.

Conceptually, the system follows this simple flow:

$$ \text{Webcam Input} \rightarrow \text{Hand Detection} \rightarrow \text{Gesture Recognition} \rightarrow \text{Slide Control} $$

Challenges we ran into

One challenge was making gesture detection accurate and responsive in real time. We also had to design gestures that were simple enough for users to perform but different enough for the system to recognize correctly.

Another challenge was reducing false detection, because small hand movements could sometimes be interpreted as commands.

Accomplishments that we're proud of

We are proud that the system can make presentations feel more modern, smooth, and interactive. We also created a web-based solution that is easy to access without complicated installation.

What we learned

We learned how computer vision can be applied to real-world interaction design. We also gained experience in building a real-time web application that connects gesture recognition with presentation control.

What's next for Gesture Presenter System

Next, we plan to improve gesture accuracy, add more gesture commands, support more presentation formats, and improve the user interface to make the system easier and more professional for real presentation use.

Built With

  • and-vite-as-its-core-technologies.-its-key-features-include-google-mediapipe-for-hand-gesture-detection-and-pdf.js-for-presenting-document-files.-the-interface-is-styled-with-tailwind-css-and-shadcn/ui
  • css
  • mediapipe
  • pdf.js
  • react
  • tailwind
  • typescript
  • vite
Share this project:

Updates

Submission history