WebSDK Integration

This section is for developers who want full control over the StreamPixel player inside custom frontend frameworks like React, Vue, or plain JavaScript.

Unlike the iframe method, the WebSDK gives you deep access to the stream — enabling real-time input control, state monitoring, messaging, and resolution tuning.

📘 What You’ll Learn

This section is divided into the following key topics:

---

🔹 Installation & Initialization

Step-by-step instructions for installing the SDK via NPM and initializing the stream using StreamPixelApplication().

You’ll learn how to:

• Pass configuration options

• Append the video stream to your DOM

• Store stream control references

Installation

---

🔹 Configuration Options

Explore the complete list of available SDK options — including touch, keyboard, resolution mode, codecs, and more.

Understand how to:

• Override dashboard settings

• Optimize for device type or network

• Control session behavior in real time

Configuration Options

---

🔹 Frontend Controls

Learn how to interact with the stream via JavaScript — toggle audio, change resolution, fetch stats, and trigger queue-based UIs.

We’ll cover:

• UIControlApp methods

• Button handlers

• Dynamic stream behavior from user input

Frontend Controls

---

🔹 Unreal Communication

Set up two-way communication between your frontend and the Unreal Engine application.

Includes:

• Sending structured JSON with emitUIInteraction()

• Listening to Unreal replies via addResponseEventListener()

• Blueprint setup for PixelStreamingInputComponent

Unreal Communication