1. 创建帐户和 API 密钥
- 前往 Livepeer Studio 并创建帐户。
- 打开 开发者 区域并点击 创建 API 密钥。
- 将 API 密钥安全存储(例如,存储在环境变量中)。从你的 后端调用 Livepeer Studio API 时。
Use separate accounts or projects for development and production to keep environments isolated.
创建账户,获取API密钥,并在5分钟内添加实时或按需视频。
npm install livepeer @livepeer/react
import Livepeer from "livepeer";
const livepeer = new Livepeer({
apiKey: process.env.LIVEPEER_API_KEY,
});
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);
}
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>
);
}
此页面对您有帮助吗?