Sending and Receiving Pixel Stream Messages
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
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)
}
}
Updated 27 days ago