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

Once the plugin is enabled, add the Pixel Streaming Input component to any Actor Blueprint.

Best Practice: For better organization and scalability, add this component to your GameMode Blueprint, or create a dedicated messaging handler Actor that exists in every level.

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

When a message is received from the frontend, the On Input Event is triggered and passes a string containing a message.

In this case we simply use Print String to debug and view the incoming message

Suppose your frontend sends:

{
  "Player123"
}

If everything was done correctly you should see the message being printed on your screen 

Testing Without Uploads: Use Remote Unreal Editor Streaming with Eagle 3D

Eagle 3D Streaming enables you to stream your entire Unreal Editor directly through its platform, allowing seamless testing of message sending and receiving.

This approach lets you debug and validate your messaging workflows entirely within the Unreal Editor, eliminating the need to package and upload your application for every iteration — saving significant development time.

to do this first open your control panel on Eagle 3D Streaming website and select any of your uploaded applications

click on Create New Stream Link

change the config of your new link by clicking on the config and at the end of configs list select “Add New Config”

choose a name for your new config and press “Add”

now edit your new config

once the config page opens
Enable “Advanced Options”
then head over to “developer tab”
and enable “Remote Control Unreal Editor”

once you saved your config make sure your config is selected and copy the link to your app by clicking on the copy button associated with new config

now you will notice

now head over to the code for your frontend and and replace the source of pixel streaming iframe with new link you just copied.

now when you open your frontend you will notice that instead of your app launching a box will appear in the middle of screen with a link. copy this link.

Refreshing this page will invalidate your link

in unreal editor open the pixel streaming menu and choose “Use Remote Signaling Server”

once you click on it a field will open under it. paste the address which you copied from your stream here and choose to stream either full editor or level editor

A few seconds after clicking either button, your full Unreal Editor or Level Editor will appear directly in your browser. From there, you’ll have full functionality to send and receive messages between Unreal and your frontend—perfect for rapid iteration and debugging.

Troubleshooting Common Issues

1. Unreal Does Not Detect Messages

If Unreal isn’t receiving messages, check the following:

✅ Pixel Streaming Input Component

Ensure the component is added to the correct Blueprint.

✅ 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.

✅ Initialization Timing

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

✅ 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.

Remove Tick prints after debugging to avoid performance issues.

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)

✅ JSON Format

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

Need help?

🛠️ Contact our Support Team

💬 Join the Community on Discord

🆓 Get Started for free

Follow us on:

Facebook | GitHub | LinkedIn | YouTube