Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#F4F5F7

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

...