Javascript SDK

You can use Streams JS SDK to send messages from the client side to your application.

Embed the script code between the <head> </head> tags inside the page you embedded your Streams Link via iframe.

<script src="https://app.vagon.io/vagonsdk.js"></script>

Despite you added the JS SDK script between the tags in your client code, if you can not establish a connection, please be sure that you copied the iFrame tag from the Vagon Streams dashboard.

If you manually created your iFrame code by adding your Streams Link, please check that you applied the id tag and other required iFrame properties correctly from the sample code below.

<iframe id="vagonFrame" allow="microphone  *; clipboard-read *; clipboard-write *; encrypted-media *;" src="_Stream_URL_"/>

Then you will be able to use the JS methods to create your custom user experience for your application Stream.

Demo HTML

<!DOCTYPE html>
<html>
	<head>
		<script src="https://app.vagon.io/vagonsdk.js"></script>
	</head>
	<body>
		<iframe id="vagonFrame" style="height:100vh; width: 100vw;" allow="microphone  *; clipboard-read *; clipboard-write *; encrypted-media *;" src="__Stream_URL__"/>
	</body>
</html>

Unreal Engine Pixel Streaming EmitUI Messages

emitUIInteraction

window.Vagon.emitUIInteraction("payload")

emitCommand

window.Vagon.emitCommand("payload")

onResponse

function onResponse(data) {
  console.log(data)
}

window.Vagon.onResponse(onResponse);

Client-side Integration Functions

Client-side Integration Functionalities and events have support for all types of Streaming you can use inside Vagon Streams.

isConnected

window.Vagon.isConnected()

Connection status, returns boolean.

sendApplicationMessage

window.Vagon.sendApplicationMessage("Hello My Application!")

Sends the related message to your application.

resizeFrame

window.Vagon.resizeFrame()

Updates the streaming resolution and matches the iframe height and width when initiated.

focusIframe

window.Vagon.focusIframe()

Keeps the browser window focused on the streaming iframe. In case you are facing issues with keyboard inputs, you can use this method.

showKeyboard

window.Vagon.showKeyboard()

If your visitors are using your Applications on mobile/tablet devices, you can also allow them to type with the on-screen keyboard inside Vagon Streams.

hideKeyboard

window.Vagon.hideKeyboard()

When the focus changes from the text input, you can hide the on-screen keyboard button from the screen as well.

enableGameMode

window.Vagon.enableGameMode()

Activates 360 View cursor mode inside an active Stream.

disableGameMode

window.Vagon.disableGameMode()

Disable 360 View cursor mode inside an active Stream.

keepAlive

window.Vagon.keepAlive()

Reset Idle Timer by sending a simulated user input when the Idle Duration Limit is active.

shutdown

window.Vagon.shutdown()

Shut down the Stream Machine and terminate the related session immediately.

setQuality

window.Vagon.setQuality(quality)

Quality parameters can be set as "standard", "moderate" or "high". Session will be refreshed automatically after the quality is set.

getSessionInformation

window.Vagon.getSessionInformation()

Triggers the onSessionInformation event, data must be collected via onSessionInformation event.

setVideoVolume

window.Vagon.setVideoVolume(0.5)

Set the sound of your Stream link between 0 to 1.

Client-side Integration Events

All events except onApplicationMessage, onConnected and onDisconnected are only available in Enterprise Plan.

onApplicationMessage

Prints out the message sent from the application, for application-side integration please check Unreal Engine and Unity SDKs.

window.Vagon.onApplicationMessage(evt => {
	console.log(evt.message);
});

onPointerLockChange

Prints out the message when the pointer lock (360 View Mode) state changes.

window.Vagon.onPointerLockChange((locked) => {
    console.log(`Pointer Lock is Active: ${locked}`);
});

onInitialization

Prints out the message during the Stream initialization process.

window.Vagon.onInitialization(() => {
	console.log("Application is Initializing");
});

onPreparingAssets

Prints out the message during the pixel streaming asset preparation process. Only available in Pixel Streaming enabled Streams.

window.Vagon.onPreparingAssets(() => {
	console.log("Application is Preparing Assets");
});

onInstalling

Prints out the message when application is on installing state.

window.Vagon.onInstalling(() => {
	console.log("Application Installing");
});

onConnected

Prints out the message when user is connected.

window.Vagon.onConnected(() => {
	console.log("User Connected");
});

onDisconnected

Prints out the message when user is disconnected.

window.Vagon.onDisconnected(() => {
	console.log("User Disconnected");
});

onInactive

Prints out the message when user is inactive. Only available when Idle Duration Limit is active.

window.Vagon.onInactive(() => {
	console.log("User Inactive");
});

onInstallationFailed

Prints out the message when app installation is failed.

window.Vagon.onInstallationFailed(() => {
	console.log("App Installation is Failed");
});

onFailed

Prints out the message when connection is failed.

window.Vagon.onFailed(() => {
	console.log("Connection is Failed");
});

onSessionInformation

Prints out the message when connection is failed.

window.Vagon.onSessionInformation((session_data) => {
	console.log(session_data);
});

Sample Session Data

{
  "session": {
    ping: 150, // Available for Session Data Collection enabled Streams.
    os: "windows", // Available for Session Data Collection enabled Streams.
    device_type: "desktop", // Available for Session Data Collection enabled Streams.
  },
  "machine": {
    "status": "runinng",
    "friendly_status": "ready",
    "connection_status": "connected",
    "region": "dublin",
    "uid": "05545648-c292-4ef4-b571-d10797f83069",
    "application_id": 1,
    "stream_id": 1,
    "machine_id": 1,
    
  }
}

PreviousClient-side Communication NextUnreal Engine SDK

Last updated 1 month ago

You can use Streams JS SDK to send messages from the client side to your application.

Embed the script code between the <head> </head> tags inside the page you embedded your Streams Link via iframe.

<script src="https://app.vagon.io/vagonsdk.js"></script>

Despite you added the JS SDK script between the tags in your client code, if you can not establish a connection, please be sure that you copied the iFrame tag from the Vagon Streams dashboard.

If you manually created your iFrame code by adding your Streams Link, please check that you applied the id tag and other required iFrame properties correctly from the sample code below.

<iframe id="vagonFrame" allow="microphone  *; clipboard-read *; clipboard-write *; encrypted-media *;" src="_Stream_URL_"/>

Then you will be able to use the JS methods to create your custom user experience for your application Stream.

Demo HTML

<!DOCTYPE html>
<html>
	<head>
		<script src="https://app.vagon.io/vagonsdk.js"></script>
	</head>
	<body>
		<iframe id="vagonFrame" style="height:100vh; width: 100vw;" allow="microphone  *; clipboard-read *; clipboard-write *; encrypted-media *;" src="__Stream_URL__"/>
	</body>
</html>

Unreal Engine Pixel Streaming EmitUI Messages

You can use both EmitUI and functionalities for Unreal Engine Pixel Streaming enabled Stream links.

emitUIInteraction

window.Vagon.emitUIInteraction("payload")

emitCommand

window.Vagon.emitCommand("payload")

onResponse

function onResponse(data) {
  console.log(data)
}

window.Vagon.onResponse(onResponse);

Client-side Integration Functions

Client-side Integration Functionalities and events have support for all types of Streaming you can use inside Vagon Streams.

isConnected

window.Vagon.isConnected()

Connection status, returns boolean.

sendApplicationMessage

window.Vagon.sendApplicationMessage("Hello My Application!")

Sends the related message to your application.

resizeFrame

window.Vagon.resizeFrame()

Updates the streaming resolution and matches the iframe height and width when initiated.

focusIframe

window.Vagon.focusIframe()

Keeps the browser window focused on the streaming iframe. In case you are facing issues with keyboard inputs, you can use this method.

showKeyboard

window.Vagon.showKeyboard()

If your visitors are using your Applications on mobile/tablet devices, you can also allow them to type with the on-screen keyboard inside Vagon Streams.

hideKeyboard

window.Vagon.hideKeyboard()

When the focus changes from the text input, you can hide the on-screen keyboard button from the screen as well.

enableGameMode

window.Vagon.enableGameMode()

Activates 360 View cursor mode inside an active Stream.

disableGameMode

window.Vagon.disableGameMode()

Disable 360 View cursor mode inside an active Stream.

keepAlive

window.Vagon.keepAlive()

Reset Idle Timer by sending a simulated user input when the Idle Duration Limit is active.

shutdown

window.Vagon.shutdown()

Shut down the Stream Machine and terminate the related session immediately.

setQuality

window.Vagon.setQuality(quality)

Quality parameters can be set as "standard", "moderate" or "high". Session will be refreshed automatically after the quality is set.

getSessionInformation

window.Vagon.getSessionInformation()

Triggers the onSessionInformation event, data must be collected via onSessionInformation event.

setVideoVolume

window.Vagon.setVideoVolume(0.5)

Set the sound of your Stream link between 0 to 1.

Client-side Integration Events

All events except onApplicationMessage, onConnected and onDisconnected are only available in Enterprise Plan.

onApplicationMessage

Prints out the message sent from the application, for application-side integration please check Unreal Engine and Unity SDKs.

window.Vagon.onApplicationMessage(evt => {
	console.log(evt.message);
});

onPointerLockChange

Prints out the message when the pointer lock (360 View Mode) state changes.

window.Vagon.onPointerLockChange((locked) => {
    console.log(`Pointer Lock is Active: ${locked}`);
});

onInitialization

Prints out the message during the Stream initialization process.

window.Vagon.onInitialization(() => {
	console.log("Application is Initializing");
});

onPreparingAssets

Prints out the message during the pixel streaming asset preparation process. Only available in Pixel Streaming enabled Streams.

window.Vagon.onPreparingAssets(() => {
	console.log("Application is Preparing Assets");
});

onInstalling

Prints out the message when application is on installing state.

window.Vagon.onInstalling(() => {
	console.log("Application Installing");
});

onConnected

Prints out the message when user is connected.

window.Vagon.onConnected(() => {
	console.log("User Connected");
});

onDisconnected

Prints out the message when user is disconnected.

window.Vagon.onDisconnected(() => {
	console.log("User Disconnected");
});

onInactive

Prints out the message when user is inactive. Only available when Idle Duration Limit is active.

window.Vagon.onInactive(() => {
	console.log("User Inactive");
});

onInstallationFailed

Prints out the message when app installation is failed.

window.Vagon.onInstallationFailed(() => {
	console.log("App Installation is Failed");
});

onFailed

Prints out the message when connection is failed.

window.Vagon.onFailed(() => {
	console.log("Connection is Failed");
});

onSessionInformation

Prints out the message when connection is failed.

window.Vagon.onSessionInformation((session_data) => {
	console.log(session_data);
});

Sample Session Data

{
  "session": {
    ping: 150, // Available for Session Data Collection enabled Streams.
    os: "windows", // Available for Session Data Collection enabled Streams.
    device_type: "desktop", // Available for Session Data Collection enabled Streams.
  },
  "machine": {
    "status": "runinng",
    "friendly_status": "ready",
    "connection_status": "connected",
    "region": "dublin",
    "uid": "05545648-c292-4ef4-b571-d10797f83069",
    "application_id": 1,
    "stream_id": 1,
    "machine_id": 1,
    
  }
}