Skip to main content
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

ObjectPurpose
pixelStreamingCore streaming instance. Listen for events, send commands to UE, control connection.
appStreamApplication wrapper. Provides rootElement (the DOM node containing the video), lifecycle callbacks, and overlay management.
queueHandlerRegister a callback to receive queue position updates when all UE instances are busy.
UIControlHelper methods for audio toggle, resolution changes, stream stats, and hover mouse control.
reconnectStreamEvent 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

1

Clone the example repository

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

Install and start

cd Streampixel-SDK-Example
npm install
npm start
3

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.