Quick start

This page shows the smallest working integration of the Streampixel Web SDK and explains the five values that StreamPixelApplication returns.

Minimal example

Replace YOUR_PROJECT_ID with the actual appId from your Streampixel dashboard. The connection will fail without a valid project ID.

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; overflow: hidden; }
    #video-container { width: 100vw; height: 100vh; }
  </style>
</head>
<body>
  <div id="video-container"></div>
  <script type="module">
    import { StreamPixelApplication } from 'streampixelsdk';

    const { appStream, pixelStreaming, queueHandler, UIControl, reconnectStream } =
      await StreamPixelApplication({
        appId: 'YOUR_PROJECT_ID',  // From Streampixel dashboard
        AutoConnect: true,
      });

    // Mount the video when the stream is ready
    appStream.onVideoInitialized = () => {
      document.getElementById('video-container').appendChild(appStream.rootElement);
    };
  </script>
</body>
</html>

What `StreamPixelApplication` returns

Object	Purpose
`pixelStreaming`	Core streaming instance. Listen for events, send commands to UE, control connection.
`appStream`	Application wrapper. Provides `rootElement` (the DOM node containing the video), lifecycle callbacks, and overlay management.
`queueHandler`	Register a callback to receive queue position updates when all UE instances are busy.
`UIControl`	Helper methods for audio toggle, resolution changes, stream stats, and hover mouse control.
`reconnectStream`	Event emitter for reconnection state changes (`connecting`, `reconnecting`, `retrying`, `connected`, `failed`).

Each of these is covered in detail in the Return Values page.

Running the example app

Clone the example repository

git clone https://github.com/infinity-void-metaverse/Streampixel-SDK-Example.git

Install and start

cd Streampixel-SDK-Example
npm install
npm start

Open the app

Open your browser to http://localhost:3000/YOUR_PROJECT_ID (replace with your actual project ID from the Streampixel dashboard).

The example app demonstrates a complete integration including loading screens, reconnection handling, AFK warnings, stream controls, and developer tools.

Next steps

Initialization and configuration

Configure codecs, resolution, input, and AFK behavior.

Connection lifecycle

Understand the events fired during connection setup.

Communicating with Unreal Engine

Send commands and receive responses from your UE app.

Getting started

Core concepts

Features

UI customization

API reference

Guides

Minimal example

What `StreamPixelApplication` returns

Running the example app

Next steps

Initialization and configuration

Connection lifecycle

Communicating with Unreal Engine

​Minimal example

​What StreamPixelApplication returns

​Running the example app

​Next steps

Initialization and configuration

Connection lifecycle

Communicating with Unreal Engine

Minimal example

What `StreamPixelApplication` returns

Running the example app

Next steps