Pixel Streaming in Odyssey allows you to create interactive and immersive experiences by streaming high-quality visuals of your Unreal Engine project directly to users' web browsers. This guide will walk you through the process of sending and receiving messages between the user's webpage and your Unreal Engine project, enhancing the user's ability to interact with your application. This integration is made possible through the MessageChannel API, enabling seamless communication between the two environments.

Before you proceed, ensure that you have successfully connected to the MessageChannel API. This is a fundamental step for establishing the communication bridge between the user's webpage and your Unreal Engine project.

Setting up a MessageChannel

In order to send and receive native pixel stream messages, you'll need to create a MessageChannel on your iframe.

The following code sets up a secure communication channel between the parent window and Odyssey (app.odyssey.stream) using the MessageChannel API.

A new MessageChannel instance is created when the iframe has reached a loaded state, providing two bidirectional ports: port1 and port2.

The initial action is taken by the parent window, which subscribes to port2 and then transfers port1 to Odyssey. Odyssey will acknowledges and validates this message, replying with an odyssey ready message. Once this connection is established, both the parent window and Odyssey gain the capability to exchange messages in both directions.

const iframe = document.querySelector('iframe') as HTMLIFrameElement
iframe.addEventListener('load', onLoad)

const channel = new MessageChannel() as MessageChannel

function onLoad() {
    if (!iframe || !iframe.contentWindow) {
        console.error('Iframe not found.')
        return
    }
    // listen for messages on port2
    channel.port2.onmessage = onMessage
    // send setup channel message to odyssey
    iframe.contentWindow.postMessage({ type: 'setupChannel' }, 'https://app.odyssey.stream/', [channel.port1])
}

function onMessage(event: Event) {
    if (event.origin === 'https://app.odyssey.stream') {
          // add custom logic to react to messages from Odyssey 
          console.log('Message received from iframe: ', event.data)
    }
}