Features

Anatomy

Props

data-livepeer-video

data-enabled

Data Attributes

API Reference

SDKs

AI Video (Beta)

What's New

Community

Livepeer Docs

Documentation

Dashboard

Discord

The `Video` component is a container for previewing broadcast video content.

Video

Introduction

Learn how to create an API key and start adding live and on-demand video to your app or website!

Quickstart

Practical step-by-step guides to help you achieve a specific goal. These guides are designed to help you get started with a specific task or feature.

Learn how to upload and play back an asset

Upload an asset

Play an asset

Learn how to listen to asset events using Studio webhooks.

Listen to asset events

Learn how to upload and play back an encrypted video asset

Upload encrypted assets

Learn how to retrieve thumbnails for a video asset

Get an asset thumbnail

Create a livestream

Learn how to use a media player with Livepeer

Play a livestream

Learn how to stream into Livepeer Studio with OBS

Livestream via OBS

In-browser broadcasting

Learn how to optimize latency for your Livepeer Studio workflow.

Optimize latency

Learn how to monitor stream metrics on Livepeer

Monitor stream health

Learn how to listen to stream events using Studio webhooks

Listen to stream events

Set up a multistream

Learn how to create clips from your livestream

Clip a livestream

Learn how to retrieve thumbnails for a live stream

Get a livestream thumbnail

Learn how to add access control to a content with React, using webhooks

Control access using webhooks

Learn how to add access control to a content with Livepeer UI Kit, using JWTs

Control access using JWTs

Learn how to set up a webhook using Node.js and Ngrok to receive notifications from Livepeer.

Set up and listen for webhooks

Transcode with Storj

Transcode with W3S

Learn how to check out viewer engagement on Livepeer

Engagement via API

Learn how to visualize your engagement metrics with Grafana

Engagement via Grafana

Learn how to analyze Livepeer video engagement metrics with Timeplus

Engagement via Timeplus

Explore best practices for managing multiple environments in Livepeer Studio

Managing Projects

Learn how to Build a decentralized video application with FVM and Livepeer

Youtube clone with FVM

Learn how to token gate videos using Livepeer and Lit: A step-by-step tutorial

Token gate videos with Lit

Bridge LPT to Arbitrum

Migrate stake to Arbitrum

Yield Calculation on Explorer

Get started

Learn how to install go-livepeer and become an orchestrator

Install Go Livepeer

Connect to Arbitrum

Reward Calls

Set Session Limits

Set Pricing

Benchmark Transcoding

Assess concurrent stream

Monitor Metrics

Vote on proposals

Dual Mine

Connect to Transcoders

Migrate to Arbitrum

Migrate Stake from Contract

Gateway Introspection

Troubleshoot

This guide will walk you through the Livepeer Gateway installation and setup. Steps to install for Ubuntu Linux, Docker, and Windows are provided. Choose the environment you want, follow install instructions, then continue to the configuration section.

Overview

Docker Install

Linux Install

Windows Install

To better control your encoding profiles it is recommended to use a json file to specify the resolution and bitrate for your encoding ladder.

Configure Transcoding Options

The following steps will walk you through adding funds to the newly created ETH account. This includes funding the ETH account on Ethereum Mainnet, bridging the funds to Arbritrum's L2 Network, and finally using the Livepeer CLI to allocate the proper deposit and reserve amounts.

Fund The Livepeer Gateway

Publish Content

Playback Content

What is Livepeer AI?

Audio-to-Text

Image-to-Image

Image-to-Text

Image-to-Video

Segment-Anything-2

Text-to-Image

Text-to-Speech

Upscale

Get Started

Configuring AI Models

Download AI Models

Start your AI Orchestrator

Attach Remote AI Workers

Perform Benchmarking

On-chain Setup

Building on Livepeer AI

AI Gateways

Showcase

Explore developer SDKs for interacting with the Livepeer AI API.

AI SDKs

Learn how to run your first AI inference job using the Livepeer AI Go SDK.

Learn how to run your first AI inference job using the Livepeer AI JS SDK.

JavaScript

Learn how to run your first AI inference job using the Livepeer AI Python SDK.

Python

Audio To Text

Apply image transformations to a provided image.

Image To Image

Image To Text

Image To Video

Segment Anything 2

Text To Image

Generate a text-to-speech audio file based on the provided text input and speaker description.

Text To Speech

Upscale an image by increasing its resolution.

API Support Matrix

Bandwidth Requirements

CLI Reference

GPU Support

Hardware Requirements

Prometheus Metrics

Addresses of deployed contracts of the Livepeer protocol on various networks.

Contract Addresses

Curated collection of Livepeer example applications and integrations

Example Applications

Awesome Livepeer

Explore developer SDKs, pre-built UI components, and tools for interacting with the Livepeer Studio API.

Learn how to create your first stream using the Livepeer Javascript SDK.

Learn how to create your first stream using the Livepeer Go SDK.

Learn how to create your first stream using the Livepeer Python SDK.

Getting Started

The `Player.Root` component is the React Context wrapper for the Player.

Root

The `Container` component is the container element for the Player. It wraps all other elements and acts as an aspect ratio container by default.

Container

The `Video` component renders the actual video content and manages various aspects of media playback.

The `ErrorIndicator` component is a visual representation of error states in media playback based on error types.

Error

The `LoadingIndicator` component is a visual indicator of the loading state of the media.

Loading

The `Portal` component allows projection of content into different parts of the DOM.

Portal

The `Poster` component displays a visual placeholder for media content prior to playback.

Poster

The `Broadcast.Root` component is the React Context wrapper for Broadcast.

The `Container` component is the container element for Broadcast. It wraps all other elements and acts as an aspect ratio container by default.

The `EnabledTrigger` and `EnabledIndicator` components provide gateways with interactive controls and visual cues to manage the "enabled" state of the broadcast.

Enable

The `ErrorIndicator` component is a visual representation of error states in broadcast based on error types.

A comprehensive example showcasing the integration of various `@livepeer/react/player` components to create a full-featured player interface with controls and settings.

Player

A comprehensive example showcasing the integration of various `@livepeer/react/broadcast` components to create a full-featured broadcast interface with controls, settings, and device selection.

Broadcast

Migration guide for the 4.0.0 release of Livepeer React.

Migration Guide for 4+

Authentication

The Assets API is used to create, retrieve, update, delete assets object from pipeline.

To upload an asset, your first need to request for a direct upload URL
and only then actually upload the contents of the asset.
\
\
Once you created a upload link, you have 2 options, resumable or direct
upload. For a more reliable experience, you should use resumable uploads
which will work better for users with unreliable or slow network
connections. If you want a simpler implementation though, you should
just use a direct upload.


## Direct Upload
For a direct upload, make a PUT request to the URL received in the url
field of the response above, with the raw video file as the request
body. response above:


## Resumable Upload
Livepeer supports resumable uploads via Tus. This section provides a
simple example of how to use tus-js-client to upload a video file.
\
\
From the previous section, we generated a URL to upload a video file to
Livepeer on POST /api/asset/request-upload. You should use the
tusEndpoint field of the response to upload the video file and track the
progress:

```
# This assumes there is an `input` element of `type="file"` with id
`fileInput` in the HTML


const input = document.getElementById('fileInput');

const file = input.files[0];

const upload = new tus.Upload(file, {
  endpoint: tusEndpoint, // URL from `tusEndpoint` field in the
`/request-upload` response
  metadata: {
    filename,
    filetype: 'video/mp4',
  },
  uploadSize: file.size,
  onError(err) {
    console.error('Error uploading file:', err);
  },
  onProgress(bytesUploaded, bytesTotal) {
    const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
    console.log('Uploaded ' + percentage + '%');
  },
  onSuccess() {
    console.log('Upload finished:', upload.url);
  },
});

const previousUploads = await upload.findPreviousUploads();

if (previousUploads.length > 0) {
  upload.resumeFromPreviousUpload(previousUploads[0]);
}

upload.start();

```

> Note: If you are using tus from node.js, you need to add a custom URL
storage to enable resuming from previous uploads. On the browser, this
is enabled by default using local storage. In node.js, add urlStorage:
new tus.FileUrlStorage("path/to/tmp/file"), to the UploadFile object
definition above.


Upload asset via URL

Retrieve an asset

Update an asset

Delete an asset

Retrieve assets

The Livestream API is used to create, retrieve, update, delete stream object from pipeline.

The only parameter you are required to set is the name of your stream,
but we also highly recommend that you define transcoding profiles
parameter that suits your specific broadcasting configuration.
\
\
If you do not define transcoding rendition profiles when creating the
stream, a default set of profiles will be used. These profiles include
240p,  360p, 480p and 720p.
\
\
The playback policy is set to public by default for new streams. It can
also be added upon the creation of a new stream by adding
`"playbackPolicy": {"type": "jwt"}`


Retrieve a livestream

Update a livestream

`DELETE /stream/{id}/terminate` can be used to terminate an ongoing
session on a live stream. Unlike suspending the stream, it allows the
streamer to restart streaming even immediately, but it will force
terminate the current session and stop the recording.
\
\
A 204 No Content status response indicates the stream was successfully
terminated.


Terminates a livestream

Add a multistream target

Remove a multistream target

This will also suspend any active stream sessions, so make sure to wait
until the stream has finished. To explicitly interrupt an active
session, consider instead updating the suspended field in the stream
using the PATCH stream API.


Delete a livestream

Retrieve all livestreams

Create a clip

Retrieve clips of a livestream

The Generate API is used to run generative AI models.

The Multistream target API is used to create, retrieve, update, delete multi-stream targets object from pipeline.

Create a multistream

Retrieve a multistream

Update a multistream

Make sure to remove any references to the target on existing
streams before actually deleting it from the API.


Overview

Server-side SDKs

React Components

Video

Features

Anatomy

Props

Data Attributes

`data-livepeer-video`

`data-enabled`

Overview

Server-side SDKs

React Components

​Features

​Anatomy

​Props

​Data Attributes

​data-livepeer-video

​data-enabled

Features

Anatomy

Props

Data Attributes

`data-livepeer-video`

`data-enabled`