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

2. Afterward, we will use the e3dsCore.min.js script provided by E3DS, which can be found in the "dist" folder: dist/e3dsCore.min.js.

3. Next, we will connect to our HTML file by inserting our script within the head tag, resulting in the following HTML:

However, nothing will happen.

To initialize the process, you 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() W3Schools.com.

By inserting our script inside the head tag, our HTML becomes the following:

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

Open

Open

We need to provide a username also.

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:

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, we will be using a URL from Eagle 3d’s Account. In your case, you should use a URL from your own account.

First, we 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

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:

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 us looked like the following:

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-

After adding this div, our HTML becomes the following:

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.

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:

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