Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.streampixel.io/llms.txt

Use this file to discover all available pages before exploring further.

StreamPixelApplication() returns an object with five properties. This page describes each one and how to use them. 
const { pixelStreaming, appStream, queueHandler, UIControl, reconnectStream } =
  await StreamPixelApplication({ appId: 'your-project-id' });

​
pixelStreaming

The core streaming instance. Use it to:
  • Listen for WebRTC lifecycle events
  • Send commands and data to Unreal Engine
  • Receive responses from Unreal Engine
  • Control connection state
// Listen for events
pixelStreaming.addEventListener('webRtcConnected', () => {
  console.log('WebRTC connection established');
});

// Send a console command to UE
pixelStreaming.emitConsoleCommand('stat fps');

// Send custom data to UE
appStream.stream.emitUIInteraction({ type: 'action', value: 'jump' });

// Receive data from UE
pixelStreaming.addResponseEventListener('handle_responses', (response) => {
  const data = JSON.parse(response);
  console.log('UE says:', data);
});

// Control connection
pixelStreaming.disconnect();
pixelStreaming.reconnect();

// Enable microphone/camera input to UE
pixelStreaming.unmuteMicrophone(true);
pixelStreaming.unmuteCamera(true);
See Connection Lifecycle for all events and Communicating with Unreal Engine for data exchange.

​
appStream

The application wrapper that manages the DOM, video element, and overlays.

​
rootElement

appStream.rootElement is the DOM element containing the video player. This is the key element you need to append to your page to display the stream.
appStream.onVideoInitialized = () => {
  document.getElementById('container').appendChild(appStream.rootElement);
};

​
Lifecycle callbacks

// Called when the video element is ready and streaming
appStream.onVideoInitialized = () => {
  // Mount the video, hide loading screen, etc.
};

// Called when the stream disconnects
appStream.onDisconnect = () => {
  // Show disconnected UI
};

​
Accessing video and audio elements

The SDK creates two separate media elements: a <video> element for the stream and a separate <audio> element. If you need to control volume or muting, make sure you account for both elements.
// The video element
const video = appStream.stream.videoElementParent.querySelector('video');

// The separate audio element (SDK creates both)
const audio = appStream.stream._webRtcController.streamController.audioElement;

​
Sending data to UE

appStream.stream.emitUIInteraction({ message: 'hello from web' });

​
queueHandler

A function that registers a callback for queue position updates. Queue events fire when all UE instances are busy and the user is waiting. 
queueHandler((msg) => {
  console.log(`Queue position: ${msg.position}`);
  console.log(`Message: ${msg.message}`); // "You are in Queue"
});
See Queue System for details.

​
UIControl

Helper methods for common UI operations: 
// Toggle stream audio on/off
UIControl.toggleAudio();

// Set maximum resolution (format: "WIDTHxHEIGHT")
UIControl.handleResMax('1920x1080');

// Enable/disable hover mouse mode
UIControl.toggleHoveringMouse(true);
UIControl.toggleHoveringMouse(false);

// Get current stream statistics
const stats = UIControl.getStreamStats();
console.log(stats);
// { Framerate: 60, "Net RTT (ms)": 12, "Video codec": "H264 ...", ... }

// Get available resolution options (returns array or undefined)
const resolutions = UIControl.getResolution();
// ["360p (640x360)", "480p (854x480)", "720p (1280x720)", "1080p (1920x1080)"]
See UIControl API Reference for full details.

​
reconnectStream

An event emitter that reports reconnection state changes: 
reconnectStream.on('state', (data) => {
  console.log(`Status: ${data.status}`);

  switch (data.status) {
    case 'connecting':
      // Initial connection or reconnection started
      break;
    case 'reconnecting':
      // WebSocket closed, attempting reconnection
      break;
    case 'retrying':
      // Reconnection attempt in progress
      break;
    case 'connected':
      // Successfully reconnected
      break;
    case 'disconnected':
      // Disconnected (check data.code and data.reason)
      break;
    case 'failed':
      // Reconnection failed (data.code = 4007 means timeout)
      break;
  }
});
See Reconnection for the full state machine and disconnect codes.

​
Next steps

Connection lifecycle

Map every event fired by pixelStreaming during a session.

Reconnection

Handle network drops with the reconnectStream state machine.