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
Updated 13 days ago