# Pixel Streaming Input / Json messages

{% hint style="info" %}
Note: Adding the '**Pixel Streaming Input'** component allows you to access the Pixel Streaming Blueprint API nodes. This API allows your application to send and receive messages from the Pixel Streams HTML frontend, this means you can trigger in-game events from clicking buttons in the Web page and vice versa.&#x20;
{% endhint %}

{% hint style="warning" %} <mark style="color:orange;">Warning:</mark> This step is important for the '[01.3. Resolution](https://app.gitbook.com/o/sfZeAeXGkv7Dx2jvWZjO/s/xeRHVvCMHTEw8OnxbYIg/~/changes/196/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/01.-core-settings/01.3.-resolution)' guide as this is how the resolution messages are intercepted
{% endhint %}

***

## Receive Json message from frontend

Once you have the Pixel Streaming plugin enabled and your project has been restarted, you can then add the '**Pixel Streaming Input'** component to an actor somewhere in your game level. (We recommend adding this component to your **Player Controller** in your **Game Mode**)

* Add the **'PixelStreamingInput'** component to the components list in your **Player Controller**

![Add PixelStreamingInput Component to Player Controller](/files/BZQYnMkae5Rb2pHA6DpO)

* Next, drag the **'PixelStreamingInput'** component into the blueprint **Event Graph** and bind your own '**Custom Event'** node by using the **'Bind Event to On Input Event'** node.&#x20;
* As you can see in the image below, we named our custom event **'Input\_Recieved\_Event**'. This custom event will handle the received input from the Pixel streams frontend, the input is always received in the form of a Json string called **'Descriptor'**. You should set the '**Descriptor**' string as a variable as we do in the example below, this makes it more easy to reference later.

![Add nodes for receiving Json descriptor](/files/ZagLkgtyLo45dBk7W2w8)

Now we will add the blueprint nodes that will allow your application to trigger **Console Commands** when new input is received.&#x20;

* As seen in the image below, add a **'Get Json String Value**' blueprint node and in the Feild Name type '**Console'.**
* Add a **'Branch'** node after, this will check if the Feild Name **'Console'** was successfully found within the Json descriptor.&#x20;
* Add a '**Contains**' node and in Substring type '**Setres**'. Then connect the '**Contains**' node to another '**Branch**' node. Adding these two nodes, will mean that only **resolution** console commands will be accepted (i.e. Setres 1920x1080). This node set up is the minimum needed by the Arcware WebSDK, to change your application resolution dynamically depending on the device is being viewed on.&#x20;
* Add an **'Execute Console Command'** node at the end.
* Please make sure all the nodes are connected in the same way as our example below.

![Search Json descriptor for desired 'Field Name'](/files/GTaWT5GFuu3V7W5IScoi)

{% hint style="info" %}
Note: For triggering **Console Commands** in Unreal Engine via the frontend, there is also a method via enabling the Pixel Streaming parameter '**-AllowPixelStreamingCommands**' and then sending '**emitConsoleCommand**' from frontend to Unreal.

However, Arcware forces this parameter to be **disabled** on all projects in Arcware Cloud as it creates a security risk when users can freely send commands to your streamed application without you knowing.

The alternative method that allows you to filter out the incoming Console Commands (as demonstrated with the blueprint nodes above) is utilizing '**stream.emitUIInteraction**' sent from the frontend, for example...

**stream.emitUIInteraction({"console": "r.setres 1920x1080"})**
{% endhint %}

***

## Send Json response to frontend&#x20;

The final Blueprint node to consider from the Pixel Streaming API library is the '**Send Pixel Streaming Response**' node. The node is useful for notifying the Html web page when the Json message received in Unreal Engine has been triggered and was successful.

* Below is an example of a **Pixel Streaming Response** being sent to the frontend written as a Json string e.g ***{ "Console": "r.setres 1920x1080w" }*** or ***{ "Example\_Event\_01": "done" }***

![Send Json message response to frontend](/files/dTGDe3CzG9a8INLRoVYy)

{% hint style="info" %}
These blueprint nodes you have created can be used later for triggering any event in your application (providing that your frontend is already aware of the 'Field Names' that are available to be triggered in your application)\
\
For a deeper dive into this topic...\
\
please check out the Unreal Engine documentation regarding communication between Web page and Unreal Engine...\
<https://docs.unrealengine.com/5.0/en-US/customizing-the-player-web-page-in-unreal-engine/>\
\
or download our Unreal Engine Pixel Streaming Template, for more in-depth examples...\
[https://app.gitbook.com/o/sfZeAeXGkv7Dx2jvWZjO/s/xeRHVvCMHTEw8OnxbYIg/\~/changes/oOlhzIGnFb9VXpuR0CE2/unreal-engine-setup/using-the-arcware-pixel-streaming-template-project/getting-started/01.-template-download](/unreal-engine-setup/using-the-arcware-pixel-streaming-template-project/template-changelog.md)
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.arcware.cloud/unreal-engine-setup/set-up-pixel-streaming-in-your-own-project/core-settings/pixel-streaming-input-json-messages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
