Send 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. Create the Json Object

To send data to the Unreal app via the iframe method, you must send a JSON object. If you need to send non-JSON data, you must use the no iframe solution (coming soon) instead.

The parent webpage (your webpage) will only forward messages to the Unreal app if the cmd value is "sendToUe4".

If you don’t include cmd: "sendToUe4", the parent webpage will still receive the message, but it will not forward it to the Unreal app.

Example:

CODE

let obj = {
  cmd: "sendToUe4", // Required command key
  value: {
    message: "Hello World!",
  },
};

Step 2. Send the Message to the Unreal App

What is postMessage()?
postMessage() is a built-in function that sends messages from the parent webpage to the child webpage. Here

The parent webpage: your HTML page
The child webpage: iframe that contains the Unreal app

If you don’t include cmd: "sendToUe4", the parent webpage will still receive the message, but it will not forward it to the Unreal app.

Since postMessage() only supports string data, you need to convert the object to a string using JSON.stringify():

CODE

let jsonString = JSON.stringify(obj);

Use the postMessage() function to send the string to the Unreal app via the iframe:

CODE

document.getElementById("iframe_1").contentWindow.postMessage(jsonString, "*");

iframe_1 is the ID of the iframe script embedding your Unreal application.

Step 3. Add a Button to Trigger the Message

Important: You should only send messages after the stream has fully loaded.

Here’s a simple test button that we’re adding just to demonstrate sending a message after the streaming has fully loaded in the demo:

CODE

<button onclick="sendMessage('Hello World')">Send Message to Unreal</button>

You can click this button once the stream is fully loaded to send a message to the Unreal application.

Full Example Code

HTML

<html>
  <head>
    <title>Send to Unreal</title>
    <script>
      //Create the JSON object and define the send function
      function sendMessage(val) {
        console.log("Sending value:", val);
        let obj = {
          cmd: "sendToUe4", //Required command key
          value: {
            message: val,
          }
        };

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

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

  <body>
    <div>
      <!-- Add a button to trigger the message -->
      <button onclick="sendMessage('Hello World')">Send Message to Unreal</button>
    </div>
       <!-- Embed the Unreal Engine app using Eagle 3D iframe -->
    <div>
      <iframe
        id="iframe_1"
        src="https://connector.eagle3dstreaming.com/v5/demo/E3DSFeaturesTemplate/iframe"
        height="100%"
        width="100%"
        allowfullscreen
        title="Unreal Stream"
      ></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