Stream videos from your own Vimeo account into a WebVR app.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Add ambient lighting (#7) May 14, 2018
images fix the preview images Dec 4, 2017
public Add ambient lighting (#7) May 14, 2018
.gitignore Updated documentation on how to setup locally Dec 4, 2017
LICENSE
README.md
package-lock.json
package.json
server.js Add ambient lighting (#7) May 14, 2018
webpack.config.js 💈😳 Updated with Glitch (#1) Dec 4, 2017

README.md

Vimeo WebVR Demo

View demo - View 360 demo

This demo shows you how you can stream regular and 360 videos from your own Vimeo account into a WebVR app. It's all built on top of A-frame & React and is powered by Glitch.

How to watch in VR

Check out webvr.info to learn how you can view this demo on any of your VR headsets or mobile devices.

Getting started

First you'll need to sign into your Vimeo account (or create one if you haven't already) and make sure you have some videos uploaded.

Note: In order to stream Vimeo videos, you will need direct video file access via the Vimeo API. Accessing video files via API is limited to Vimeo Pro and Business customers.

1a. Remix this demo on Glitch

Glitch.com is a wonderful platform that makes it pain-free to remix this demo without worrying about local or remote server setup.

remix button

1b. Or setup and run it locally

First you will need to install Node. You will need Homebrew installed first. Open up a terminal and run:

brew install npm

Then you'll need to install all the dependencies:

npm install

Now you can bootup the server:

npm run start

You're good to go! Now you can visit http://localhost:55293 in your browser to see your app. But you won't see any videos playing... yet!

2. Setting up your secret Vimeo token

We will need to use the Vimeo API so that we can grab the video files directly for WebGL to use. A Vimeo token is required so you can make authorized API calls.

To make your life easy, we made this handy link which will generate the token for you. Once you have authorized the app, it will give you a token so you can paste into the .env file. If you're running this locally, create a .env file in your root folder. Your .env file should now look something like this:

VIMEO_TOKEN=406cea4d4xxxxxxxxxxe437756d036f5

Don't forget to restart your server after updating your .env.

3. Playing your Vimeo video

Now that you're all setup, you can start streaming video. Check out the React file app/demo.js and find the following line of code:

<Vimeo url="https://vimeo.com/244123293" />

Replace the url with your own Vimeo video and like magic, your video should start playing!

4. Customize your world

Never used A-frame before? Head on over to aframe.io to learn how to build your own WebVR experience!

Known limitations

  • Mobile web playback on Safari currently has a known bug

Let's collaborate

Working on a cool video project? Let's talk - labs at vimeo dot com

Credits