Playback a live stream

This is how a Livepeer Studio playback URL is formatted: https://livepeercdn.com/hls/{playbackId}/index.m3u8.

All sessions for a stream have the same playback URL.

The easiest way to the stream a playback URL is to login to the Livepeer Studio Dashboard, navigate to the Streams page, livepeer.studio/dashboard/streams, and click on a stream name. The playback URL is listed on the page.

If you already know the playback ID of a stream (or VOD asset), you can also visit https://lvpr.tv/?v={playbackId} to quickly view the content.

To build an application that plays a Livepeer livestream or VOD asset, you need to use some sort of video player compatible with the HLS protocol. There are many HLS video players out there, for example video.js or JW Player which either have built-in support or have plugins to support HLS.

To make getting started easier, you can also use the Livepeer embeddable player in your page. To use it, you just need to create an <iframe> element in your application with the URL pointing to the hosted player.

You only need to send it some information about what content it is supposed to play, which is made via the ?v query-string parameter, which should be set to the playbackId. Notice that this playback ID can be either of a livestream or a VOD asset and the player will figure out where to find the content to play.

Example Code

<iframe
  src="https://lvpr.tv?v={playbackId}"
  frameborder="0"
  allowfullscreen
  allow="autoplay; encrypted-media; picture-in-picture"
  sandbox="allow-scripts">
</iframe>

Customization

There are some options that can be changed in the player for a better integration on your application. Those are also configured through the query-string. Some examples are:

• autoplay: By default the player starts playing the video automatically. This also means that the video has to start muted due to browser restrictions. To disable that use the ?autoplay=0 option. To still start the video muted, you can include &muted=1 as well.

• loop: To repeatedly play the video in a loop use ?loop=1. This is useful for short videos to create a continuous experience for the user.

• theme (experimental): Use this to change the theme of the player. We currently provide the default videojs themes as options (city, fantasy, forest and sea) e.g. ?theme=sea. By default no theme is applied.

You can also make a GET request to https://livepeer.studio/api/stream/{id}, and get the value of playbackId in the response. The playback URL can then be formatted as above: https://livepeercdn.com/hls/{playbackId}/index.m3u8.

cURL Method

curl --location --request GET 'https://livepeer.studio/api/stream/{id}' \
--header 'Authorization: Bearer {api_key}'

Node.js with Axios Method

const axios = require("axios");

axios
  .get("https://livepeer.studio/api/stream/{id}", {
    headers: {
      Authorization: "Bearer {api_key}",
    },
  })
  .then((res) => {
    console.log(JSON.stringify(res.data));
  })
  .catch((error) => {
    console.log(error);
  });

Playback for all Pro plan streams is delivered via a content delivery network (CDN). The transcoded video stream automatically switches between the transcoded renditions based on the viewers' available bandwidth, device performance, and network conditions.

Non-CDN delivery for free tier users is limited to 10 viewers per account.

Look at the lastSeen and isActive (Status row on the Livepeer Studio Dashboard) values. If ingest was properly configured for playback, lastSeen will show the current date and time and isActive will be true (Status row on the Livepeer Studio Dashboard will be Active).

If this isn't the case, confirm the streamKey and RTMP ingest URL, rtmp://rtmp.livepeer.studio/live, are configured correctly in your broadcast software.

Lastly, check that your playback URL is correct.

You can use ?video=false at the end of an .m3u8 URL to get an audio-only stream. For example, https://livepeercdn.com/hls/{playbackId}/index.m3u8?video=false.