Reemo.js

Reemo Javascript WebClient reference

Reemo.js

This reference documents every object and method available in Reemo's browser-side JavaScript library, Reemo.js
You use Reemo.js to display a plug and play Low Latency Remote Desktop Streaming WebClient to your website and access your computers registered to the Reemo API.

Including Reemo.js

Include the Reemo.js script on your website, it should always be loaded directly from https://static.reemo.io/reemo.min.js, rather than included in a bundle or hosted yourself.

Including Reemo.js

new Reemo.WebClient()

Use new Reemo.WebClient() to create an instance of the Reemo WebClient object.

Please note that your page must not have more than one WebClient existing at anytime.

// Initializing Reemo.js

const reemo = new Reemo.WebClient();

init(element_id, options?)

Use init(element_id, options?) to init the Reemo WebClient DOM.

Create a DOM element on your page to receive the Reemo WebClient DOM

// Initializing the DOM

reemo.init('reemodiv');

Method Parameters

Parameter	Type	Required	Description
element_id	String	Yes	id of the DOM element receiving the WebClient
options	Object	No	Options to customize the WebClient (see below)

Options Parameter

Property	Type	Default	Description
backButton	Boolean	False	Show the back button after the webclient reached the STATE_ERROR or STATE_DISCONNECTED state
retryButton	Boolean	False	Show the back button after the webclient reached the STATE_ERROR state
extraMenu	Array	Empty	Display extra elements on the Reemo WebClient Menu (see full example at the bottom of the page)

connect(computer)

When you are ready use connect(computer) to initialize the connection to the remote computer. computer is provided by the Reemo API and contains the computer object with a fresh access token to allow access on our signal servers. Read the Reemo API documentation for more info.

// Connect to the computer provided by your website's API (connected to the Reemo API)

reemo.connect(computer);

Method Parameters

Parameter	Type	Required	Description
computer	Object	Yes	Computer Object returned by the Reemo API

destroy()

When you are done with the WebClient, you can destroy it manually by calling destroy() to remove it from the DOM. This will trigger the beforeDestroy event. After calling the destroy() method, you must not reuse the WebClient object or hold reference to it. You can then safely create another WebClient by calling new Reemo.WebClient().

Please note that your page must not have more than one WebClient existing at anytime.

// Destroy the WebClient and remove it from the DOM

reemo.destroy();

Listening to Events

The Reemo WebClient object emits events during all of its lifetime to report DOM and connection events.

created

Emitted after the Reemo WebClient has been initialized and the DOM is ready.

// The DOM is ready
reemo.on('created', () => {
    console.log('WebClient created');
});

beforeDestroy

Emitted just before the Reemo WebClient DOM and listeners are beeing removed from the page.

// The DOM is about to get destroyed
reemo.on('beforeDestroy', () => {
    console.log('WebClient is beeing destroyed');
});

state

Emitted after every connection state change.

// Connection state changed
reemo.on('state', ({state, error}) => {
    console.log(`State Changed: ${state}, Error: ${error}`);
});

Event Properties

Property	Type	Description
state	String	The current state of the WebClient connection (see below for the full states list)
error	Integer	Error code when the WebClient reaches the STATE_ERROR state

States List

Value	Description
STATE_INIT	The WebClient is created inside the page, but no connection request has been made
STATE_SIGNAL	The WebClient is connecting to the signal server to validate the connection token
STATE_WEBRTC	The WebClient is connecting to the remote computer using WebRTC
STATE_ERROR	The connection failed, an error message and code will be displayed to the user
STATE_DISCONNECTED	The WebClient is disconnected from the remote computer
STATE_CONNECTED	The WebClient is connected to the remote computer
STATE_WAITING_FOR_FRAME	The WebClient is waiting for the first frame of the video stream
STATE_DISCONNECTING	The WebClient is disconnecting
STATE_WAITING_FOR_CAPTURE	The WebClient is waiting for the capture process of the Reemo Service to restart
STATE_RECOVERING_CAPTURE	The WebClient is waiting for a restart of the video stream
STATE_PLAY_PREVENTED_BY_BROWSER	The Browser prevented the autoplay of the video stream

back

Emitted when the user clicked on the Back button. This event may only happen if the backButton option is set to true in the init(element_id, options?) method options. This event is commonly used to get back to the previous page on your webapp.

// The Back button has been pressed
reemo.on('back', () => {
    console.log('back button pressed');
});

retry

Emitted when the user clicked on the Retry button. This event may only happen if the retryButton option is set to true in the init(element_id, options?) method options. This event gives you an opportunity to fetch a new computer token on the Reemo API and call connect(computer) method again.

// The Retry button has been pressed
reemo.on('retry', () => {
    console.log('retry button pressed');
});

Full Example

                    Full Example
<div id="reemodiv"></div>
<script src="https://static.reemo.io/reemo.min.js"></script>

<script>
    function onExtraAction() {
        console.log('extra action clicked');
    }

    window.onload = () => {
        // Initialize Reemo.js
        const reemo = new Reemo.WebClient();

        // Events
        reemo.on('created', () => {
            console.log('WebClient created');
        });
        reemo.on('beforeDestroy', () => {
            console.log('WebClient is beeing destroyed');
        });
        reemo.on('state', ({state, error}) => {
            console.log(`State Changed: ${state}, Error: ${error}`);
        });
        reemo.on('back', () => {
            console.log('back button pressed');
        });
        reemo.on('retry', () => {
            console.log('retry button pressed');
        });

        // Initialize the DOM
        reemo.init('reemodiv', {
            backButton: true,
            retryButton: true,
            extraMenu: [{
                label: 'Extra Options',
                type: 'options',
                options: [{
                    label: 'Extra Option',
                    type: 'action',
                    action: onExtraAction,
                }]
            }, {
                label: 'Reemo.io',
                type: 'link',
                link: 'https://reemo.io',
            }]
        });

        // Connect to the computer provided by your website's API (connected to the Reemo API)
        reemo.connect(computer);
    };
</script>