# Return Values

`StreamPixelApplication()` returns an object with five properties:

```javascript
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

{% code lineNumbers="true" %}

```javascript
// 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);
```

{% endcode %}

See [Connection Lifecycle](https://docs.streampixel.io/resources/getting-started/core-concepts/connection-lifecycle) for all events and [Communicating with Unreal Engine](https://docs.streampixel.io/resources/getting-started/features/communicating-with-ue) for data exchange.

## `appStream`

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

### `rootElement`

{% hint style="info" %}
`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.
{% endhint %}

```javascript
appStream.onVideoInitialized = () => {
  document.getElementById('container').appendChild(appStream.rootElement);
};
```

### Lifecycle Callbacks

```javascript
// 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

{% hint style="warning" %}
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.
{% endhint %}

{% code lineNumbers="true" %}

```javascript
// The video element
const video = appStream.stream.videoElementParent.querySelector('video');

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

{% endcode %}

### Sending Data to UE

```javascript
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.

{% code lineNumbers="true" %}

```javascript
queueHandler((msg) => {
  console.log(`Queue position: ${msg.position}`);
  console.log(`Message: ${msg.message}`); // "You are in Queue"
});
```

{% endcode %}

See [Queue System](https://docs.streampixel.io/resources/getting-started/features/queue-system) for details.

## `UIControl`

Helper methods for common UI operations:

{% code lineNumbers="true" %}

```javascript
// 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)"]
```

{% endcode %}

See [UIControl API Reference](https://docs.streampixel.io/resources/getting-started/api-reference/uicontrol) for full details.

## `reconnectStream`

An event emitter that reports reconnection state changes:

{% code lineNumbers="true" %}

```javascript
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;
  }
});
```

{% endcode %}

See [Reconnection](https://docs.streampixel.io/resources/getting-started/features/reconnection) for the full state machine and disconnect codes.