ASend Data from Webpage (sender) to Unreal App (receiver)

In this guide, we’ll show you how to send data from a webpage (sender) to an Unreal Engine application (receiver) using the Eagle 3D Streaming system.

Follow the steps below:

Step 1: Embed the Unreal App in an Iframe

To embed your Unreal app into a webpage, you need the correct iframe code. Follow this official guide: How to Copy a Streaming Iframe Script

Add this to your HTML page:

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

Step 2. Add a Button to Trigger the Message

<button onclick="switchTo('2')">Send Message to Unreal</button>

You can replace '2' with any string you want to send to Unreal. This allows users to pass any custom data as needed.You can replace '2' with any value you want to send to Unreal.

Step 3. Write JavaScript to Send the Message

Write a JavaScript function that creates a message in a specific format and sends it to the Unreal Engine application running inside the iframe.

What We’re Doing:

When the user clicks a button, the webpage needs to:

Create a JavaScript object containing the data we want to send to Unreal
Convert that object into a JSON string (Unreal expects the message in this format)
Send it using the browser’s postMessage() API to the iframe that contains the UE app

In <head> or before </body>, add this script:

HTML

<script>
  function switchTo(val) {
    console.log("Sending String is:", val);

    //  1: Create the object
    let obj = {
      cmd: "sendToUe4",         // This tells Unreal to expect custom input
      value: {
        Teleport: val           // This is the data Unreal will use
      }
    };

    // 2: Convert object to JSON string
    let jsonString = JSON.stringify(obj);

    // 3: Send the message to the UE app via the iframe
    document.getElementById("iframe_1").contentWindow.postMessage(jsonString, "*");
  }
</script>

Step 4. Now whole simple code is like below

HTML

<html>
  <head>
    <title>Demo</title>
    <script>
      function switchTo(val) {
        console.log("Sending String is: ", val);
         let obj = {
          cmd: "sendToUe4",
          value: {
            Teleport: val,
          },
        };
        document
          .getElementById("iframe_1")
          .contentWindow.postMessage(JSON.stringify(obj), "*");
      }
    </script>
  </head>

  <body>
    <div><button onclick="switchTo('2')">Send Message to Unreal</button></div>
    <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