通过创建帐户、API 密钥,然后使用 SDK 播放视频(例如您在仪表板中上传的资产)来开始使用 Livepeer Studio。
1. 创建帐户和 API 密钥
- 前往 Livepeer Studio 并创建帐户。
- 打开 开发者 区域并点击 创建 API 密钥。
- 将 API 密钥安全存储(例如,存储在环境变量中)。从你的 后端调用 Livepeer Studio API 时。
CORS-enabled API keys are not recommended and will be deprecated. Make requests to the Livepeer Studio API from your backend and never expose your secret API key in the browser.
Use separate accounts or projects for development and production to keep environments isolated.
2. 安装 SDK
此示例使用 JavaScript SDK 和 Livepeer React 库:
npm install livepeer @livepeer/react
3. 设置客户端
将您的 API 密钥添加到环境变量中,然后创建 Livepeer 客户端(例如在后端或服务器上下文中):
import Livepeer from "livepeer";
const livepeer = new Livepeer({
apiKey: process.env.LIVEPEER_API_KEY,
});
4. 获取播放信息
使用客户端获取资产的播放信息(例如,您在仪表板中上传的资产)。您需要资产的 播放 ID:
import { getSrc } from "@livepeer/react/external";
const playbackId = "f5eese9wwl88k4g8"; // replace with your playback ID
export async function getPlaybackSource() {
const playbackInfo = await livepeer.playback.get(playbackId);
return getSrc(playbackInfo.playbackInfo);
}
5. 播放资产
使用 Livepeer 播放器播放视频。在服务器上获取源(例如,在 React 服务器组件或 API 路由中),然后将其传递给播放器:
import { PauseIcon, PlayIcon } from "@livepeer/react/assets";
import { getSrc } from "@livepeer/react/external";
import * as Player from "@livepeer/react/player";
export function DemoPlayer({ src }: { src: Src[] | null }) {
return (
<Player.Root src={src}>
<Player.Container>
<Player.Video title="Video" />
<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>
);
}
下一步
- 创建直播流 — 创建流并获取流密钥和播放ID。
- 上传资产 — 上传视频文件并进行播放。
- 监听资产事件 — 使用webhooks在资产准备就绪或失败时进行响应。
- SDK概述 — TypeScript、Go、Python 和 React。
- API概述 — 身份验证和 API 基础知识。