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, so routing reflects the publisher’s location. For backend or encoder-side publishing, use the dashboard DNS ingest URL or Foghorn’s /ingest/{streamKey} front door instead.

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