StreamingUI

{"type":"doc","content":[{"type":"paragraph","content":[{"text":"This is a forked and tweaked version of ","type":"text"},{"text":"Embed streaming into a Webpage (no iframe solution)","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://eagle3dstreaming.atlassian.net/wiki/spaces/docs/pages/222593025"}}]},{"text":" for a streaming ui implementation using angular framework. ","type":"text"},{"type":"hardBreak"},{"text":"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.","type":"text"},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"Repo:","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://github.com/e3ds/full-html-control/tree/angularJs"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"For this tutorial, you must use ","type":"text"},{"text":"this Control Panel","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://controlpanel.eagle3dstreaming.com"}}]},{"text":" for now.","type":"text"},{"type":"hardBreak"},{"type":"hardBreak"},{"text":"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. 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.","type":"text"},{"type":"hardBreak"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Method 1: Manually add a token before accessing the stream","type":"text"}]},{"type":"paragraph","content":[{"text":"Let’s create an angular app using ","type":"text"},{"text":"@angular/cli","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]},{"type":"codeBlock","content":[{"text":"ng create streaming-ui --skip-tests","type":"text"}]},{"type":"paragraph","content":[{"text":"After this is completed, we will take a look at the ","type":"text"},{"text":"index.html","type":"text","marks":[{"type":"code"}]},{"text":" in the ","type":"text"},{"text":"public","type":"text","marks":[{"type":"code"}]},{"text":" folder.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n\n\n \n StreamingUI\n \n \n \n\n\n \n\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Now we are going to put the script e3dsCore.min.js provided by E3DS into the ","type":"text"},{"text":"src/scripts","type":"text","marks":[{"type":"code"}]},{"text":" folder. We move on to connecting to our ","type":"text"},{"text":"index.html","type":"text","marks":[{"type":"code"}]},{"text":" file now. By inserting our script inside the head tag, the ","type":"text"},{"text":"index.html","type":"text","marks":[{"type":"code"}]},{"text":" becomes the following:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n\n\n \n StreamingUI\n \n \n \n \n\n\n \n\n","type":"text"}]},{"type":"paragraph","content":[{"text":"And in ","type":"text"},{"text":"angular.json","type":"text","marks":[{"type":"code"}]},{"text":", go to ","type":"text"},{"text":"projects.streaming-ui.architect.options.assets","type":"text","marks":[{"type":"code"}]},{"text":" and add ","type":"text"},{"text":"\"src/scripts\"","type":"text","marks":[{"type":"code"}]},{"text":". Otherwise the angular serve would not conside the script folder when serving the application.","type":"text"}]},{"type":"paragraph","content":[{"text":"However, nothing will happen. To intilaize the process you need to call a function ","type":"text"},{"text":"main()","type":"text","marks":[{"type":"code"}]},{"text":" which can be referenced by ","type":"text"},{"text":"e3ds_controller","type":"text","marks":[{"type":"code"}]},{"text":" object produced by ","type":"text"},{"text":"e3dsCore.min.js","type":"text","marks":[{"type":"code"}]},{"text":" file.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"e3ds_controller.main(e3ds_session_token, clientUserName)","type":"text"}]},{"type":"paragraph","content":[{"text":"We will call it inside window.onload() ","type":"text"},{"type":"inlineCard","attrs":{"url":"https://www.w3schools.com/jsref/event_onload.asp"}},{"text":". With inserting our script inside the head tag, our html becomes the following:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n\n\n \n StreamingUI\n \n \n \n \n \n\n\n \n\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"We will get ","type":"text"},{"text":"invalid e3ds_session_token","type":"text","marks":[{"type":"code"}]},{"text":" error which indicates that we forgot to provide a token.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1510,"id":"007f9112-eb03-472f-9f17-673aadac0397","collection":"contentId-244875265","type":"file","height":883}}]},{"type":"codeBlock","content":[{"text":"\n\n\n \n StreamingUI\n \n \n \n \n \n\n\n \n\n","type":"text"}]},{"type":"paragraph","content":[{"text":"We need to provide username too. Otherwise we’ll get the ","type":"text"},{"text":"invalid clientUserName","type":"text","marks":[{"type":"code"}]},{"text":" error.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1511,"id":"6c89d902-ad31-4193-a736-a3c3582a0176","collection":"contentId-244875265","type":"file","height":885}}]},{"type":"paragraph"},{"type":"codeBlock","content":[{"text":"\n\n\n \n StreamingUI\n \n \n \n \n \n\n\n \n\n","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"This token was not found because system doesn't have any reference which indicates that this token was created via the system.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1511,"id":"a6050451-20a4-4dec-a764-3752a7e0b70a","collection":"contentId-244875265","type":"file","height":882}}]},{"type":"paragraph","content":[{"text":"We need 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's purpose, this payload has to have at least these fields:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"text":"{\n \"core\": {\n \"domain\": \"streaming domain\",\n \"userName\": \"clientUserName\",\n \"appName\": \"App available in your control panel\",\n \"configurationName\": \"config available in your control panel\"\n }\n}","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"userName","type":"text","marks":[{"type":"strong"}]},{"text":": the username for which it will stream","type":"text"},{"type":"hardBreak"},{"text":"appName","type":"text","marks":[{"type":"strong"}]},{"text":": the name of the app that will stream","type":"text"},{"type":"hardBreak"},{"text":"configurationName","type":"text","marks":[{"type":"strong"}]},{"text":": the name of the configuration in the control panel with which the app will stream","type":"text"}]},{"type":"paragraph","content":[{"text":"To make things more clear, let's grab all those pieces of information from a working version of the 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.","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"First, I made sure that this URL works and streams without any issues: ","type":"text"},{"text":"https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/E3DS-Iframe-Demo","type":"text","marks":[{"type":"link","attrs":{"href":"https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/E3DS-Iframe-Demo"}}]},{"text":".","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":731,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1227,"id":"13a8d1c3-e440-4bf4-abd0-0d558386f1f9","collection":"contentId-244875265","type":"file","height":814}}]},{"type":"paragraph","content":[{"text":"If we can construct a payload object for token generation based on that URL, then it will be like this: ","type":"text"},{"text":"https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/E3DS-Iframe-Demo","type":"text","marks":[{"type":"link","attrs":{"href":"https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/E3DS-Iframe-Demo"}}]},{"text":".","type":"text"}]},{"type":"codeBlock","content":[{"text":"{\n \"core\": {\n \"domain\": \"connector.eagle3dstreaming.com\",\n \"userName\": \"demo\",\n \"appName\": \"E3DSFeaturesTemplate\",\n \"configurationName\": \"E3DS-Iframe-Demo\"\n }\n}","type":"text"}]},{"type":"paragraph","content":[{"text":"Now go to ","type":"text"},{"text":"https://account.eagle3dstreaming.com/streaming-session-token-generator","type":"text","marks":[{"type":"link","attrs":{"href":"https://account.eagle3dstreaming.com/streaming-session-token-generator"}}]},{"text":" and follow the steps 1, 2, 3 and 4 sequentially as shown in the image.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":731,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1227,"id":"408d4bf3-a7e4-4ba9-91db-d971b58d7af6","collection":"contentId-244875265","type":"file","height":972}}]},{"type":"paragraph","content":[{"text":"Also you will need your username as mentioned in step 5.","type":"text"}]},{"type":"paragraph","content":[{"text":"In step 4 you will copy the token and paste it into the ","type":"text"},{"text":"index.html","type":"text","marks":[{"type":"code"}]},{"text":" page code as well as username. Final code for me looked like this:","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n\n\n \n StreamingUI\n \n \n \n \n \n\n\n \n\n","type":"text"}]},{"type":"paragraph","content":[{"text":"Now I get this error:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1511,"id":"5416d701-c500-4416-8ac7-6cb368d114d2","collection":"contentId-244875265","type":"file","height":883}}]},{"type":"paragraph","content":[{"text":"This is because, for rendering our video stream, we need a video-type element that will be displayed on the webpage. To add that, we need to include the following div with the structure exactly as given, with respected IDs and styles, inside our Angular App. For that we can change the functional component in ","type":"text"},{"text":"app.component.html","type":"text","marks":[{"type":"code"}]},{"text":" as such:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"

","type":"text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Stream will start on the left side. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1511,"id":"c42c10b0-63b5-402a-956b-1cde65defca2","collection":"contentId-244875265","type":"file","height":882}}]},{"type":"paragraph","content":[{"text":"It might take some time to load, especially on the first load after a recent update and due to many other factors. That's why we need to show a progress bar and other elements to keep the user entertained during the process of loading the stream.","type":"text"}]},{"type":"paragraph","content":[{"text":"The whole source code can be found in the branch:","type":"text"},{"type":"hardBreak"},{"text":"GitHub - e3ds/angular-static-file-server as demo-static-token","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/e3ds/angular-static-file-server/tree/demo-static_token"}}]},{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Method 2: Generating a token at html fetch from server","type":"text"}]},{"type":"paragraph","content":[{"text":"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:","type":"text"},{"type":"hardBreak"},{"text":"GitHub - e3ds/angular-static-file-server at main","type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/e3ds/angular-static-file-server/tree/main"}}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"This is a combined app. First part contains the built version of the angular app. Second part contains a rudimentary express.js app. This method only works with a prod build of the angular app since it uses the express.js app to serve the file. So, angular serve or live reload mode doesn’t work. ","type":"text"},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"1. Checkout the branch","type":"text"},{"type":"hardBreak"},{"text":"2. Open ","type":"text"},{"text":"src/server.js","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"3. In ","type":"text"},{"text":"angular.json","type":"text","marks":[{"type":"code"}]},{"text":", go to ","type":"text"},{"text":"projects.streaming-ui.architect.options.assets","type":"text","marks":[{"type":"code"}]},{"text":" and add ","type":"text"},{"text":"\"src/server.js\"","type":"text","marks":[{"type":"code"}]},{"text":" after ","type":"text"},{"text":"\"src/scripts\"","type":"text","marks":[{"type":"code"}]},{"text":". Otherwise the angular build would not take the ","type":"text"},{"text":"server.js","type":"text","marks":[{"type":"code"}]},{"text":" file when building the application.","type":"text"},{"type":"hardBreak"},{"text":"4. You have to replace these info in this image, Or you can try with these for now:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":678,"alt":"image-20240109-132459.png","id":"24591991-2c81-44ff-a70c-68bd9de6ca68","collection":"contentId-244875265","type":"file","height":274}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"5. you can collect API key from this URL: ","type":"text"},{"text":"https://account.eagle3dstreaming.com/api-keys-management","type":"text","marks":[{"type":"link","attrs":{"href":"https://account.eagle3dstreaming.com/api-keys-management"}}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1126,"id":"f6adf036-ae3a-48bf-b40c-a641a6d6aefa","collection":"contentId-244875265","type":"file","height":830}}]},{"type":"paragraph","content":[{"text":"6. Run ","type":"text"},{"text":"setup.bat","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"7. Run ","type":"text"},{"text":"build.bat","type":"text","marks":[{"type":"code"}]},{"text":" ","type":"text"},{"type":"hardBreak"},{"text":"8. Then run ","type":"text"},{"text":"token-server.bat","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":"9. Open browser and go to: ","type":"text"},{"text":"http://localhost:4200/","type":"text","marks":[{"type":"link","attrs":{"href":"http://localhost:4200/"}}]}]},{"type":"paragraph","content":[{"text":"If all info was provided correctly, the session will start automatically.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"How it works:","type":"text"}]},{"type":"paragraph","content":[{"text":"When a browser tries to fetch the index.html, the server queries the token from e3ds server and injects into the html along with ","type":"text"},{"text":"clientUserName","type":"text","marks":[{"type":"code"}]},{"text":" and serves it to the browser.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Useful Global Functions:","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://eagle3dstreaming.atlassian.net/wiki/spaces/docs/pages/418414595"}},{"text":" ","type":"text"}]},{"type":"rule"},{"type":"expand","attrs":{"title":"Communication between web app and UE app"},"content":[{"type":"paragraph","content":[{"text":"To send message to UE app from the web app call “","type":"text"},{"text":"e3ds_controller.sendToUnreal","type":"text","marks":[{"type":"strong"}]},{"text":"” .","type":"text"},{"type":"hardBreak"},{"text":"we will do some major change into it soon. right now it expects a json object. we are planning to change it to a string ","type":"text"},{"type":"hardBreak"},{"text":"Example:","type":"text"}]},{"type":"codeBlock","content":[{"text":" window?.e3ds_controller.sendToUnreal({\n Teleport: pos\n });","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"When a message comes from the UE app the “","type":"text"},{"text":"onResponseFromUnreal(descriptor)","type":"text","marks":[{"type":"code"}]},{"text":"“ function is called in global scope. The parameter of the function holds the message.","type":"text"},{"type":"hardBreak"}]}]}],"version":1}

Browser not supported