Applications

Livepeer provides three frontend integration paths depending on your framework and requirements. @livepeer/react Player handles HLS and WebRTC playback with automatic ABR (adaptive bitrate) selection, poster images, and playback metrics. It accepts a playbackId from any stream or asset and negotiates the best transport automatically. @livepeer/react Broadcast provides browser-based WHIP publishing for live streams. Users can stream directly from the browser without OBS or external encoders. HLS.js (non-React) works with any framework. Livepeer playback URLs are standard HLS manifests; any HLS-compatible player works. Use HLS.js for Vue, Svelte, Angular, or vanilla JavaScript applications.

Quick start

npm install @livepeer/react

import * as Player from '@livepeer/react/player';

export function VideoPlayer({ playbackId }: { playbackId: string }) {
  return (
    <Player.Root src={`https://livepeercdn.studio/hls/${playbackId}/index.m3u8`}>
      <Player.Container>
        <Player.Video />
        <Player.Controls>
          <Player.PlayPauseTrigger />
        </Player.Controls>
      </Player.Container>
    </Player.Root>
  );
}

React Player

HLS and WebRTC playback with ABR, poster, and metrics.

React Broadcast

Browser-based WHIP publishing for live streams.

Core Web (hls.js)

Framework-agnostic HLS playback for Vue, Svelte, and vanilla JS.

Last modified on May 31, 2026

Browser and mobile gateways

React Player

⌘I

Start here

Concepts

Learn

Build

Guides

Resources

Quick start

React Player

React Broadcast

Core Web (hls.js)

​Quick start

React Player

React Broadcast

Core Web (hls.js)

Quick start