Quick Start | Realsee Developer Platform

Create a Five SDK instance

Before using the player, you first need to create a 3D space, i.e. a Five instance:

import * as React from "react";
import { Five } from "@realsee/five";

const five = new Five({
  /* Five configuration options */
});

Tip

See the Five SDK Quickstart to learn how to create and use a Five instance.

Create a Player instance

When creating a Player instance, pass the Five instance created in the previous step into the Player constructor as its initialization argument.

import { Player } from "@realsee/vreo";

const vreoPlayer = new Player(five); // here, five is the five instance created in the previous step

You also need to import the default stylesheet into your own project; otherwise some UI effects will not render correctly:

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

Load script data

Use the load method to load script data into the player:

// Asynchronously request the script data
const response = await fetch("/api/vreo-script");
if (!response.ok) throw new Error(`Script request failed: ${response.status}`);
const vreoUnit = await response.json();

// Load the script data
// highlight-start
await vreoPlayer.load(vreoUnit);
// highlight-end

Pause & Play

By default, playback starts automatically once the data has finished loading. You can pause playback with the pause() method, and resume it with the play() method:

// Pause the script
vreoPlayer.pause();

// Play the script
vreoPlayer.play();

Panel control

Vreo comes with a built-in bottom panel that displays the teleprompter subtitles, the digital avatar, and more. You can control the panel with the show() and hide() methods:

// Hide the panel
vreoPlayer.hide();

// Show the panel
vreoPlayer.show();

Tip

At this point, you have gotten started with the most essential features of the Vreo player.

Event listening

You can listen to the relevant events with the on() method.

// Listen for the playing event
vreoPlayer.on("playing", callback);

// Listen for the paused event
vreoPlayer.on("paused", callback);