search

Quick Start

hashtag
Minimal Example

circle-exclamation

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>

hashtag
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.

hashtag
Running the Example 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.

hashtag
Next Steps

Initialization and Configurationchevron-rightConnection Lifecyclechevron-rightCommunicating with Unreal Enginechevron-right
PreviousInstallationNextCore Concepts

Last updated