Applications

Build frontend applications on Livepeer using the React Player and Broadcast components, or integrate directly with hls.js for non-React environments.

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.