react-vr-player

react-vr-player

VR / 360° Video Player as a React Component

This is still very much beta.

It it adapted from eleVR player, which you can find here

What it does support so far

• 360° Videos
• Play/Pause
• Seek
• Mute
• Fullscreen
• HMD device (tested on Oculus Rift DK2, and Homido)

Install

First, get it from NPM: npm install react-vr-player Then, if you use Webpack, it should just be a matter of const VrPlayer = require('react-vr-player') or ES6 import VrPlayer from 'react-vr-player'

Use

render() {
    const sources = [
        { url: '/videos/video.webm', type: 'video/webm'},
        { url: '/videos/video.mp4', type: 'video/mp4'}
    ];
    const keys = { // Facultative, if you want to re-map the keys
        left: 'A',
        right: 'D',
        up: 'W',
        down: 'S',
        rotateLeft: 'Q',
        rotateRight: 'E',
        fullScreen: 'F',
        zeroSensor: 'Z',
        playPause: ' '
    };
    return (
            <VrPlayer
                sources={sources}
                brand="Some Brand Name"
                title="Some Video Title"
                keys={keys}></VrPlayer>

    );
}

Gotchas

• The Oculus (and other PC-based VR headsets) are only supported on "beta" versions of Chrome and Firefox (respectively Chromium and Firefox Nightly). I personally recommend Firefox for now.
• Due to security restrictions on the Browser, only videos from the same domain will work. You can't just reference a video from another domain as the URL, as it will not work because of WebGL restrictions. CORS is being implemented but last time I checked it wasn't working.

Future

• I'm planning to have feature-parity with eleVR shortly
• Adding support for "chapters"
• Making sure it works with the final VR api when this is released