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>
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 Client Side Messaging 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,
}
}Last updated