Skip to main content
Skip table of contents

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.

image-20250731-191822.png

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

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.