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):
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:
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:
<!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>
Demo Video
Need help?
🛠️ Contact our Support Team
💬 Join the Community on Discord
Follow us on: