Skip to content

Latest commit

 

History

History
70 lines (47 loc) · 2.96 KB

README.md

File metadata and controls

70 lines (47 loc) · 2.96 KB
Raw

AlternateWebApp Interaction Project

My Skills

Project Overview

Welcome to Alternate Interaction December 2022, an innovative and immersive web experience that redefines the process of rating random photos. Our responsive website seamlessly integrates hand gestures, allowing users to express their preferences effortlessly through their laptop cameras. By harnessing the power of the Hantrack.js library, we've crafted an interactive environment where image interaction becomes not just a task but an engaging and intuitive journey.

Key Features

Responsive Design

The website offers a seamless experience across devices, adapting to different screen sizes. Whether on a laptop, tablet, or smartphone, the interface ensures a consistent and user-friendly layout.

Hand Gesture Recognition

Utilizing the Hantrack.js library, the website recognizes various hand gestures captured through the laptop camera. Users can swipe, pinch, or wave to dynamically and intuitively rate photos.

REST APIs from Unsplash

Integration with Unsplash's REST APIs provides a diverse collection of random, high-quality photos. Users can immerse themselves in a visually stunning journey, exploring and rating captivating images with simple hand movements.

How It Works

  1. Camera Interaction: Grant access to your laptop camera for gesture recognition.
  2. Hand Gesture Recognition: Hantrack.js interprets real-time hand movements.
  3. API Integration: Retrieve random Unsplash photos through REST APIs.
  4. Intuitive Rating: Express preferences through hand gestures to rate displayed images.

Getting Started

1. Clone the Project

2. Navigate to the Project Directory

  • cd [project-directory]

3. Install Angular

  • Make sure you have Angular installed. If not, install it globally.
  • npm install -g @angular/cli

4. Install Dependencies

  • npm install

5. Run the Application

  • ng serve

6. Access the Website

7. Grant Camera Permissions

  • Ensure your device has a functional camera and grant necessary permissions when prompted.

8. Start Interacting

  • Explore the website and rate images by using hand gestures. Swipe, pinch, or wave to express your preferences.
  • No additional downloads or installations are required. Enjoy the interactive experience!

Technologies Used

  • Hantrack.js Library
  • REST APIs from Unsplash
  • HTML, CSS, JavaScript, Angular.js and localStorange

Youtube Demo:

Contributors

Feedback and Support

We value your feedback! If you encounter issues or have suggestions, reach out to us at [email protected].

License

This project is licensed under Hai Nguyen. See LICENSE.md for details.