Stream Control Commands

Manage your Streampixel stream dynamically with programmatic controls, including resolution, audio settings, session management, and custom interactions.

Overview

Streampixel allows you to control and interact with the stream dynamically by sending predefined commands to the iframe using the postMessage API. These commands let you manage actions like muting, unmuting, disconnecting, adjusting the stream resolution and sending pixel streaming messages to the Unreal Engine application.

---

How PostMessage Works

The postMessage API enables communication between your frontend application and the Streampixel iframe. By sending specific commands to the iframe, you can control various aspects of the stream programmatically.

---

Detailed Command Descriptions

Here’s a breakdown of the commands and what they do:

1. Set Stream Resolution

• Description: Sends the desired resolution for the stream. The actual changes will depend on the Re

• Behavior:

  • Sending a resolution higher than the Max Stream Quality will have no effect.

  • The resolution must be one of the supported values; unsupported resolutions will be ignored.

• Parameters:

  • value: The desired resolution as a string (e.g., 720p (1280x720)).

• Supported Resolutions:

  • 360p (640x360)

  • 480p (854x480)

  • 720p (1280x720)

  • 1080p (1920x1080)

  • 1440p (2560x1440)

  • 4K (3840x2160)

• Message Example:

  { message: {value: '720p (1280x720)',type:"setResolution" }}

• If the requested resolution exceeds the Max Stream Quality set in your project settings, the resolution will not change.

• Ensure the resolution matches one of the supported values to avoid issues.

---

2. Mute Stream Audio

• Description: Mutes the audio for the stream.

• Behavior:

  • The video continues to play, but the audio is turned off for the user.

  • It won't change the mute/unmute UI within iframe.

• Message Example:

  { message: 'muteAudio' }

---

3. Unmute Stream Audio

• Description: Unmutes the audio for the stream.

• Behavior:

  • Restores audio playback for the stream.

  • It won't change the mute/unmute UI within iframe.

• Message Example:

  { message: 'unMuteAudio' }

Auto unmute may not work out of the box due to browser policies, such as those outlined by Google's autoplay policies. Additional configuration may be required to enable this functionality.

---

4. Terminate Session

• Description: Ends the current session for the stream.

• Behavior:

  • Stops the stream and disconnects the WebRTC connection to the server.

• Message Example:

  { message : 'terminateSession' }

---

5. Send Heartbeat

• Description: Prevents the Unreal Engine application from timing out due to inactivity.

• Behavior:

  • Keeps the session alive by sending periodic heartbeat messages to the server.

  • Recommended for applications where inactivity timeout isn't required.

• Message Example:

  { message: 'heartbeat' }

---

6. Custom Messages to Unreal Engine App

• Description: Sends custom messages or data directly to the Unreal Engine application running in the stream.

• Behavior:

  • Allows you to trigger specific logic or interactions in your Unreal Engine app.

  • You can send custom fields without the message key if required.

• Message Example

  { customField: 'customValue' } 

---

How to Send Commands

Use the postMessage API to send these commands to the iframe.

Basic Example

// Reference the iframe
const streamIframe = document.getElementById('streamIframe');

// Example Commands
streamIframe.contentWindow.postMessage({ message: { value: '720p (1280x720)', type: 'setResolution' } }, '*'); // Set resolution
streamIframe.contentWindow.postMessage({ message: 'muteAudio' }, '*'); // Mute the stream
streamIframe.contentWindow.postMessage({ message: 'unMuteAudio' }, '*'); // Unmute the stream
streamIframe.contentWindow.postMessage({ message: 'terminateSession' }, '*'); // Terminate the session
streamIframe.contentWindow.postMessage({ message: 'heartbeat' }, '*'); // Send a heartbeat
streamIframe.contentWindow.postMessage({ customField: 'customValue' }, '*'); // Send custom data