Streamlet Package Documentation

@streamlet/core

Use the official npm package when you want a simpler JavaScript client for uploads and status checks, plus a clean React player around your Streamlet playback URLs.

Install

Install the package for JavaScript client usage. Add React and React DOM if you want to use the player and editor components.

Install package

Bash

npm install @streamlet/core
npm install react react-dom @streamlet/core

JavaScript Client

The client is intentionally simple: create one StreamletClient, call uploadVideo(), then call getVideoStatus() for a specific video id.

Use StreamletClient

JavaScript

import { StreamletClient } from "@streamlet/core";

const client = new StreamletClient({
  baseUrl: "https://api.streamlet.in",
  apiKey: "your_streamlet_api_key",
  accountNumber: "your_account_id"
});

const result = await client.uploadVideo({
  file,
  videoTitle: "Launch Demo",
  enableCaption: true,
  captionLanguages: ["english", "hindi"],
  saveOriginalFile: true
});

const status = await client.getVideoStatus(result.videoId);
console.log(status);

React Player

<StreamletPlayer /> is a responsive Mux wrapper. Pass the stream URL directly, then optionally pass caption languages, chapter JSON, chapter VTT track URL, and UI theme values.

Use StreamletPlayer

JavaScript

import { StreamletPlayer } from "@streamlet/core/react";

<StreamletPlayer
  title="Demo video"
  streamUrl={streamUrl}
  captionLanguages={["english", "hindi"]}
  chapters={[
    { title: "Intro", startTime: 0 },
    { title: "Main Demo", startTime: 42 }
  ]}
  chaptersUrl={`${baseUrl}/chapters.json`}
  chapterTrackUrl={`${baseUrl}/chapters.vtt`}
  theme={{
    accentColor: "#38bdf8",
    progressFillColor: "#2563eb",
    primaryColor: "#f8fafc"
  }}
/>

Editors

Use the included caption and timeline editors when you want a lightweight UI to manage subtitle rows and chapter markers inside your app.

Use editor components

JavaScript

import { CaptionEditor, TimelineEditor } from "@streamlet/core/react";

<CaptionEditor
  captions={[
    { startTime: 0, endTime: 3, text: "Welcome to Streamlet" }
  ]}
/>

<TimelineEditor
  chapters={[
    { title: "Intro", startTime: 0 },
    { title: "Demo", startTime: 42 }
  ]}
/>