Receive Data in Webpage (receiver) from Unreal App (sender)

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

Add the following code inside a <script> tag in your HTML (preferably within the <head> or before the closing </body> tag):

HTML

window.addEventListener("message", messageHandler);

This line sets up an event listener on the browser window. It listens for messages from the iframe (which contains the UE app) and triggers the messageHandler function when a message is received.

Step 2: Handle and Log Incoming Messages

Now define the messageHandler function. In the example below, incoming data will be printed to the browser’s developer console:

CODE

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

The event.data contains the message payload sent from Unreal.

Figure 1. Console log of a message received from UE

By receiving structured messages from Unreal, your webpage can respond dynamically—enabling powerful interactive features between the frontend and the UE application.

Full Example Code:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>UE to Webpage Data Receiver</title>
    <script>
      // Define the function that will handle incoming messages
      function messageHandler(event) {
        console.log("Message from UE → Iframe:", event.data);
      }
      // Register an event listener to listen for messages from the iframe (UE app)
      window.addEventListener("message", messageHandler);
    </script>
  </head>

  <body>
    <div>
      <!-- This is the iframe where the Unreal Engine application is embedded -->
      <iframe
        id="iframe_1"
        style="visibility: visible"
        src="https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/fakhrul"
        height="100%"
        width="100%"
        allowfullscreen
        title="Unreal App"
      ></iframe>
    </div>
  </body>
</html>

Need help?

🛠️ Contact our Support Team

💬 Join the Community on Discord

🆓 Get Started for free

Follow us on:

Facebook | GitHub | LinkedIn | YouTube