Setting up your Frontend

Integrating a custom frontend with Streampixel, using JavaScript to embed the player and establish communication between your frontend and the Unreal Engine application.

Overview

This section guides you through the process of integrating and customizing Streampixel into your application. It provides the necessary tools and instructions to embed the stream, establish communication with the Unreal Engine application, and interact with various stream states and controls.

This section is divided into the following key topics:

1. Basic Iframe Integration Learn how to embed the Streampixel iframe, configure essential attributes like autoplay and fullscreen, and manage input handling for seamless user interaction.

2. Frontend and Application Communication Understand how to establish two-way communication between your frontend and the iframe or Unreal Engine application using postMessage and addEventListener.

3. Stream States Get insights into how the stream progresses through different states (e.g., authenticating, loadingComplete) and how to use these states to create dynamic UI responses.

4. Stream Control Commands Explore the list of available commands (like muteAudio, setResolution) to control and customize the stream experience for your users.

By following this guide, you’ll be able to fully integrate and enhance Streampixel within your application, creating an optimized and interactive experience for your users.