An experiment to control a photo carousel using getUserMedia to watch for swipes left and right with a hand.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md Syncing with gh-pages branch. Firefox support added. Fixed bug with t… Mar 17, 2013
demo.js
divider.gif
index.html
modernizr-2.6.2.js Syncing master with pages branch Sep 25, 2012
plow.png
swiperDemo.css Syncing master with pages branch Sep 25, 2012
tree.png
webcam-swiper-0.1.js
wood.jpg Syncing master with pages branch Sep 25, 2012

README.md

WebcamSwiper

An experiment/hack using getUserMedia to watch for swipes left and right with a hand. This could be applied to many different uses. Flipping through pictures in an image carousel, moving to the next item in a list, flipping pages of a book or magazine, etc.

Demo

Blog Post

Usage

Two custom events are added to the body tag by the library. You need to bind callbacks to these events and initialize the library. If desired you can stop the library with the destroy method as well.

  1. Include the webcam-swiper-0.1.js with a script tag or the loader of your choice.

  2. Bind the swipe events however you choose. Example with jQuery:

    $("body").bind("webcamSwipeLeft", yourLeftEventHandler); $("body").bind("webcamSwipeRight", yourRightEventHandler);

  3. Start the webcam access with a call to the global initializeWebcamSwiper function like this:

    window.initializeWebcamSwiper();

  4. Now it is running! If you choose to stop it call

    window.destroyWebcamSwiper();