From this document, you’ll know:
-
The different global functions available in the no-iframe solution.
-
Their purposes and when they are triggered.
-
How you can customize behavior for each function.
-
At which point you can start sending messages from the webpage to the Unreal Engine app.
Configuration Acquired (onConfigAcquire)
Triggered when configuration data arrives from the server.
e3ds_controller.callbacks.onConfigAcquire = function () {
console.log("ob-onConfigAcquire");
};
Purpose: Initialize settings and prepare the UI or app environment.
You can customize:
-
Initialize custom UI elements.
-
Fetch additional resources required before starting communication with Unreal.
HTML Bind (onHtmlBind)
Triggered when the system finishes binding functions to existing UI elements.
e3ds_controller.callbacks.onHtmlBind = function () {
console.log("ob-onHtmlBind");
};
Purpose: Prepare UI elements for interaction.
You can customize:
-
Enable or modify interactive buttons, sliders, or overlays.
App Acquiring Progress (onReceivingAppAcquiringProgress)
Triggered while the app is being downloaded to the streamer machine.
e3ds_controller.callbacks.onReceivingAppAcquiringProgress = function (percent) {
console.log("onReceivingAppAcquiringProgress: " + percent);
};
Purpose: Track download progress of the Unreal app.
You can customize:
-
Show a progress bar or percentage.
-
Display messages like “Downloading app…”.
App Preparation Progress (onReceivingAppPreparationProgress)
Triggered when the app is being prepared/extracted on the streamer machine.
e3ds_controller.callbacks.onReceivingAppPreparationProgress = function (percent) {
console.log("onReceivingAppPreparationProgress: " + percent);
};
Purpose: Track preparation/extraction progress.
You can customize:
-
Update UI progress indicators.
-
Show status messages like “Preparing app…”.
App Starting Progress (onReceivingAppStartingProgress)
Triggered when the app is starting on the streamer machine.
e3ds_controller.callbacks.onReceivingAppStartingProgress = function (percent) {
console.log("onReceivingAppStartingProgress: " + percent);
};
Purpose: Track app startup progress.
You can customize:
-
Show a loading animation until the app is interactive.
Data Channel Opened (onDataChannelOpen)
Triggered when the communication channel between the browser and Unreal Engine app is established.
Important: Only after this stage, you can start sending data from the webpage to the Unreal Engine app.
e3ds_controller.callbacks.onDataChannelOpen = function () {
console.log("ob-onDataChannelOpen");
};
Purpose: The browser can now communicate with the Unreal app.
You can customize:
-
Enable interactive UI buttons or controls.
-
Start sending initial messages or data to Unreal.
Response From Unreal (onResponseFromUnreal)
Triggered whenever Unreal sends a message back to the webpage.
e3ds_controller.callbacks.onResponseFromUnreal = function (descriptor) {
console.log("ob-onResponseFromUnreal");
console.warn("UnrealResponse: " + descriptor);
};
Purpose: Receive messages/data from Unreal.
You can customize:
-
Update UI based on app state.
-
Log or display Unreal responses for debugging.
Data Channel Closed (onDataChannelClose)
Triggered when the communication channel is closed.
e3ds_controller.callbacks.onDataChannelClose = function () {
console.log("ob-onDataChannelClose");
};
Purpose: Handle disconnection or network issues.
You can customize:
-
Show a “Connection Lost” message.
-
Retry establishing the data channel.
Session Expired (onSessionExpired)
Triggered when the streaming session time expires.
e3ds_controller.callbacks.onSessionExpired = function () {
self.location = "assets/pages/session-expired.htm";
};
Purpose: End the session gracefully and redirect the user.
You can customize:
-
Redirect to a custom page.
-
Display a countdown or warning before session expiration.
Need help?
🛠️ Contact our Support Team
💬 Join the Community on Discord
Follow us on: