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 registers an event listener on the browser window. It listens for messages sent from the Unreal app inside the embedded iframe, and calls the messageHandler function when a message is received.

Step 2: Print the messages

Now, define the messageHandler function that will process incoming messages. In this example, we're simply printing the received message to the browser console:

CODE

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

The event.data contains the information sent by the UE app (typically in JSON format).

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