Space for Fakhrul Islam

Receive Data in Webpage from Unreal App

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



Prerequisites:

  • Ensure you're using the E3DS Core Library in your HTML

  • Unreal Engine project must be using EmitToUI() or similar Blueprint/C++ method to send data to the browser.





Follow the steps below:



Step 1. Use the onResponseFromUnreal Callback


Attach a function to e3ds_controller.callbacks.onResponseFromUnreal to handle incoming messages from the Unreal Engine app:


<script>
  // Attach a callback to handle incoming data from Unreal
  e3ds_controller.callbacks.onResponseFromUnreal = function (descriptor) {
      // descriptor is the data sent from Unreal — could be a string or a JSON object
      console.log("onResponseFromUnreal triggered");
      console.log("UnrealResponse:", descriptor);

      // Update the webpage with the received data
      document.getElementById("LatencyStats").innerHTML = descriptor;
  };
</script>


Note: This callback is automatically triggered when Unreal sends data using EmitToUI() or a similar method.


e3ds_controller is provided by the Eagle 3D Streaming library: https://e3ds.github.io/public-release/e3dsCore.min.js


Ensure that your HTML page includes the E3DS Core Library:

<script src="https://e3ds.github.io/public-release/e3dsCore.min.js"></script>








Step 2. Add a Placeholder Element to Show the Response

In your HTML, include an element where the Unreal response will be displayed:

<!-- This div will be updated with data received from Unreal -->
<div id="LatencyStats" style="margin-top: 10px; padding: 8px; background: #f0f0f0;">
  Waiting for Unreal response...
</div>








Full Example Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Receive Data from Unreal</title>
  <script src="https://e3ds.github.io/public-release/e3dsCore.min.js"></script>
</head>
<body>

  <!-- Placeholder to show incoming message from Unreal -->
  <div id="LatencyStats" style="margin-top: 10px; padding: 8px; background: #f0f0f0;">
    Waiting for Unreal response...
  </div>

  <script>
    // Register a callback function to handle data sent from Unreal Engine
    e3ds_controller.callbacks.onResponseFromUnreal = function (descriptor) {
        // Log the response for debugging
        console.log("onResponseFromUnreal triggered");
        console.log("UnrealResponse:", descriptor);

        // Display the response in the UI
        document.getElementById("LatencyStats").innerHTML = descriptor;
    };
  </script>
</body>
</html>







 


Need help?

🛠️ Contact our Support Team

💬 Join the Community on Discord

🆓 Get Started for free

 

Follow us on:

Facebook | GitHub | LinkedIn | YouTube