# Quick Start

## Minimal Example

{% hint style="warning" %}
Replace `YOUR_PROJECT_ID` with the actual `appId` from your Streampixel dashboard. The connection will fail without a valid project ID.
{% endhint %}

{% code lineNumbers="true" %}

```html
<!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>
```

{% endcode %}

## 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](https://docs.streampixel.io/resources/getting-started/core-concepts/return-values) page.

## Running the Example App

```bash
git clone https://github.com/infinity-void-metaverse/Streampixel-SDK-Example.git
cd Streampixel-SDK-Example
npm install
npm start
```

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

{% content-ref url="core-concepts/initialization" %}
[initialization](https://docs.streampixel.io/resources/getting-started/core-concepts/initialization)
{% endcontent-ref %}

{% content-ref url="core-concepts/connection-lifecycle" %}
[connection-lifecycle](https://docs.streampixel.io/resources/getting-started/core-concepts/connection-lifecycle)
{% endcontent-ref %}

{% content-ref url="features/communicating-with-ue" %}
[communicating-with-ue](https://docs.streampixel.io/resources/getting-started/features/communicating-with-ue)
{% endcontent-ref %}
