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
Option | Description |
---|---|
data-application | ID of the application you want to launch |
data-version | ID of a specific version of the application (otherwise will use default) |
data-file-provider-url | URL to file providers for the user |
data-key-id | API Key ID if application requires authentication |
data-expires | Unix timestamp the signature expires |
data-signature | Request signature |
data-label | Label 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)
Option | Type | Required | Description |
---|---|---|---|
application | string | required | ID of the application you want to launch |
version | string | optional | ID of a specific version of the application (otherwise will use default) |
file_provider_url | string | optional | URL to file providers for the user |
key_id | string | optional | API Key ID if application requires authentication |
expires | integer | optional | Unix timestamp the signature expires |
signature | string | optional | Request signature |
style | boolean | optional | Apply frame styling, defaults to true |
plock | boolean | optional | Allows the cursor to be locked in the stream window, defaults to false |
max_duration | integer | optional | Maximum duration of the session in seconds |
command_line | string | optional | Command line to pass to application |
fixed | bool | optional | Disables automatic resizing of the stream window |
size | string | optional | Sets 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)
Option | Type | Required | Description |
---|---|---|---|
style | boolean | optional | Apply frame styling, defaults to true |
plock | boolean | optional | Allows 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)
Option | Type | Required | Description |
---|---|---|---|
port | integer | required | HTTP port to connect to |
error | function | optional | Function to call if request fails |
success | function | optional | Function to call if request succeeds |
path | string | optional | Path to send request to, default to "/" |
method | string | optional | HTTP method to send, defaults to "GET" |
headers | object | optional | HTTP headers to send in request |
body | string | optional | Text 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:
Parameter | Type | Description |
---|---|---|
code | integer | HTTP response status code |
headers | array | Array of HTTP response headers |
body | string | Body of HTTP response |
Error Callback
A error callback function should take a single input and will receive an object with the following information:
Parameter | Type | Description |
---|---|---|
message | string | Description 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
}