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:

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

Expand to view the complete example.

index.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?

If you need any assistance, feel free to reach out through any of the following channels:

🛠️ Support Portal: Contact Our Support Team

💬 Discord Community (Faster Support): Join Our Discord Community

📧 Email Support: support@eagle3dstreaming.com

🆓 Get Started for free

Facebook | GitHub | LinkedIn | YouTube