Metareal Stage Player SDK - Programming Guide

This section provides detailed guides on how to use the Metareal Stage Player SDK features.

Documentation

How To

Installation

To use the Metareal Stage Player SDK, simply reference the following Javascript file: https://stage.metareal.com/playersdk/playersdk.min.1.0.js in your web application. A non-minified version is also available for debugging purposes: https://stage.metareal.com/playersdk/playersdk.1.0.js.

Creating a Player

A player is the main object that will allow your web page to load the tour and play it back. A web application can use more than one player, to play multiple tours at the same time for example. Players must have an HTML element parent, such as a div.

To create a new player inside of an HTML element myWebApp:

let player = MetarealPlayerSDK.create( "myWebApp" );

To destroy the player, and unparent it:

MetarealPlayerSDK.destroy( player );

Loading a Tour

Tours are loaded inside player objects using the load function. The URL provided to the load function corresponds to the published URL of the tour. e.g.: https://tour.metareal.com/apps/player?asset=b8ce9219-e883-4848-9a33-abe18a9697bb. The load function takes a callback as a parameter that is called once the tour is ready to be played back.

let tourURL = "https://tour.metareal.com/apps/player?asset=b8ce9219-e883-4848-9a33-abe18a9697bb";
player.load( tourURL, () => {
    console.log( "Tour is loaded" );
} );

Getting Properties

Properties are read only values that are data members of the different objects. They can be queried directly like this:

console.log( tour.name );

You can use the Data Explorer example to see what are the different properties that are available for each type of objects.

Listening to Events

Certain events are triggered when playing back, or when interacting with the tour. These events can call a callback that implements custom logic or behaviour based on the user input.

Use the Player.setEventListener To set an callback on a specific event:

function startMove( data ) {
    console.log( "The user is starting to move" );
};

player.setEventListener( "startmove", startMove );

Note that you cannot set more than one callback per event type.

The types of events that are supported are:

Controlling the Player

The player can be programmed to perform certain actions: