/funny-webcam

A fake webcam mask generator using Webcam.js and Tracking.js, enjoy it!!!!

Primary LanguageJavaScript

Funny Webcam Masks Generator

Visit here: Funny Webcam Masks or debug version

  • Title: Funny Webcam Masks Generator
  • Year: 2018
  • Media: Website, screenshots
  • Dimension: Website 1280px * 600px

About This project

The idea of this project came from a class that everyone uses their webcams to test AR works. It looks so funny that they tries different angles to get the AR objects shown but fail. This made me think, "What if there's nothing gonna show up?"

People easily follow rules without thinking why, so I decided to build a fake webcam masks generator using Webcam.js(open webcam and take screenshots) andtracking.js(webcam face tracking), then I shifted the functions of two main buttons "Run" and "Rest", which secretly takes screenshots. The simple glitch would challenges what we used to think of user interface and buttons.

Reactions of users

Step 1. Be interested

Please allow webcam!!! screenshot01

Step 2. Be Confused

Since the two buttons are perfectly malfunctioned, so the users got confused and sent their screenshots to me, asked why it doesn't work.
user04 user05

Actually if scroll down you can see what happens. screenshot test

Step 3. Get into a Panic

Some are smarter and find something wrong with this website, then they were astonished by the endless screenshots and tried pressing "Reset" to stop it. Of course, it doesn't work!!!!! Only press "Run" can stop.

Like this guy, he had kept taking screenshots for over 3 minutes and still couldn't figure out why, neither stop it XD user02

BTW I didn't mind the mobile version, but it still can runs on Android phones (it fails on iPhone) user01 user03 user07

Debug version

I also built a lighter debug version and modify some functions, such as webcam filter and glitch.

Press "Run" then you will see a repeated glitch. screenshot04