Pixvana Web Player

Pixvana web video player

Dev Setup

To run the Pixvana standalone player locally:

npm install

This will install all the dependencies including http-server which is used to serve the standalone player which has no server infrastructure of its own.

Then build the player code:

grunt

Run:

npm start

This will start http-server and serve the standalone player sample in ./web.

Access the player at http://127.0.0.1:8080/. This will load a test video. To load other videos append an opf querystring parameter. For example:

http://localhost:8080/CD6-R7M-YM6 http://localhost:8080/CD6R7MYM6 http://localhost:8080/?spin=https://alpha.pixvana.com/playerapi/collections/player?accessCode%3DCD6R7MYM6 http://localhost:8080/?opf=https://spin.pixvana.com/media/1d4f1165-e32b-4746-9d10-e2e19fd11bb0/index.opf

React component

The Pixvana web player react component project is in the pixvana-player-react folder.

pixvana-player-react

To build:

cd pixvana-player-react
npm install
webpack

The react component code will be built to build/index.js. To package the component for deployment via npm:

npm pack

Using @pixvana/player-react

Here is an example of using the component to render a spin with heatmap data:

import React from 'react';
import { PixvanaPlayer } from '@pixvana/player-react';

function App() {
  return (
    <div className="App">
      <PixvanaPlayer spin="https://alpha.pixvana.com/playerapi/collections/player?accessCode=4VMC97QHW" heatmap={true} start="2018-01-22T19:19:55.167Z" end="2020-01-23T19:28:06.035Z" showFlatProjection={true} />
    </div>
  );
}

The component supports all the same parameters as the index.html version of the player via props:

PixvanaPlayer.propTypes = {
    opf: PropTypes.string,
    spin: PropTypes.string,
    autoPlay: PropTypes.bool,
    showStatsToggle: PropTypes.bool,
    showViewReset: PropTypes.bool,
    showWireframe: PropTypes.bool,
    showFullscreen: PropTypes.bool,
    showBitrateSelector: PropTypes.bool,
    flatProjection: PropTypes.bool,
    showFlatProjection: PropTypes.bool,
    heatmap: PropTypes.bool,
    start: PropTypes.string,
    end: PropTypes.string,
    onPlayerError: PropTypes.func
};

Publish to NPM

Edit pixvana-player-react/package.json file. Find the version node and change the version number

"version": "1.0.16"

build the project in terminal, under folder pixvana-player-react/

npm run-script build

Publish to NPM

npm publish

Use @pixvana/pixvana-webplayer-react

yarn add @pixvana/pixvana-webplayer-react