Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.streampixel.io/llms.txt

Use this file to discover all available pages before exploring further.

​
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:
  1. Receive messages:
    • Listen for updates from the Unreal Engine application or iframe (e.g., stream states, custom events).
  2. 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

​
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
For the full Blueprint walkthrough (every node, in order), see Unreal-side messaging.

​
Security best practices

  1. 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
}
  2. Restrict outgoing messages:
    • Replace '*' with the exact origin (https://share.streampixel.io) when sending messages via postMessage to enhance security.

​
Next steps

Stream states

Listen for real-time stream state updates and metadata.

Stream control commands

Reference of all commands you can send to the iframe.