Quick start

Create Live Instance

You need to create a three-dimensional space before using the player, that is, Five instance:

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

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

tip

You can go to like the three-dimensional space fast practice document learn Five about the creation and use of instances.

Create Player instance

When creating an instance of Player you need to pass the Five instance to constructor as initial parameter Player.

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

const vreoPlayer = new Player(five); // where five were created for the previous step

Of course, you also need to introduce the default style into your own project, otherwise some UI effects cannot be displayed correctly：

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

Load theater data

Load the script data：for the player through the load method

// Asynchronous Request Theatre Data
const vreoUnit = await fetch("api/**/**");

// Load Station Data
vreoPlayer.load(vreoUnit);

Pause & playback

By default, data will be played automatically once it is loaded.You can pause playback by pause() method, you can also resume playback by play() method：

// Pause script
vreoPlayer.pause();

// Play script
vreoPlayer.play();

Panel Control

Vreo will come with a bottom panel, inscription barrage, digital human images, etc. are displayed on this panel, you can control the panel by show(),hide() methods：

// Hide panel
vreoPlayer.hide();

// Display panel
vreoPlayer.show();

tip

To this end, you have used Vreo the most core of the player.

Event listener

You can listen to related events through the on() method.

// Listen to play events
vreoPlayer.on("playing", callback);

// Listen to pause events
vreoPlayer.on("paused", callback);