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.