Panel | ||||||
---|---|---|---|---|---|---|
| ||||||
Source: https://github.com/e3ds/E3DS-Iframe-Demo/tree/iframe-demo-html Iframe Demo: https://iframe.eagle3dstreaming.com/ ReactJS Iframe Demo: https://iframe_react.eagle3dstreaming.com/ UE5 Iframe Demo: https://iframe_ue5.eagle3dstreaming.com/ Unreal project source code used in the demo: https://bitbucket.org/Eagle3DStreaming/e3dsfeaturestemplate/ |
Info |
---|
More detailed doc to embed iframe to any webpage :Refer to Multiplayer Demo, Embed Stream into Webpage using iFrame and communicate with Unreal App. |
Overview
Communication means the transmission of data between two people or entities. Where one will send data and another one will receive it and vice versa.
...
Code Block |
---|
function HandleResponseFromUE4(jsonObj) { //process whatever u want to do with your object { Process the JSON object sent by the Unreal app to the webpage console.log(jsonObj); if if(window.e3ds.events[jsonObj.cmd]) { window.e3ds.events[jsonObj.cmd](jsonObj); } } //eagle3dstreaming's Server to Iframe communication const eventHandler = (event) => { console.log('Message From SS -- > Iframe ', event.data); // This function will receive all kinds of events the webpage receives // Check if event.data.type exists to identify if it was sent by the Unreal app if (!event.data.type) { // is itIf event.data includes a field named cmd, then this data is notcoming from serverthe Unreal app. { console.log('Message From UE4-- > Iframe :', event.data);// If your Unreal app uses a different field name, replace this field name with the one you have used in your Unreal app if (typeof event.data === 'string' && event.data.includes('cmd')) { // We are sending data as a string. Now we try to parse it to check // if this string represents a JSON or not. // If you are sending a normal string from the Unreal app, then this is not needed const parsedData = JSON.parse(event.data); if (parsedData.cmd) { //than It is itJSON aobject data sent from ue4UE4 ??? HandleResponseFromUE4(parsedData); //process Process the data sent by ue4UE4 } } } } // We } } are binding eventHandler to receive all kinds of messages the webpage receives window.addEventListener("message", eventHandler); |
...
Go to the following document to learn about how to set custom resolution from your webpage.
Part-5:
How to send a Pixel Streaming Response from unreal app to webpage
Useful Events:
See this document on Useful Events in Iframe Solution.
Info |
---|
More detailed doc to embed iframe to any webpage :Refer to Multiplayer Demo, Embed Stream into Webpage using iFrame and communicate with Unreal App. |
Need help? Contact Support
...