react-vr-player

    0.1.1 • Public • Published

    react-vr-player

    VR / 360° Video Player as a React Component

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

    You can find a live example of this component here.

    What it does support so far

    • 360° Videos
    • Play/Pause
    • Manual rotation (using the keyboard)
    • Seek
    • Mute
    • Fullscreen
    • HMD device (tested on Oculus Rift DK2, and Homido)
    • Local file loading

    Install

    First, get it from NPM: npm install react-vr-player Then, if you use Webpack, load it up with const VrPlayer = require('react-vr-player') or ES6 import VrPlayer from 'react-vr-player', it should work right out of the box. It (obviously) has React as a dependency, but the already bundled version doesn't contain React.

    For an example on how to use it, see this (simple) demo here.

    Use

    render() {
        const sources = [ // Declare an array of video sources
            { url: '/videos/video.webm', type: 'video/webm' },
            { url: '/videos/video.mp4', type: 'video/mp4' }
        ];
        const keys = { // If you want to re-define the keys, here are the defaults
            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} />
     
        );
    }

    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 Nightly for now, especially if you are using Oculus Direct Mode which is not working on Chromium.
    • 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
    • Add control helpers when the video is not started
    • Adding support for "chapters"
    • Making sure it works with the final VR api when this is released

    Change log

    • 0.1.1: Bug fixes: rotation issue, full-screen issue

    Install

    npm i react-vr-player

    DownloadsWeekly Downloads

    8

    Version

    0.1.1

    License

    ISC

    Last publish

    Collaborators

    • antoinejaussoin