⚡Quickstart

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

First, go to Live Studio, if you haven’t already, and create an account. Once you’ve created an account, you’ll be able to create an API key by clicking on the “Create API Key” button on Developers page.

We do not recommend using “CORS-enabled” API keys - they will be deprecated in an upcoming release. We recommend making requests from your backend to the Live Studio API.

You can now use this API key in Live SDKs and APIs in order to authenticate your requests and start building.

We recommend creating separate accounts for your development and production environments. This will allow you to easily isolate your environments. We will be shipping a solution for multi-environment management soon.

In this example, we will use Javascript and React to upload a video. Make sure to setup a React app first.

Install the JS SDK and React UI Kit

We install both the NodeJS SDK (which works in all JS environments with fetch) and the React UI Kit library, which provides composable React primitives for building video apps.

npm install live @live/react

Set up the SDK

Add an API key to the environment variables and construct a new Live SDK client.

import Live from "live";

const live = new Live({
  apiKey: process.env.YOUR_PRIVATE_API_KEY,
});

Retrieve playback info

We can now use the SDK on the backend to fetch the playback info for our asset.

This asset was uploaded using the dashboard, but this can also be an asset created from an application.

import { getSrc } from "@live/react/external";

const playbackId = "f5eese9wwl88k4g8";

export const getPlaybackSource = () => {
  const playbackInfo = await live.playback.get(playbackId);

  const src = getSrc(playbackInfo.playbackInfo);

  return src;
};

Play the asset

We can now use Player component from the SDK to play a video. In the below example, we style the elements with Tailwind, but you can use any styling solution:

import { PauseIcon, PlayIcon } from "@live/react/assets";
import { getSrc } from "@live/react/external";
import * as Player from "@live/react/player";
import { vodSource } from "./source";

export const DemoPlayer = ({ src }: { src: Src[] | null }) => {
  return (
    <Player.Root src={src}>
      <Player.Container>
        <Player.Video title="Live stream" />

        <Player.Controls className="flex items-center justify-center">
          <Player.PlayPauseTrigger className="w-10 h-10">
            <Player.PlayingIndicator asChild matcher={false}>
              <PlayIcon />
            </Player.PlayingIndicator>
            <Player.PlayingIndicator asChild>
              <PauseIcon />
            </Player.PlayingIndicator>
          </Player.PlayPauseTrigger>
        </Player.Controls>
      </Player.Container>
    </Player.Root>
  );
};

Start building

Check out the SDKs and API Reference pages to learn more about how to use the SDKs and API to build your application.

You can also refer to the Guides section for more in-depth tutorials on how to use the SDKs and API to build specific applications.

Don’t know where to start? Check out these four tutorials:

• Learn how to create a livestream

• Learn how to listen a asset events