AppStream.JS is the quickest and easiest way to embed X.IO applications on the web. It provides a unified interface that you can use to build great experiences.

Integration

You can integrate AppStream.JS with as little as one line of code. As new X.IO features get released, we'll roll them into AppStream.JS, so you'll always have access to our latest technology without having to change anything.

AppStream.JS supports two kinds of integration:

  • Simple: The simple integration provides a Launch button that creates a new stream and launches the application.
  • Custom: The custom integration gives you precise control over your users experience via JavaScript.

Simple

The simple integration uses a <script> tag to render the a launch button. When a user clicks the button, we request a stream session and render the session in the browser.

<script src="https://client.x.io/v1/appstream.js"
        type="text/javascript" class="appstreamjs-button"
        data-application="7cd9272c77ef44aeb460a70de434067a"></script>

You can add additional data attributes to the script tag to configure the behavior of the button:

Configuration Options

OptionDescription
data-applicationID of the application you want to launch
data-versionID of a specific version of the application (otherwise will use default)
data-file-provider-urlURL to file providers for the user
data-key-idAPI Key ID if application requires authentication
data-expiresUnix timestamp the signature expires
data-signatureRequest signature
data-labelLabel of the button on the page

Custom

The custom integration gives you complete control over the user experience and flow.

<script src="https://client.x.io/v1/appstream.js"></script>

<script>
  $('#app-launcher').click(function(e){
    AppStreamJS.launchApplication({
      application: "ad0aad499c5549719951b3297560517f",
      version: "4713fa30b76b4932a3a5c145618228d1",
      key_id: "LSBE0QDMLZOU7JPCZACBI4BWXE",
      expires: "1401683301",
      signature: "obuXVeVN8IwhdU5gJWZjnpA9fl6tZPjex5_e-TxT9sM"
    });
  });
</script>

Functions

AppStream.JS exposes a number of functions you can call.

AppStreamJS.initialize()

Initializes AppStream.JS object. This function is automatically called once the DOM has loaded and should not be called manually.

AppStreamJS.launchApplication(launchOptions)

Requests a new stream from the X.IO API, then passes the launch key to the AppStreamJS.launchClient() function.

Launch Options (object)

OptionTypeRequiredDescription
applicationstringrequiredID of the application you want to launch
versionstringoptionalID of a specific version of the application (otherwise will use default)
file_provider_urlstringoptionalURL to file providers for the user
key_idstringoptionalAPI Key ID if application requires authentication
expiresintegeroptionalUnix timestamp the signature expires
signaturestringoptionalRequest signature
stylebooleanoptionalApply frame styling, defaults to true
plockbooleanoptionalAllows the cursor to be locked in the stream window, defaults to false
max_durationintegeroptionalMaximum duration of the session in seconds
command_linestringoptionalCommand line to pass to application
fixedbooloptionalDisables automatic resizing of the stream window
sizestringoptionalSets the initial size of the stream window, example: "1280x720"

AppStreamJS.launchClient(launchKey, [launchOptions])

Launches a stream using the launch_key received from the X.IO Stream API.

Launch Options (object)

OptionTypeRequiredDescription
stylebooleanoptionalApply frame styling, defaults to true
plockbooleanoptionalAllows the cursor to be locked in the stream window, defaults to false

AppStreamJS.clientSupportsJSClient()

Returns a boolean indicating whether or not the browser can run a stream in JavaScript.

AppStreamJS.clientHasPrerequisites()

Returns a boolean indicating the client browser supports our JavaScript client.

AppStreamJS.resizeSession(width, height)

Tries to resize the stream to the requested width and height. Listen for the clientResized event for confirmation that the resize has taken effect and the values that the stream was resized to.

AppStreamJS.closeSession()

Disconnect and clean up the active session.

AppStreamJS.httpRequest(requestOptions)

Make an HTTP request to a local port running in the session and return the results.

Request Options (object)

OptionTypeRequiredDescription
portintegerrequiredHTTP port to connect to
errorfunctionoptionalFunction to call if request fails
successfunctionoptionalFunction to call if request succeeds
pathstringoptionalPath to send request to, default to "/"
methodstringoptionalHTTP method to send, defaults to "GET"
headersobjectoptionalHTTP headers to send in request
bodystringoptionalText to send in request body

Success Callback

A success callback function should take a single input and will receive an object with the following information:

ParameterTypeDescription
codeintegerHTTP response status code
headersarrayArray of HTTP response headers
bodystringBody of HTTP response

Error Callback

A error callback function should take a single input and will receive an object with the following information:

ParameterTypeDescription
messagestringDescription of why the request failed

Callbacks

You can register to receive callbacks when various events occur.

Registering for Callbacks

To register for callbacks, you will need to create an AppStreamJS.callbacks object which registers the functions you want information from.

<script>
  var AppStreamJS = AppStreamJS || {};
  AppStreamJS.callbacks = {
    libraryReady: function() {
      console.log("AppStream.JS loaded");
    }
  };
</script>

libraryReady()

pointerLocked()

pointerUnlocked()

sessionReceived(sessionId)

sessionInitialized(sessionId)

sessionError(errorMessage)

sessionClosed()

clientInitialized()

clientConnected()

clientResized(data)

Emitted when stream is resized. Data will be an object with the following format:

{
  "width": 100,
  "height": 120
}