> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qumo-deploy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Stream Studio & Relays

> In-browser live streaming workbench, relay routing inspection, and ephemeral token minting.

# Stream Studio & Relays

**Stream Studio** (`/stream`) is an interactive live-streaming workbench built into the Qumo Web Console. It enables broadcast engineers and frontend developers to test WebTransport and Media over QUIC (MoQ) streams directly in the browser without writing client code.

***

## How Stream Studio Works

When you open Stream Studio for an active project:

1. **API Key Selection**: Choose an existing project API key to authorize the session.
2. **Ephemeral Minting**: The console calls `POST /admin/v1/projects/{id}/credentials` to issue a short-lived token (`relay:session`) valid for 60 minutes.
3. **Relay Assignment**: The control plane resolves the closest healthy edge relay node and returns its WebTransport URL and fallback hosts.
4. **Interactive Broadcast or Player**: Connect your webcam or media test pattern and publish directly to the edge mesh.

***

## Step-by-Step Workflow

### 1. Select Key & Configure Broadcast Path

* Select an active API Key from the dropdown list.
* Specify your **Broadcast Namespace & Track Name** (e.g. `live/sports-broadcast/video`).
* The interface automatically formats the canonical broadcast path according to the MoQ specification.

### 2. Connect to Relay

Click **Mint Token & Connect**. The studio displays real-time connection status:

| Indicator      | Meaning                                                           |
| :------------- | :---------------------------------------------------------------- |
| `Connected`    | Active WebTransport session established with the edge relay node. |
| `Degraded`     | Reconnecting or utilizing fallback edge node.                     |
| `Disconnected` | Token expired or connection dropped.                              |

### 3. Embeddable Code Snippets

Stream Studio provides pre-formatted code snippets for embedding live players into your web applications:

```typescript TypeScript WebTransport Player theme={null}
import { MoqSession } from "@qumo/moq";

const session = await MoqSession.connect({
  url: "https://tyo1.relay.qumo.live:4433",
  token: "eyJhbGciOi...",
  broadcastPath: "live/sports-broadcast/video",
});

session.on("frame", (chunk) => {
  renderVideoFrame(chunk);
});
```