Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This is a forked and tweaked version of Embed Streaming into a Webpage (no iframe solution) for a streaming UI implementation using react library.
Method 2 of this document can be used without changing the source code of the target application. By simply using the server provided in this doc, we can achieve single use token system.

...

When a browser tries to fetch the index.html, the server queries the token from e3ds server and injects into the html along with clientUserName and serves it to the browser. Expand

titleUseful global functions

Here is a list of useful global functions. These functions will be called from the core library if they are defined in global scope. Inside functions required operation can be done for the functionality of the web app.

Code Block
e3ds_controller.callbacks.onDataChannelOpen = function () {
    console.log("ob-onDataChannelOpen");
}

e3ds_controller.callbacks.onDataChannelClose = function () {
    console.log("ob-onDataChannelClose");
}

e3ds_controller.callbacks.onConfigAcquire = function () {
    console.log("ob-onConfigAcquire");
}

e3ds_controller.callbacks.onSessionExpired = function () {
    self.location = "assets/pages/session-expired.htm";
}

e3ds_controller.callbacks.onResponseFromUnreal = function (descriptor) {
    console.log("ob-onResponseFromUnreal");
    console.log("UnrealResponse: " + descriptor);
    document.getElementById('LatencyStats').innerHTML = descriptor;
}

e3ds_controller.callbacks.onReceivingAppAcquiringProgress = function (percent) {
    console.log("onReceivingAppAcquiringProgress: " + percent);
}


e3ds_controller.callbacks.onReceivingAppPreparationProgress = function (percent) {
    console.log("onReceivingAppPreparationProgress: " + percent);
}

e3ds_controller.callbacks.onReceivingAppStartingProgress = function (percent) {
    console.log("onReceivingAppStartingProgress: " + percent);
}

e3ds_controller.callbacks.onHtmlBind = function () {
    console.log("ob-onHtmlBind");
}
Explanations:
onConfigAcquire : called when configuration data arrives
onDataChannelOpen: called then communication channel between the browser and UE app is established
onDataChannelClose: called then communication channel between the browser and UE app is broken
onSessionExpired: called when stream session time expires
onHtmlBind: when system finish binding function to existed stick Ui elements

Useful Global Functions:

Useful Global Functions in No-Iframe Solution

...

Expand
titleCommunication between web app and UE app

To send message to UE app from the web app call “e3ds_controller.sendToUnreal” .
we will do some major change into it soon. right now it expects a json object. we are planning to change it to a string
Example:

Code Block
    window?.e3ds_controller.sendToUnreal({
      Teleport: pos
    });


When a message comes from the UE app the “onResponseFromUnreal(descriptor)“ function is called in global scope. The parameter of the function holds the message.