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 JSON message.

You can:

(i) Use Print String to debug and view the incoming message

(ii) Parse the string and extract individual data fields

Example: Showing Username from JSON

Suppose your frontend sends:

{
  "username": "Player123"
}

There are three common ways to parse JSON messages in Unreal Blueprints:

• Built-in string parsing nodes (e.g., Parse Into Array, Contains)
  – Fastest for very simple use cases (1–2 messages).

• Json Blueprint Utilities Plugin
  – More structured and robust than manual parsing. Still under development but suitable for most tasks.

• VaRest Plugin
  – Most robust solution. Available from the Unreal Marketplace. Allows structured creation and extraction of JSON fields.

Note: All of the methods above are only for parsing a Json object or string . Receiving the JSON object must be done through the “On Input Event” and the incoming message will be fed to any of the options above.

In this example we use the unreal Json blueprint utilities plugin.

To enable the plugin : 

• Navigate to Edit → Plugins

• Search for "Json Blueprint Utilities"

• Enable the plugin

• Restart the editor if prompted

In your Blueprint:

• Use On Input Event → JSON String

• Use "Decode JSON" node to convert it into a JSON object

• Use "Get String Field" to extract username field

• Use "Print String" to display the username on-screen

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

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