Vimeo WebVR Demo
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.
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.
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:
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:
Don't forget to restart your server after updating your
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" />
url with your own Vimeo video and like magic, your video should start playing!
4. Customize your world
- Mobile web playback on Safari currently has a known bug
Working on a cool video project? Let's talk - labs at vimeo dot com