StreamCrafter — Svelte

Installation

npm install @livepeer-frameworks/streamcrafter-svelte

Import the CSS once in your app:

<script>
  import "@livepeer-frameworks/streamcrafter-svelte/streamcrafter.css";
</script>

Drop-in Component

The <StreamCrafter /> component is fully self-contained.

Direct WHIP Mode:

<script lang="ts">
  import { StreamCrafter } from "@livepeer-frameworks/streamcrafter-svelte";
  import "@livepeer-frameworks/streamcrafter-svelte/streamcrafter.css";
</script>

<StreamCrafter whipUrl="https://edge-ingest.frameworks.network/webrtc/stream-key" initialProfile="broadcast" />

Gateway Resolution Mode:

<StreamCrafter gatewayUrl="https://bridge.frameworks.network/graphql" streamKey="abc-123" initialProfile="broadcast" />

Gateway resolution calls the public resolveIngestEndpoint GraphQL field from the publisher’s browser. Use direct whipUrl unless that resolver is enabled in your environment, and prefer the dashboard DNS ingest URL for backend or encoder-side publishing.

Composable Components

Pass a children snippet to replace the default UI with sub-components:

<script lang="ts">
  import {
    StreamCrafter,
    StudioPreview,
    StudioMixer,
    StudioActionBar,
    StudioSettings,
    StudioStatusBadge,
  } from "@livepeer-frameworks/streamcrafter-svelte";
  import "@livepeer-frameworks/streamcrafter-svelte/streamcrafter.css";
</script>

<StreamCrafter whipUrl="https://edge-ingest.frameworks.network/webrtc/my-key">
  {#snippet children()}
    <div class="my-layout">
      <StudioStatusBadge />
      <StudioPreview />
      <div class="sidebar">
        <StudioMixer />
        <StudioSettings />
      </div>
      <StudioActionBar />
    </div>
  {/snippet}
</StreamCrafter>

Sub-components auto-connect to the parent <StreamCrafter> via Svelte 5 context.

Sub-Component Reference

Component	Purpose
`StudioPreview`	Video preview with live badge
`StudioMixer`	Source list with volume sliders, mute, and remove buttons
`StudioActionBar`	Camera, Screen Share, Settings, and Go Live buttons
`StudioSettings`	Quality profile selector popup
`StudioStatusBadge`	State badge (Idle, Capturing, Live, etc.)

Custom UI with Stores

For complete UI control, use createStreamCrafterContextV2:

<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import { createStreamCrafterContextV2 } from "@livepeer-frameworks/streamcrafter-svelte";

  const crafter = createStreamCrafterContextV2();
  let videoEl: HTMLVideoElement;

  onMount(() => {
    crafter.initialize({
      whipUrl: "https://edge-ingest.frameworks.network/webrtc/key",
      profile: "broadcast",
      reconnection: { enabled: true },
    });
  });

  onDestroy(() => crafter.destroy());
</script>

<div>
  <video bind:this={videoEl} autoplay muted />
  <p>State: {$crafter.state}</p>
  <p>Sources: {$crafter.sources.length}</p>
  <button onclick={() => crafter.startCamera()}>Add Camera</button>
  <button onclick={() => crafter.startScreenShare({ audio: true })}>Share Screen</button>
  <button
    onclick={() => ($crafter.isStreaming ? crafter.stopStreaming() : crafter.startStreaming())}
  >
    {$crafter.isStreaming ? "Stop" : "Go Live"}
  </button>
</div>

Store Properties

The store implements Svelte’s store contract. Read reactive state with $crafter in markup or subscribe manually in script:

Property	Type	Description
`state`	`IngestState`	Current lifecycle state
`isStreaming`	`boolean`	Whether currently live
`isCapturing`	`boolean`	Whether media is captured
`isReconnecting`	`boolean`	Whether reconnecting
`sources`	`MediaSource[]`	Active media sources
`mediaStream`	`MediaStream \| null`	Combined output stream
`qualityProfile`	`QualityProfile`	Current quality settings

Store Methods

Method	Description
`startCamera(opts?)`	Add camera source
`startScreenShare(opts?)`	Add screen share source
`startStreaming()`	Go live
`stopStreaming()`	Stop streaming
`removeSource(id)`	Remove a source
`setSourceVolume(id, vol)`	Set source volume (0-1)
`setSourceMuted(id, muted)`	Mute/unmute source
`setQualityProfile(name)`	Change quality profile
`controller`	Direct controller access