Sending messages

The following example describes how to send Pixel Streaming messages from your webpage and receive them using Unreal blueprints to drive gameplay logic.

Overview

In this step by step guide, we implement a gameplay feature where a colored cube gets spawned in front of the player whenever we receive a Pixel Streaming message. This simple interaction showcases the seamless integration between your webpage and Unreal project.


Sending messages from the webpage

Once a connection between your webpage and the Odyssey iframe has a been established, you will be able to send Pixel Streaming messages to Odyssey using the function:

function sendPixelStreamMessage(psKey: string, psValue: any) {
    // stringify and send data
    if (channel ) {
          const data = { type: 'ps', psKey, psValue }
          const jsonString = JSON.stringify(data)
          channel.port2.postMessage(jsonString)
    } else {
          console.error('Message channel not established.')
    }
}

Example playload

{
  "type": "ps",
  "psKey": "SpawnCube",
  "psValue": "0.863,0.208,0.271"
}

Receiving Pixel Streaming messages in UE

In this example, the incoming message has the following schema:

{
  "SpawnCube": string
}

The string field is a string representation of the FLinearColor struct. A valid FLinearColor string expected by the UE conversion blueprints is "R=0.2345,G=0.6436,B=0.8234". It can also contain an optional A= value, but we are not going to use it in this example.

Enable Pixel Streaming plugin

Enable the plugin to get access to Pixel Streaming blueprint nodes.

Add Pixel Streaming Input component to your player actor

Bind a custom event to On Input Event delegate

Create the custom event

Get String Value to parse Pixel Streaming event message

Convert string to color

Spawn the cube


Working Example