AReceive Data in Webpage from Unreal App

In this guide, we’ll show you how to receive data from an Unreal Engine (UE) application (sender) into your webpage (receiver) using the Eagle 3D Streaming iframe-based integration.

Follow the steps below

Step 1: Listen for Incoming Messages

HTML

window.addEventListener("message", eventHandler); //listening to messages sent from the iframe

Register an event listener on the browser window.
It listens for messages sent to the webpage using postMessage from inside the embedded iframe (Unreal app).
When a message is received, the eventHandler function is triggered.

Step 2: Handle and Filter Messages

const eventHandler = (event) => {
  console.log("Message From UE → Iframe:", event.data);

  if (typeof event.data === "string" && event.data.includes("cmd")) {
    const parsedData = JSON.parse(event.data); // Convert JSON string to object

    if (parsedData.cmd) {
      HandleResponseFromUE4(parsedData); // Pass the command object for processing
    }
  }
};

This function receives the raw event.data sent from the Unreal app.
It checks if the data is a string and includes a cmd field (to ensure it’s from UE).
Then it parses the JSON string into an object.
Finally, it passes the object to the HandleResponseFromUE4() function to act on it.

Step 3. Process the UE Message

function HandleResponseFromUE4(jsonObj) {
  console.log("Received from UE:", jsonObj);

  switch (jsonObj.cmd) {
    case "launchUrl":
      if (jsonObj.value && typeof jsonObj.value === "string") {
        let url = jsonObj.value.trim(); // Remove leading/trailing spaces
        console.log(url);
        window.open(url, "_blank"); // Open the link in a new tab
      }
      break;

    default:
      break;
  }
}

This function processes the actual data Unreal sends.
In this example, if the command is "launchUrl":
- It reads the value field (the URL).
- Cleans it using .trim().
- Opens the link in a new browser tab using window.open().

You can extend the switch block with more case statements to handle different commands sent from UE.

Step 4. Now whole simple code is like below

HTML

<html>
  <head>
    <title>Demo</title>
    <script>
      function HandleResponseFromUE4(jsonObj) {
        console.log("Received from UE:", jsonObj);

        switch (jsonObj.cmd) {
          case "launchUrl":
            if (jsonObj.value && typeof jsonObj.value === "string") {
              let url = jsonObj.value.trim(); //remove white space
              console.log(url);
              window.open(url, "_blank");
            }
            break;

          default:
            break;
        }
      }

      const eventHandler = (event) => {
        console.log("Message From UE4-- > Iframe  :", event.data);
        if (typeof event.data === "string" && event.data.includes("cmd")) {
          const parsedData = JSON.parse(event.data);
          if (parsedData.cmd) {
            //it is a data from unreal
            HandleResponseFromUE4(parsedData); //process the data sent by ue4
          }
        }
      };

      window.addEventListener("message", eventHandler); //listening to messages sent from the iframe
    </script>
  </head>

  <body>
    <div>
      <iframe
        id="iframe_1"
        style="visibility: visible"
        src="https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/fakhrul"
        height="100%"
        width="100%"
        allowfullscreen
        title="host"
      ></iframe>
    </div>
  </body>
</html>

Demo Video

Need help?

🛠️ Contact our Support Team

💬 Join the Community on Discord

🆓 Get Started for free

Facebook | GitHub | LinkedIn | YouTube