Embedding Stream into webpage - no iframe solution

Information on on how to develop a customized version of frontend and host it through your own hosting method.

Instructions

We will integrate “E3DS core library“ into a demo frontend to take care of all the complex streaming side operations.

Note : To make the system work, one MUST HAVE an Eagle 3D user Account, Upload an App, and create a Config in the control panel.

demo Frontend Repo : https://github.com/e3ds/full-html-control/tree/html/ejs

Integrating the pixel streaming element in the HTML page:

Let’s create a normal HTML file first to showcase how we can attach it easily.

HTML

<!DOCTYPE html>
<html>
<head>
<title>minimal demo</title>
</head>
<body>

</body>
</html>

Afterward, we will be using a script e3dsCore.min.js provided to us by E3DS. it can be found inside the dist folder.
"dist/e3dsCore.min.js

We move on to connecting to our html file now. By inserting our script inside the head tag, our HTML becomes the following -

CODE

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src= "dist/e3dsCore.min.js"></script>
</head>
<body>
</body>
</html>

However, nothing will happen. to initialize the process u need to call a function main() which can be referenced by e3ds_controller object produced by “e3dsCore.min.js“ file.

e3ds_controller.main(e3ds_session_token,clientUserName)

we will call it inside window.onload() https://www.w3schools.com/jsref/event_onload.asp . By inserting our script inside the head tag, our HTML becomes the following -

CODE

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src= "dist/e3dsCore.min.js"></script>
<script >

window.onload = function () 
				{
					 
					e3ds_controller.main()
					
				}


</script>
</head>
<body>
</body>
</html>

we will get an “invalid e3ds_session_token:” error which indicates that we forgot to provide a token.

CODE

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <script type="text/javascript" src= "dist/e3dsCore.min.js"></script>
      <script >
         window.onload = function ()				{
         				e3ds_controller.main("mytoken")
         				
         			}
         			
         			
      </script>
   </head>
   <body></body>
</html>

We need to provide a username also.

CODE

<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <script type="text/javascript" src= "dist/e3dsCore.min.js"></script><script >
         window.onload = function ()				
                    {
                    e3ds_controller.main("mytoken","myusername")
         				
         			}
      </script>
   </head>
   <body></body>
</html>

This token was not found because the system doesn't have any reference which indicates that this token was created via the system.

we have to generate a token here. and to make this token work with our present task, we have to generate it against a specific payload which has to be a JSON object. for our task purpose, this payload has to have at least these fields:

CODE

{
  "core": {
    "domain": "streaming domain",
    "userName": "clientUserName",
    "appName": "App that available in your control panel",
    "configurationName": "config that available in your control panel"
  }
  
}

userName: the user name for which it will stream
appName: the name of the app that will stream
configurationName: the name of the configuration in the control panel with which the app will stream

To make things clear let's grab all that info from a working version of streaming URL. here for the purpose of this tutorial, I will be using a URL from Eagle 3d’s Account. In your case, you have to use a URL from your own account.

First, I made sure that this URL works and does streaming 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

CODE

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

Now go to :

https://account.eagle3dstreaming.com/streaming-session-token-generator
and follow steps 1,2,3 and 4 sequentially as shown in the image below:

(refer to this document for more details on how to generate a Session Token)

Also, you will need your username as mentioned in step5.

In step 4, you will copy the token and paste it into the html page code. as well as the username. The final code for me looked like this:

CODE

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src= "dist/e3dsCore.min.js"></script>
<script >

window.onload = function () 
				{
					var mytoken ="24008085777987916996261319834541548/U2FsdGVkX1+8P8VQQmnnIM+LC/c3iBBHHjBiFZXywdd/WDkiP+wN2WTygE9cP8dO4JYyjtErQJwYWKXuzfyrWlk/BE9FqyKP1k6zhzkgES9n0Upt1zdTKxJdhErK4RtvpPSDUatlLj0mvE4+vrqEgCG7h6ynSFgKxyFLX9LWrrKz9jTDW3CCTVD36BTqxGFsnz2dGwEawl7RrCfTEwcsye75SDXEEfA/AqQdZBRWgPjKmoJK9q8X3pGxzxGmMoqBfpC3U6plqDhXkvTOyEivxgWq/8dStffvU7UTwYg6Xj6BD87VFhe5jTVDTjnOnJ+8"
					var myusername="demo"
					e3ds_controller.main(mytoken,myusername)
					
				}


</script>
</head>
<body>
</body>
</html>

If you reload the page, you will get a new error:

This is because for rendering our video stream, we need a div of video type where that will be shown on the webpage. For adding that, we need to add the below div with the structure exactly as given with respected IDs and styles inside our body tag-

CODE

<div id="playerUI"  style="display: block;" >
    <div id="player"  style="display: block;">
        <video id="streamingVideo" playsinline >      
           <source src="" type="video/mp4">
        </video>
    </div>
</div>

After adding this div, our HTML becomes the following -

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src= "dist/e3dsCore.min.js"></script>
<script >

window.onload = function () 
				{
					var mytoken ="90035352834654916996276959789204824/U2FsdGVkX1/d6fdh8HE26ZG2E0BVYJRc965M8Dli1xf5Mdq2PwuOFCJflW8lJMQ4diZ2qJ0AeMzo5pTte6pZLGrovhhMwXe7O2B2OI1tnlY0c0zKbRX/lmgbQoo1rdLQ23uaHvqOXglKpjo2Eb/LmENha1m0+7GcvVqHTlIn5MLvNhhvilUrHh/8DTAPEDqFUYng6szZ1KOwEL9xTAthcrIbF8RZMahlcmVdXhjs4Hc+f4p+cj54LNrflgreJarfwH5gze3pubJayN3GeE8KIaooruOvUDc/QoHPW9hoa372u2bP9trgjjFg0oV2g8O5"
					
					var myusername="demo"
					e3ds_controller.main(mytoken,myusername)
					
				}


</script>
</head>
<body>
  <div id="playerUI"  style="display: block;" >
      <div id="player"  style="display: block;">
          <video id="streamingVideo" playsinline >      
            <source src="" type="video/mp4">
          </video>
      </div>
  </div>
</body>
</html>

The stream will start on the left side.

Note :
The moment page send the token to server , it becomes invalid to used for 2nd time . You cannot use same token for 2nd time. Also there is a time limit on each token. System will automatically expire unused token after that specific time period.

This whole minimal version of source code can be found in the branch:
https://github.com/e3ds/streaming_ui/tree/demo-static_token

File name is :

minimal.html

Note :
It might take some time to load if it is the first load after a recent app update have been uploaded. Also there could be many other factors. that's why we need to show a progress bar and other UI stuffs to keep users entertained during the process of loading the stream.

Refer to this document to customize the Loading screen with 2D Assets (for a better Loading experience). and to this document to customize it with a 3D Asset (i.e. video).

We have provided a full example with all required ui elements in the same branch with file name:

full.html

In the future, we will add a more detailed explanation of all these UI elements.

Method 2:

Manually generating tokens for each visitor becomes impractical for production.

So you have to generate the Token automatically upon each visit.

So we have provided a node js App that uses our token API, which can be found in this branch:

https://github.com/e3ds/full-html-control/tree/html/ejs

1. Use the following command to directly clone the branch:

CODE

git clone -b html/ejs  --single-branch https://github.com/e3ds/full-html-control

2. Open tokenServer.js

3. You have to replace the following info inside tokenServer.js :

CODE

const apiKey = "your streaming api key"  // collect from https://account.eagle3dstreaming.com/streaming-api-keys-management
const tokenExpiryDuration = 60000
var clientUserName = "your user name";
var streamingAppInfo = 
                        {
                          "core": {
                            "domain": "your domain",
                            "userName": clientUserName,
                            "appName": "your app name",
                            "configurationName": "your config name"
                          }
                        }

4. You can collect streaming API Key from this URL:

https://account.eagle3dstreaming.com/streaming-api-keys-management

5. If you are using production system then domain would be “connector.eagle3dstreaming.com“. If you are provided with a dedicated system, then domain would be the domain of that dedicated system.

If you are on windows then:
6. first, install node js

Run setup.bat
Then run startTokenServer.bat
open browser and in address bar put :

https://localhost:55555/testToken

if all info was provided correctly that will start the session automatically.

Note:

Calling Token Generating API in the front-end exposes your Streaming API Key. Although it can’t be used to delete your apps or replace them with different apps, someone can misuse it to stream your apps without your permission. In such cases Eagle 3D Streaming will not be responsible. To avoid such incident we suggest calling the Token Generating API from Back-end. And passing that token to Front-end by server side rendering technique.

Useful Document for Adding Multiple App and Config Support:

See this document for adding multiple app and config support in no-iframe implementation.

Useful Global Functions:

See this document for the useful Global Functions.

Communication between web app and UE app

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

CODE

    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.

Troubleshooting notes :

e3ds_controller gets define once data communication started with eagle backend . If you are trying to send before that than e3ds_controller will be found as undefined .
And sendToUnreal function gets defined once video stream starts . If you calling this function before stteaming started than this function will be found undefined. Make sure u not calling them too early . We have put events to help developers to find out which event is ready when .

To get notify when system ready to send data you can utilize data channel created or open event . Once that event has been called only then try to send data to unreal

Was this article helpful? Let us know your feedback.

Need help? Contact Support

Submit a new request at E3DS support portal.

Requests sent on weekends will not be addressed until the following business day.