Quickstart

This Quickstart guide includes a step-by-step process to get you started developing an application with the Livepeer Studio API and Javascript. With the Livepeer Studio toolkit, you will be able to develop an application that follows our complete livestreaming cycle and best practice guidelines to:

• Create a livestream
• Record a livestream
• Playback a livestream using the Livepeer Studio API and Javascript

What You Need to Know

• Familiarity with Livepeer Studio core concepts
• Experience working with Javascript

What You Can Build Here

Some kinds of applications you may build with this Quickstart guide include but are not limited to:

Implementation
OBS Professional Broadcasting (e.g. Livestreaming changing camera angles, or multiple "views" within a screen)
Livepeer Studio In-browser Applications Note: Capabilities are available for implementations of InBrowser platforms.
Multi-streaming

Note: This Quickstart guide follows an implementation for building a livestream application with OBS Professional Broadcasting:

Livestreaming Methods

You can choose which method to use to stream for your implementation (e.g., Inbrowser, Mobile, Zoom, ...)

Technical Preparation

Before getting started, you can set up your environment for developing your application:

• Operating System: Livepeer Studio services can be run on any operating system.

• IDE: You can use any development environment that supports your library (VS Code, Sublime, etc.).

• Complete these steps to finalize your setup:

1. Sign up for a Free Livepeer Studio account
2. Get an API key
3. Download and install OBS
4. Install Node.js
5. Install Axios
6. Access the Livepeer Studio API Reference

Create a Livestream

1. To create a stream you will need to get the following parameters:

• A Stream key
• An RTMP ingest URL
• A playbackURL

Note: Be sure to store them to access for future steps.

Request

The following request will return:

• playbackId
• id of the stream
• streamKey available

Note: These parameters will be used in OBS along with an id to enable recording for the stream.

const axios = require("axios");
const rtmpURL = "https://livepeer.studio/api";
const playbackURL = "https://livepeercdn.com/hls/{playbackId}/index.m3u8";

const createStream = async () => {
  const response = await axios.post("https://livepeer.studio/api/stream", {
    headers: {
      Authorization: `Bearer ${process.env.LV_API_KEY}`,
      "Content-Type": "application/json",
    },
    data: JSON.stringify({
      name: "test_stream",
      profiles: [
        {
          name: "720p",
          bitrate: 2000000,
          fps: 30,
          width: 1280,
          height: 720,
        },
        {
          name: "480p",
          bitrate: 1000000,
          fps: 30,
          width: 854,
          height: 480,
        },
        {
          name: "360p",
          bitrate: 500000,
          fps: 30,
          width: 640,
          height: 360,
        },
      ],
    }),
  });
  console.log(JSON.stringify(response.data));
};

Response

{
   "lastSeen": 0,
   "isActive": false,
   "record": false,
   "suspended": false,
   "sourceSegments": 0,
   "transcodedSegments": 0,
   "sourceSegmentsDuration": 0,
   "transcodedSegmentsDuration": 0,
   "sourceBytes": 0,
   "transcodedBytes": 0,
   "profiles": [
       {
           "name": "720p",
           "bitrate": 2000000,
           "fps": 30,
           "width": 1280,
           "height": 720
       },
       {
           "name": "480p",
           "bitrate": 1000000,
           "fps": 30,
           "width": 854,
           "height": 480
       },
       {
           "name": "360p",
           "bitrate": 500000,
           "fps": 30,
           "width": 640,
           "height": 360
       }
   ],
   "name": "test_stream",
   "kind": "stream",
   "userId": "eada599f-3d58-499b-ba24-c7f3faf988de",
   "renditions": {},
   "id": "05b0b7b7-c6aa-45b8-a947-6c11997a3efd",
   "createdAt": 1654273038907,
   "streamKey": "05b0-nyoa-jf0p-s2x8",
   "playbackId": "05b0572n8voz1t4w",
   "createdByTokenName": "Test",
   "multistream": {
       "targets": []
   }
}

From the API response, we now have:

• A playbackId for our playbackURl
• The id of the stream to enable the recording for the stream
• A streamKey to use in OBS

2. Include these variables for later use:

Stored Variables

let playBackId = "05b0572n8voz1t4w";
let id = "05b0b7b7-c6aa-45b8-a947-6c11997a3efd";
let streamKey = "05b0-nyoa-jf0p-s2x8";

Start streaming with OBS

Now that you have created a new stream, you can start streaming in OBS.

1. First, follow the OBS tutorial.

Verify the stream is running

2. Once you complete the OBS Tutorial, you can verify that the stream is running by setting the following value:

/api/stream?streamsonly=1&filters=[{"id": isActive, "value": true}

Request

const streamOn = async () => {
 const response = await axios.get("https://livepeer.studio/api/stream?streamsonly=1&filters=[{"id": "isActive", "value": true}", {
   headers: {
     'Authorization': `Bearer ${process.env.LV_API_KEY}`,
     'Content-Type': 'application/json'
   },
   data: JSON.stringify({
     "record": true
 })
 });
  console.log(JSON.stringify(response.data));
}

Response

"isActive": true

Record a Livestream

The setting for recording a livestream indicates:

• The ability to record a livestream, and
• Save the livestream for later views

By default, this setting is set to "record": false. You will be able to change this in the following steps:

Note: Recording a livestream is not a development requirement for the livestreaming process. However, most streamers prefer to have a recording of their streams to show later, e.g. broadcasting/streaming/content creating

Enable recording

1. You will make the request to turn the recording setting on and record your stream:

Request

const recordOn = async () => {
  const response = await axios.patch(
    "https://livepeer.studio/api/stream/{id}/record",
    {
      headers: {
        Authorization: `Bearer ${process.env.LV_API_KEY}`,
        "Content-Type": "application/json",
      },
      data: JSON.stringify({
        record: true,
      }),
    }
  );
  console.log(JSON.stringify(response.data));
};

Response

The response should return a 204 message and "record": true in the livestream object.

Once the live stream is complete, you can stop the stream after 6 minutes from the end of the streaming session.

List recorded sessions

1. Confirm that the session has been recorded:

Request

const getRecording = async () => {
  const response = await axios.get(
    "https://livepeer.studio/api/stream/{id}/sessions?record=1",
    {
      headers: {
        Authorization: `Bearer ${process.env.LV_API_KEY}`,
        "Content-Type": "application/json",
      },
    }
  );
  console.log(JSON.stringify(response.data));
};

Response

"createdAt": 1654285544854,
       "ingestRate": 0,
       "renditions": {},
       "outgoingRate": 0,
       "recordingStatus": "ready",
       "recordingUrl": "https://livepeercdn.com/recordings/05b0b7b7-c6aa-45b8-a947-6c11997a3efd/index.m3u8",
       "mp4Url": "https://livepeercdn.com/recordings/05b0b7b7-c6aa-45b8-a947-6c11997a3efd/source.mp4"

List assets

Retrieve the playbackURL to play the recording

2. Get the playbackURL:

Request

• Use /api/asset

const getPlaybackURL = async () => {
  const response = await axios.get("https://livepeer.studio/api/asset", {
    headers: {
      Authorization: `Bearer ${process.env.LV_API_KEY}`,
      "Content-Type": "application/json",
    },
  });
  console.log(JSON.stringify(response.data));
};

Response

This returns the playbackURL at the bottom of the response which we will use to view the recording.

{
  "id": "2a36cec4-40e1-4ece-9a21-f24b632901c1",
  "hash": [
    {
      "hash": "9c0871abb5a23757b681485a3eb1fe66",
      "algorithm": "md5"
    },
    {
      "hash": "4c316d62cc8084ee02ead7862a7ec814433cb18c0a025952d5461d9fc99b8b46",
      "algorithm": "sha256"
    }
  ],
  "name": "live-to-vod-05b07f11-4900-453a-af05-03376bba4514",
  "size": 23952463,
  "status": {
    "phase": "ready",
    "updatedAt": 1654357897107
  },
  "userId": "eada599f-3d58-499b-ba24-c7f3faf988de",
  "createdAt": 1654357880804,
  "videoSpec": {
    "format": "mp4",
    "tracks": [
      {
        "type": "audio",
        "codec": "aac",
        "bitrate": 159859,
        "channels": 2,
        "duration": 2.005313,
        "sampleRate": 48000
      },
      {
        "fps": 30,
        "type": "video",
        "codec": "h264",
        "width": 1280,
        "height": 720,
        "bitrate": 2863648,
        "duration": 2,
        "pixelFormat": "yuv420p"
      }
    ],
    "duration": 2.005313
  },
  "playbackId": "05b0k8kughw7o6ml",
  "downloadUrl": "https://livepeercdn.com/asset/05b0k8kughw7o6ml/video"
}

Playback a Livestream

The response from requesting an asset in the API will return the playbackId which is used for the playbackUrl. https://livepeercdn.com/hls/{playbackId}/index.m3u8

Note: You can also get the playbackUrl from the dashboard of the stream.

Options to view a livestream

There are different options to view a livestream.

For example:

You can check a recorded video via Bitmovin test player, then:

1. Copy and paste your playbackURL in the Stream box and select the option for HLS.

2. To see the recorded live stream:

• Click the Load Settings button when you press play.

3. For other options of playback:

• For Safari web browser only, you can directly paste the playbackURL in the address bar.

• *Alternatively, you can build your own video player: See How to implement a player in the front end.

Note: The process of playing back a recorded video is the same as above.

Note: There are two ways to playback a recorded stream:

• via the API by getting the asset and the response returns a playbackUrl, or
• download it via the downloadUrl link. (ALternatively you can get the download link from the dashboard)