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

# Quickstart

> Learn how to get a video stream up and running and apply some AI on it. New to live video or streaming concepts? Check out our [Streaming Basics](/api/streaming-basics/live-video) guide to learn how ingest, delivery, and playback work behind the scenes.

## Overview

This guide will take you through the process of sending video input to our StreamDiffusion pipeline. You will learn how to adjust parameters to create a variety of visual effects, utilize live streaming and audio interactivity features, generate real-time visuals, and view the resulting output video.

Our goal by the end is to have an effect that will transform a user into an [anime character](https://app.daydream.live/creators/ericxtang/anime-character-transformation) via their webcam.

<video controls className="w-full aspect-video rounded-xl" src="https://clips.t3.storage.dev/assets/1764306270347-cdbf0076.mp4" />

## API Auth

<Info>
  The use of the API key is currently subsidized for a limited time, and we will provide an update on pricing in the future.
</Info>

Get your API key from the [Daydream Dashboard](https://app.daydream.live/dashboard/api-keys). Keep it secure and never commit it to source control.

## Creating Your First App

Building on top of our StreamDiffusion pipeline consists of three parts:

1. Creating a `Stream` object (backend)
2. Sending in video and playing the output (frontend)
3. Setting StreamDiffusion parameters

***

## Using the SDKs

The easiest way to integrate Daydream is with our SDKs. Here's a full-stack example using the TypeScript SDK (backend) and Browser SDK (frontend).

### Backend: Create a Stream

Install the TypeScript SDK:

```bash theme={null}
npm install @daydreamlive/sdk
```

Create a stream with your API key:

```typescript theme={null}
// server.ts or Next.js Server Action
import { Daydream } from "@daydreamlive/sdk";

const daydream = new Daydream({
  bearer: process.env.DAYDREAM_API_KEY,
});

export async function createStream() {
  const stream = await daydream.streams.create({
    pipeline: "streamdiffusion",
    params: {
      modelId: "stabilityai/sdxl-turbo",
      prompt: "anime character",
    },
  });

  return {
    id: stream.id,
    whipUrl: stream.whipUrl,
    playbackId: stream.outputPlaybackId,
  };
}
```

### Frontend: Broadcast & Play

Install the Browser SDK:

```bash theme={null}
npm install @daydreamlive/browser
```

Broadcast your webcam and play the AI output:

```typescript theme={null}
import { createBroadcast, createPlayer } from "@daydreamlive/browser";

// Get whipUrl from your backend
const { whipUrl } = await createStream();

// Get user's webcam
const stream = await navigator.mediaDevices.getUserMedia({
  video: { width: 512, height: 512 },
});

// Start broadcasting
const broadcast = createBroadcast({ whipUrl, stream });
await broadcast.connect();

// The WHEP URL is available from the WHIP response header 'livepeer-playback-url'
// or access it from broadcast.whepUrl after connecting
const player = createPlayer(broadcast.whepUrl);
await player.connect();
player.attachTo(document.querySelector("video#output"));
```

<Tip>
  The WHEP playback URL is returned in the WHIP response header `livepeer-playback-url`. The Browser SDK automatically captures this for you in `broadcast.whepUrl`.
</Tip>

For React apps, see the [React Hooks guide](/sdks/browser/react-hooks) for a complete example with `useBroadcast` and `usePlayer`.

***

## Alternative: Using cURL + OBS

If you prefer to use cURL and OBS instead of the SDKs, here's how:

### 1. Create a Stream

<Note>
  Available models:

  * `stabilityai/sdxl-turbo` - SDXL, high quality (recommended)
  * `stabilityai/sd-turbo` - SD2.1, fastest
  * `Lykon/dreamshaper-8` - SD1.5, great for stylized effects
  * `prompthero/openjourney-v4` - SD1.5, artistic style
</Note>

```bash theme={null}
DAYDREAM_API_KEY="<YOUR_API_KEY>"

curl -X POST \
  "https://api.daydream.live/v1/streams" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer ${DAYDREAM_API_KEY}" \
  -d '{
    "pipeline": "streamdiffusion",
    "params": {
      "model_id": "stabilityai/sdxl-turbo",
      "prompt": "anime character"
    }
  }'
```

Response:

```json theme={null}
{
  "id": "str_gERGnGZE4331XBxW",
  "output_playback_id": "0d1crgzijlcsxpw4",
  "whip_url": "https://ai.livepeer.com/live/video-to-video/stk_abc123/whip"
}
```

### 2. Stream with OBS

1. Install [OBS](https://obsproject.com/)
2. Go to **Settings → Stream**
3. Set Service to `WHIP` and paste the `whip_url`
4. Add a video source and click **Start Streaming**
5. Watch at: `https://lvpr.tv/?v=<output_playback_id>`

<img src="https://mintcdn.com/dd/QeagSeN2XLI00lIC/images/image.png?fit=max&auto=format&n=QeagSeN2XLI00lIC&q=85&s=d63a6b4e5527dfde603f622eda7ecb31" alt="Streaming into Daydream via OBS" title="Streaming into Daydream via OBS" className="mx-auto" width="670" height="208" data-path="images/image.png" />

Or use the [Daydream OBS Plugin](/sdks/obs/installation) for built-in AI effects without needing to create streams manually.

***

## Update Parameters

Change the prompt or other settings in real-time:

<CodeGroup>
  ```typescript TypeScript SDK theme={null}
  await daydream.streams.update(streamId, {
    pipeline: "streamdiffusion",
    params: {
      modelId: "stabilityai/sdxl-turbo",
      prompt: "cyberpunk portrait, neon lights",
      guidanceScale: 1.2,
    },
  });
  ```

  ```bash cURL theme={null}
  curl -X PATCH \
    "https://api.daydream.live/v1/streams/${STREAM_ID}" \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer ${DAYDREAM_API_KEY}" \
    -d '{
      "pipeline": "streamdiffusion",
      "params": {
        "model_id": "stabilityai/sdxl-turbo",
        "prompt": "cyberpunk portrait, neon lights",
        "guidance_scale": 1.2
      }
    }'
  ```
</CodeGroup>

<Note>
  You only need to include the parameters you want to change.
</Note>

## Add ControlNets

ControlNets preserve structure from your input video:

```json theme={null}
{
  "pipeline": "streamdiffusion",
  "params": {
    "model_id": "stabilityai/sdxl-turbo",
    "prompt": "oil painting portrait",
    "controlnets": [
      {
        "enabled": true,
        "model_id": "xinsir/controlnet-depth-sdxl-1.0",
        "preprocessor": "depth_tensorrt",
        "conditioning_scale": 0.5
      }
    ]
  }
}
```

<Warning>
  Set `conditioning_scale` to `0` to disable a ControlNet without triggering a pipeline reload.
</Warning>

### Available ControlNets

**SDXL Models** (`stabilityai/sdxl-turbo`):

* `xinsir/controlnet-depth-sdxl-1.0` - Depth guidance
* `xinsir/controlnet-canny-sdxl-1.0` - Edge detection
* `xinsir/controlnet-tile-sdxl-1.0` - Texture preservation

**SD1.5 Models** (`Lykon/dreamshaper-8`, `prompthero/openjourney-v4`):

* `lllyasviel/control_v11f1p_sd15_depth` - Depth
* `lllyasviel/control_v11f1e_sd15_tile` - Tile
* `lllyasviel/control_v11p_sd15_canny` - Canny edges

**SD2.1 Models** (`stabilityai/sd-turbo`):

* `thibaud/controlnet-sd21-depth-diffusers` - Depth
* `thibaud/controlnet-sd21-canny-diffusers` - Canny edges
* `thibaud/controlnet-sd21-openpose-diffusers` - Body poses
* `thibaud/controlnet-sd21-hed-diffusers` - Soft edges
* `thibaud/controlnet-sd21-color-diffusers` - Color composition

## What's Next?

* [TypeScript SDK](/sdks/typescript/installation) - Full server-side API
* [Browser SDK](/sdks/browser/installation) - WebRTC broadcasting
* [TouchDesigner Plugin](/sdks/touchdesigner/installation) - For VJ and creative apps
* [OBS Plugin](/sdks/obs/installation) - Add AI to OBS streams
* [Parameters Reference](/api/parameters/SDXL) - All available parameters
* [API Reference](/api/api-reference/create-stream) - Full API documentation