- Apr 8 2014
Leap Motion: The Remote Control of the Future
Recently, Vimeo integrated the Leap Motion controller with Couch Mode (our full-screen viewing experience) to enable the couch-iest experience possible. No need for a mouse — you can control Couch Mode with just a swipe of your finger in the air.
Additionally, the viewer needs to be notified of finger position in relation of the screen. We wrote a simple utility to take the positions of the viewer’s fingers and draw them on a full-screen, transparent canvas element. The code to render the canvas had to be as performant as possible. And with a full-screen video playing in the browser, there weren’t too many resources left to draw the position data. We used the requestAnimationFrame API, as well as object pooling to minimize garbage collection and keep interactions smooth and snappy.
The final step was to implement a way for Leap Motion to interact with existing video controls we have in place, which are standard DOM elements. We created a small library called EPD (Element Proximity Detection) that allows us to determine if normalized coordinates of the viewer’s fingers are within a set proximity or directly over a video control element. We then could associate a callback with the entry and exit over the element. Then when the viewer hovers his or her finger over an interactive element for long enough, EPD executes that element’s function, and still allows for separate control of the mouse in case they need to switch the tab to something less awesome.
We load the Leap Motion assets on command, so if you have a Leap Motion controller plugged in, there will be an asynchronous call to get the aforementioned files and initialize the controller. If not, Couch Mode will load as it does normally.
Leap Motion allows the viewers to forget about the computer even more. Imagine fast-forwarding and rewinding videos with a quick circle of your finger. Pause or play a video with a simple tap in the air. Just sit back, relax, and swipe away to see the latest and greatest videos on Vimeo Couch Mode.
And if you have a Leap Motion controller, snag Couch Mode in the Airspace Store!
- guidosweety likes this
- mfkopp likes this
- srikard likes this
- saudademoonlight likes this
- ennnnno likes this
- kevinmosley likes this
- djflizzyflamesnotes reblogged this from vimeo
- djflizzyflamesnotes likes this
- whiskey-bars likes this
- stephenlovell likes this
- seduccion16 likes this
- lollolollini234 likes this
- shrek2121 likes this
- hernando-el-hedgehog likes this
- alinebal likes this
- carlodj likes this
- edwnx2 likes this
- error404lifenotfound likes this
- carliehope likes this
- abracadabradavid likes this
- salahassan likes this
- la-petite-mort-darthur likes this
- magnum-0pus likes this
- vimeo reblogged this from makingvimeo and added:
- chefner likes this
- kamranmackey likes this
- adilhashem likes this
- mryap likes this
- bitsymetcalf likes this
- relevantinfofortheendoftheworld likes this
- mykol78 likes this
- jodrescher likes this
- pile reblogged this from makingvimeo
- jmdickinson likes this
- okseanjay reblogged this from makingvimeo
- ridiculouslyawesome reblogged this from makingvimeo
- ridiculouslyawesome likes this
- makingvimeo posted this