Sending messages to Unreal

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 webpage

Once a connection between your webpage and the Odyssey iframe has 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 payload

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

Receiving Pixel Streaming messages in UE

Documentation coming soon...