Receive Data in Unreal App (receiver) from Webpage (sender)

In this guide, you will learn how to receive and handle data sent from a webpage inside your Unreal Engine (UE) application.

Follow the steps below:

Step 1. Enable Pixel Streaming Plugin

Open your Unreal Engine project and enable the Pixel Streaming plugin.

Refer to the guide How to Enable Pixel Streaming Plugin

Step 2. Add the Pixel Streaming Input Component

Step 3. Use the "On Input Event"

After adding the Pixel Streaming Input component, a new event becomes available: On Input Event.

You can use it by:

• Selecting the Pixel Streaming Input component and finding the event under the Details Panel,
  or

• Right-clicking in the Blueprint Event Graph and searching for "On Input Event"

Step 4. Handle and Parse Incoming Messages

The On Input Event is triggered when a message is received from the frontend.
The event passes a string containing the message, which you can parse to trigger actions in UE.

In the below you can get multiple examples on how you can handle and parse incoming messages.

Example 1: Debugging with Print String

Use case: Display incoming messages for debugging.

Frontend sends:

{
  "Player123"
}

In UE:

• Use Print String to display the incoming message.

Example 2: Adjusting Stream Quality

Use case: Change stream quality dynamically.

From the previous sample “player name” is replaced with any arbitrary name (e.g., "Orange" or "Apple"). After receiving the value from the JSON message, the following console command is executed to adjust stream quality: PixelStreaming.Encoder.TargetBitrate <value>

Frontend sends:

{ "Quality": "Apple" }

• "Apple" → bitrate = 100 (low quality)

• "Orange" → bitrate = 100000 (high quality)

Example 3: Pause & Resume the Game

Use case: Temporarily halt gameplay for UI interactions.

Frontend sends:

{ "Teleport": "Pause" }

or

{ "Teleport": "Resume" }

• "Pause" → SetGamePaused = true

• "Resume" → SetGamePaused = false

To Pause and Resume the game, in front end two buttons are made which send messages {“Teleport”:Pause”} and {“Teleport”:”Resume”} . When the buttons are pressed Built-in unreal engine node SetGamePaused with values true for pausing and false for resuming are called.

Important: Enable "Tick Even When Paused" in Class Defaults, otherwise the game may not respond when paused.

Video: When pressing the buttons game gets paused and Resumed.

Testing Without Uploads – Remote Unreal Editor Streaming (Eagle 3D)

You can test message sending/receiving directly in Unreal Editor without packaging/uploading.

Steps:

1. Open Eagle 3D Streaming Control Panel → Select an uploaded app.

2. Create a New Config : Refers to Create a New Config

3. Enable Remote Control Unreal Editor : Enable Remote Control Unreal Editor

4. Copy the stream link from your config.

5. In your frontend code, replace the iframe source with this link.

6. Open the frontend → Copy the session link shown on-screen.
   

7. In UE, open Pixel Streaming Menu → Enable Use Remote Signaling Server → Paste the link → Choose Full Editor or Level Editor.
   
   

8. Now you can test sending & receiving messages in real time without new builds.
   

Troubleshooting Common Issues

If Unreal isn’t detecting messages:

1. Pixel Streaming Input Component

Ensure the component is added to the correct Blueprint.

2. Actor Presence

Ensure the Actor that owns the component is placed in the level and not being unloaded.

Note: If you're using a messaging handler Blueprint in the level, ensure it's not getting culled or deactivated due to distance from the camera or player.

3. Initialization Timing

Pixel streaming components may not be ready instantly at launch. Wait a short time before sending messages, especially during level load.

4. Component Validity

Check whether the component is valid:

Use the Is Valid node : in the following sample pixel streaming input component is added to game mode, in a separate blueprint (can be any blueprint) we get a reference of game mode then get “pixel streaming input” component by class and check whether it is valid or not and print the results

(For debugging) Print the component’s name on Tick to ensure it's initialized.

In this example we are simply printing the name of Pixel Streaming Input component on tick in game mode blueprint

When playing the game (play in editor or play a packaged game with packaging mode set to development or debug) you should see a similar print string happen on screen

Absence of this string means your Pixel Streaming Input component is not available.(if you need to only see one line of text on screen, in print string node you can set the duration to 0.0 seconds)

5. Valid JSON String Format

Ensure that the message you send is a valid JSON string. Improper formatting will cause parsing to fail silently.
Example:

      function sendToUE() {

        let obj = {          //json
          cmd: "sendDataToUE", 
          value: "Hello World",
        };

        let jsonString = JSON.stringify(obj);   //json string

        document
          .getElementById("iframe_1")
          .contentWindow.postMessage(jsonString, "*"); //sending json string
      }

Need help?

If you need any assistance, feel free to reach out through any of the following channels:

🛠️ Support Portal: Contact Our Support Team

💬 Discord Community (Faster Support): Join Our Discord Community

📧 Email Support: support@eagle3dstreaming.com

🆓 Get Started for free

Follow us on:

Facebook | GitHub | LinkedIn | YouTube