Pass messages to and from Unreal

Your browser application can send and receive messages to Unreal Engine over the Pixel Streaming WebRTC datachannel through Odyssey.

Odyssey provides a message channel, using the MessageChannel API

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) {
    // add custom logic to react to messages from Odyssey 
    console.log('Message received from iframe: ', event.data)
}