Frontend and application communication

Overview

Streampixel enables seamless two-way communication between your custom frontend, the iframe, and the Unreal Engine application running inside it. Using JavaScript methods like postMessage and addEventListener, you can:

Receive messages:
- Listen for updates from the Unreal Engine application or iframe (e.g., stream states, custom events).
Send commands:
- Send commands to the Unreal Engine application or iframe for controlling audio, resolution, session state, or custom features.

This messaging framework is essential for integrating custom UIs, managing stream controls, and building tailored interactions.

Listening for messages

To capture messages sent from the iframe or Unreal Engine application, use the window.addEventListener method. Example: listening for messages

window.addEventListener('message', (event) => {
    // Validate the message source for security
    if (event.origin === 'https://share.streampixel.io') {
        console.log('Message received:', event.data);

        // Example: Handle stream-state updates
        if (event.data.type === 'stream-state') {
            console.log('Stream state:', event.data.value); // e.g., 'loadingComplete'
        }
    }
});

Sending messages

To interact with the iframe or Unreal Engine application, send messages using the postMessage method. This allows you to control the stream or trigger specific Unreal Engine events. Example: sending commands

const sendMessageToIframe = (message) => {
    const iframe = document.getElementById('streamPixelPlayer');
    if (iframe) {
        iframe.contentWindow.postMessage(message, 'https://share.streampixel.io');
    }
};

// Example: Send the muteAudio command
sendMessageToIframe({ message: 'muteAudio' });

Configuring Unreal to send and receive messages

The frontend code above only handles the browser side. Unreal also needs Blueprint setup to actually receive what your page sends and to send messages back.

Receiving from your page (UE side)

Add a Pixel Streaming Input component to your PlayerController, bind to its OnInputEvent delegate, and parse the JSON Descriptor string with Get JSON String Value.

Unreal Engine blueprint receiving Pixel Streaming JSON messages — Blueprint setup for receiving Pixel Streaming input messages

Sending from UE to your page

Use the Send Pixel Streaming Response node. The string in the Descriptor field is delivered to your page as the event.data payload of a message event.

Send Pixel Streaming Response node in an Unreal blueprint — Send Pixel Streaming Response node sending JSON back to the frontend

For the full Blueprint walkthrough (every node, in order), see Unreal-side messaging.

Security best practices

Validate incoming messages:
- Always validate event.origin to ensure the message is coming from the StreamPixel iframe:
  if (event.origin === 'https://share.streampixel.io') { // Safe to process the message }
Restrict outgoing messages:
- Replace '*' with the exact origin (https://share.streampixel.io) when sending messages via postMessage to enhance security.

Iframe integration

Frontend and application communication

Overview

Listening for messages

Sending messages

Configuring Unreal to send and receive messages

Receiving from your page (UE side)

Sending from UE to your page

Security best practices

Next steps

Stream states

Stream control commands

​Overview

​Listening for messages

​Sending messages

​Configuring Unreal to send and receive messages

​Receiving from your page (UE side)

​Sending from UE to your page

​Security best practices

​Next steps

Stream states

Stream control commands

Overview

Listening for messages

Sending messages

Configuring Unreal to send and receive messages

Receiving from your page (UE side)

Sending from UE to your page

Security best practices

Next steps