Skip to main content

​
Browser SDK Installation

Add real-time AI video effects to your web applications. Daydream Browser SDK The Daydream Browser SDK provides WebRTC streaming capabilities for web applications. It’s split into two packages:
  • @daydreamlive/browser - Core WebRTC client, framework-agnostic, zero dependencies
  • @daydreamlive/react - React hooks wrapper

​
Installation

# Core package
npm install @daydreamlive/browser

# React hooks - optional, for React apps
npm install @daydreamlive/react

​
Browser Requirements

The SDK works in all modern browsers that support WebRTC:
  • Chrome 80+
  • Firefox 80+
  • Safari 14+
  • Edge 80+

​
Architecture

Think of it like this: your backend creates the stream and gets the connection URLs, then your frontend uses those URLs to broadcast and play video.

​
Quick Example

Here’s a minimal example that broadcasts your webcam and plays the AI-processed output: 
import { createBroadcast, createPlayer } from "@daydreamlive/browser";

// Get the whipUrl from your backend (created with @daydreamlive/sdk)
const whipUrl = "https://ai.livepeer.com/live/video-to-video/stk_xxx/whip";

// Get webcam
const stream = await navigator.mediaDevices.getUserMedia({ video: true });

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

// Play the AI-processed output
const player = createPlayer(broadcast.whepUrl);
await player.connect();
player.attachTo(document.querySelector("video#output"));

​
What’s Next?

​
Live Examples

Check out these working examples:
ExampleDescriptionDemo
with-reactBasic React hooksLive Demo
with-compositorCanvas compositionLive Demo
with-screen-shareScreen captureLive Demo
with-threeThree.js streamingLive Demo
with-vanillaPure JS (no React)—