Page Comparison

This is a forked and tweaked version of streaming Ui-Minimal initialization of pixel streaming to a webpage 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.

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

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

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.

Method 1: Manually add token before accessing the stream

Let’s create a react app using create-react-app cli.

...

First, I made sure that this URL works and streams without any issues: https://connector_streaminguitest.eaglepixelstreamingeagle3dstreaming.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_streaminguitest.eaglepixelstreamingeagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/E3DS-Iframe-Demo.

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

...

The whole source code can be found in the branch:
GitHub - e3ds/react-static-file-server as demo-static-token

Method 2: Generating a token at html fetch from server

Generating a token every time could be a problematic process. So, I have provided a Node.js app that uses our token API, and it can be found in this branch:
GitHub - e3ds/react-static-file-server at main

...

If all info was provided correctly, the session will start automatically.

How it works:

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