Quickstart

This quickstart assumes your app already mounts Five SDK and loads a work. Vreo controls playback on top of that Five SDK instance.

Install

npm install @realsee/vreo@2.6.2 @realsee/five@6.8.9 @realsee/dnalogel@3.67.0 react@18 react-dom@18 three@0.117.1

@realsee/vreo@2.6.2 declares React 18 peers. If your application uses a different React major, validate Vreo in an isolated route before shipping.

Import stylesheet

Vreo ships a default stylesheet:

import '@realsee/vreo/stylesheets/default.css'

You can also import it from CSS:

@import '@realsee/vreo/stylesheets/default.css';

Create the Player

Create Player after you have a Five SDK instance:

The public constructor is new Player(five, configs?).

import { Five } from '@realsee/five'
import { Player } from '@realsee/vreo'
import '@realsee/vreo/stylesheets/default.css'

const five = new Five({ imageOptions: { size: 1024 } })
const player = new Player(five, {
  autoPreload: true,
  imageOptions: { size: 1024 },
})

Load a script

Fetch your script from your backend. Keep OpenAPI credentials server-side and return only browser-safe script data to the page.

const response = await fetch('/api/vreo-units/showroom-intro')
const vreoUnit = await response.json()

const loaded = await player.load(vreoUnit)

if (loaded) {
  player.play()
}

The public type declaration is player.load(vreoUnit, currentTime?, preload?, force?): Promise<boolean>.

Control playback

The Player class exposes the core playback controls:

player.play()
player.pause()
player.play(10_000)
player.getCurrentTime()
player.hide()
player.show()
player.dispose()

Dispose the player when you dispose the Five SDK instance so timeline listeners, media elements, and UI modules are cleaned up together.

React mode

Vreo also exposes a React provider and hooks under @realsee/vreo/react. Use that mode when your playback controls are React components. The same data model still applies: load a VreoUnit, then call play or pause through the hook action API.