01.2. Pixel Streaming Input / Json messages

Set up Pixel Streaming in your own project - Core Settings

Previous01.1. Plugin Next01.3. Resolution

Last updated 1 year ago

01.2. Pixel Streaming Input / Json messages

Set up Pixel Streaming in your own project - Core Settings

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.

Warning: This step is important for the '' guide as this is how the resolution messages are intercepted

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

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

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

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

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"})

Send Json response to frontend

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" }

Previous01.1. Plugin Next01.3. Resolution

Last updated 1 year ago

Warning: This step is important for the '' guide as this is how the resolution messages are intercepted

Receive Json message from frontend

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

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

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

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

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

Send Json response to frontend

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" }

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... or download our Unreal Engine Pixel Streaming Template, for more in-depth examples...