Physical Comedy

Deployed:

https://physicalcomedy.herokuapp.com

Video Demo:

Application Demo can be found here. Hope you enjoy!

Team Members

• Sakina Gadriwala
• Seemin Syed

Description of The Web Application

Physical Comedy is a web application that allows users to play full body charades and pictionary with people around the world, by 'drawing' on their stream by moving their hands in the air in front of their camera. As the player moves their hands in the air, they draw on their screen, allowing other players to guess what has been drawn, or written. It supports play with two players and the rules are the same as anytime else you've played the game: have fun!

Key features

Following are the key features that we plan to finish by the beta version of our project

• Usage of the camera on the device
• Sharing audio and video
• Hand-gesture detection to draw
• Generating random words using an external API

Additional Features

Following are additional features that we plan on finishing by the final version of our project

• Toggling between game modes
• Responsive users instructions
• A real-time chat area next to the video
• Score tracking system

Technologies That We Used

Description of Technologies:

• GitHub as version control
• Chrome and Firefox Dev Tools for testing the web application
• Heroku for deploying the web application
• Node.js, NPM and NPM Packages
  • React.js for front-end user interface development
  • React Icons for icons used in the front-end user interface
  • React Bootstrap for elements used in the front-end user interface
  • Peerjs and Peer for peer to peer communication in video, speech and text
  • handtrack.js to track hand movement and gestures
  • Datamuse for getting words for the users to act/draw
  • Express to build the backend server and APIs

Top 5 technical challenges

Following are the top five technical challenges that we have anticipated:

• Enabling camera API on different browsers and their legacy versions
• Tracking hand gestures and movement
• Overlaying gesture detection onto camera stream and streaming to peer efficiently
• Handling serverless audio, video and text streaming between users in realtime
• Creating responsive UI

Running the project locally

• Clone the github repo
• In the root directory, run npm install
• Change directory to static and run npm install
• To start the server, run npm start in the root directory (directory with app.js)
• To start the client, run npm start in static directory

REST API Documentation

• Documentation for the APIs used can be found in APIDocumentation.md

Note that the application can be slow due to the heavy computations required by gesture detection and media stream manipulation