Page Comparison

This is a forked and tweaked version of Embed streaming Streaming into a webpage Webpage (no iframe solution) for a streaming ui 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.

Repo:
GitHub - https://github.com/e3ds/reactfull-static-file-serverhtml-control/tree/reactJs

For this tutorial, you must use this cp Control Panel for now:https://cp_streaminguitest.eaglepixelstreaming.com/

This document describes guidelines on how to use the E3DS core library for a frontend application to stream a UE app inside the web application. For making To make the system work one must have an account in the E3DS platform, upload a UE app, and create a configuration in the control panel.

...

First, I made sure that this URL works and streams without any issues: https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/E3DS-Iframe-Demo.

...

If we can construct a payload object for token generation based on that URL, then it will be like this: https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/E3DS-Iframe-Demo.

{
    "core": {
        "domain": "connector.eagle3dstreaming.com",
        "userName": "demo",
        "appName": "E3DSFeaturesTemplate",
        "configurationName": "E3DS-Iframe-Demo"
    }
}

...

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

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.

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");
}

Useful Global Functions:

Useful Global Functions in No-Iframe Solution

...

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