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.
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.
(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-
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.
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 Token on each visitor bidah impractical for production.
So you have to generate the Token automatically upon each visit .
So we have provided a nodejs App that uses our token API, which can be found in this branch:
if all info was provided correctly that will start the session automatically.
Note:
Although you can call the token generating api on every page load, we do not recommend calling the token generating api from front-end. It could make your api key public, which can be misused by someone to delete or make changes to your apps. In that case Eagle 3D Streaming would not be responsible. We suggest using a node server to call that api for that security reason.
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.
Was this article helpful? Let us know your feedback.