Overview

Browser-based broadcasting — camera, screen share, or both with audio mixing. No encoder software needed.

When to use StreamCrafter vs OBS

• StreamCrafter — Quick browser-based streaming, screen shares, webcam broadcasts, interactive apps.
• OBS/Encoder — Professional production, scene switching, complex overlays, and maximum quality control.

Packages

Package	Use Case
@livepeer-frameworks/streamcrafter-react	React 17+ apps
@livepeer-frameworks/streamcrafter-svelte	Svelte 5 apps
@livepeer-frameworks/streamcrafter-wc	Web Components — Vue, Angular, CDN, plain HTML
@livepeer-frameworks/streamcrafter-core	Vanilla JS, headless, or building custom integrations

React Integration

Svelte Integration

Web Components

Vanilla JS

Not sure which package to use? See the Integration Guide.

Quick Start

Direct WHIP Mode — pass the WHIP endpoint shown in the dashboard:

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

Gateway Resolution Mode — where resolveIngestEndpoint is wired, the SDK can resolve the WHIP endpoint from a stream key:

import { StreamCrafter } from "@livepeer-frameworks/streamcrafter-react";
import "@livepeer-frameworks/streamcrafter-react/streamcrafter.css";

<StreamCrafter
  gatewayUrl="https://bridge.frameworks.network/graphql"
  streamKey="<YOUR_STREAM_KEY>"
  initialProfile="broadcast"
/>;

Gateway vs Direct

There is no default gateway. Pass either whipUrl or (gatewayUrl + streamKey). If both are provided, whipUrl takes priority. The gatewayUrl path calls the public resolveIngestEndpoint GraphQL field; use direct whipUrl unless that resolver is enabled in your environment. Call Gateway resolution from the publisher’s browser so ingest routing uses the publisher’s location; backend-side resolution routes from the backend’s IP.

The drop-in component includes video preview, camera/screen share controls, quality selection, Go Live button, source management, and auto-reconnection.

Where to Find Your WHIP URL

Your WHIP ingest URL is shown in the FrameWorks dashboard under Ingest URLs:

WHIP: https://edge-ingest.frameworks.network/webrtc/your-stream-key

FrameWorks uses MistServer’s /webrtc/{streamKey} path for WHIP ingest. Gateway resolution can hide the node URL when the ingest resolver is available; otherwise use the dashboard WHIP URL directly. For custom encoders or server-side publishing, use the DNS ingest name directly instead of resolving through your backend: edge-ingest.{tenant}.cdn.{base} when available, then the global root or cluster-concrete ingest domain shown in the dashboard.

Stream Key is Secret

Your stream key grants permission to broadcast to your stream. Never share it publicly.

Customization Levels

StreamCrafter supports three levels of customization across all framework packages:

Level	What You Get	When to Use
Drop-in	Full built-in UI	Quick integration, default look
Composable	Use framework sub-components, rearrange and mix with your own UI	Custom layouts, partial customization
Headless	Raw controller/hooks/stores, build your own UI entirely	Full creative control

See the framework-specific pages for details on each level:

React — Composable & Hooks

Svelte — Composable & Stores

Web Components — Slots & Controller

Vanilla — Q/M/S API & Reactive State

Quality Profiles

The drop-in UI exposes three quality presets. The lower-level core type also accepts auto for custom integrations that want browser-selected defaults:

Profile	Resolution	Use Case
professional	1920x1080	High quality, good upload
broadcast	1920x1080	Balanced quality/bandwidth
conference	1280x720	Limited bandwidth, meetings

<StreamCrafter initialProfile="conference" />

Multi-Source Streaming

StreamCrafter supports simultaneous camera + screen share with per-source volume control and audio mixing.

const { startCamera, startScreenShare, sources } = useStreamCrafterV2({ ... });

await startCamera();
await startScreenShare({ audio: true });
// Both sources now stream together with mixed audio

See Advanced Features for audio mixing details.

Compositor

The compositor is enabled by default — multi-source layout control with scenes, layers, and transitions:

• 15 layout presets (solo, PiP, split, grid, featured, and more)
• Drag-and-drop layer ordering
• Scene switching with animated transitions
• GPU-accelerated rendering (WebGPU, WebGL, Canvas2D fallback)

See Compositor for full details.

States

State	Description
idle	Ready, no capture active
requesting_permissions	Waiting for camera/mic permission
capturing	Media captured, not streaming
connecting	Establishing WHIP connection
streaming	Live and streaming
reconnecting	Connection lost, attempting reconnect
error	Error occurred
destroyed	Cleanup complete

Browser Support

Browser	Tested
Chrome 90+	Full support
Firefox 90+	Full support
Safari 14.1+	Full support
Edge 90+	Full support

Background Tab Behavior

Background-safe encoding requires WebCodecs and RTCRtpScriptTransform support (Chromium-family). Without that path, browser encoders may pause when the tab loses focus.

Troubleshooting

Camera/Microphone Not Working

• Check permissions — Ensure the browser has camera/mic access
• HTTPS required — MediaDevices API requires secure context
• Device in use — Close other apps using the camera

Stream Won’t Connect

• Check WHIP URL — Verify the endpoint is correct
• Firewall/NAT — WebRTC may need TURN servers for restrictive networks (pass iceServers in config)
• Stream key — Ensure the stream key is valid

High Latency

• Upload bandwidth — Check your upload speed matches the profile bitrate
• Profile mismatch — Try conference profile for limited bandwidth

Screen Share Audio Missing

• System audio — Screen share audio only works with { audio: true }
• Browser support — System audio capture requires Chrome/Edge (not Firefox/Safari)
• User selection — User must check “Share audio” in the browser dialog