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 site will only forward messages to the Unreal app if the cmd value is "sendToUe4".

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

Example:

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

Step 2. Send the Message to the Unreal App

What is postMessage()?
postMessage() is a JavaScript function that allows cross-origin communication between a webpage and an iframe (or between browser windows).

Why use it?
It allows the webpage to send data to the parent website , which then forwards the message to the Unreal app, if the message is valid (i.e., contains cmd: "sendToUe4").

If you don’t include this cmd, the parent site receives the message but doesn’t know what to do with it.

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

let jsonString = JSON.stringify(obj);

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

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:

<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: 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>

Demo Video

Need help?

🛠️ Contact our Support Team

💬 Join the Community on Discord

🆓 Get Started for free

Facebook | GitHub | LinkedIn | YouTube