open-index/open-npm huggingface dataset:
npm package: @livepeer-frameworks/player-react
Description: React components for FrameWorks streaming player
Author: Livepeer FrameWorks
Latest version: 0.3.1

# @livepeer-frameworks/player-react

React wrapper for the FrameWorks player. Resolves endpoints via Gateway or Mist and renders the best available player (WebCodecs, HLS, etc).

**Docs:** `logbook.frameworks.network`

## Install

```bash
pnpm add @livepeer-frameworks/player-react
# or
npm i @livepeer-frameworks/player-react
```

## Usage

```tsx
import { Player } from "@livepeer-frameworks/player-react";

export default function App() {
  return (
    <div style={{ width: "100%", height: 500 }}>
      <Player
        contentType="live"
        contentId="pk_..." // playbackId
        options={{ gatewayUrl: "https://your-bridge/graphql" }}
      />
    </div>
  );
}
```

Notes:

- There is **no default gateway**; provide `gatewayUrl` unless you pass `endpoints` or `mistUrl`.

### Direct MistServer Node (mistUrl)

```tsx
<Player
  contentType="live"
  contentId="pk_..."
  options={{ mistUrl: "https://edge-egress.example.com" }}
/>
```

### Styles

```ts
import "@livepeer-frameworks/player-react/player.css";
```

## Controls & Shortcuts

The player ships with keyboard/mouse shortcuts when the player is focused (click/tap once).

**Keyboard**
| Shortcut | Action | Notes |
|---|---|---|
| Space | Play/Pause | Hold = 2x speed (when seekable) |
| K | Play/Pause | YouTube-style |
| J / Left | Skip back 10s | Disabled on live-only |
| L / Right | Skip forward 10s | Disabled on live-only |
| Up / Down | Volume +/-10% | - |
| M | Mute/Unmute | - |
| F | Fullscreen toggle | - |
| C | Captions toggle | - |
| 0-9 | Seek to 0-90% | Disabled on live-only |
| , / . | Prev/Next frame (paused) | WebCodecs = true step; others = buffered-only |

**Mouse / Touch**
| Gesture | Action | Notes |
|---|---|---|
| Double-click | Fullscreen toggle | Desktop |
| Double-tap (left/right) | Skip +/-10s | Touch only, disabled on live-only |
| Click/Tap and hold | 2x speed | Disabled on live-only |

**Constraints**

- Live-only streams disable seeking/skip/2x hold and frame-step.
- Live with DVR buffer enables the same shortcuts as VOD.
- Frame stepping only moves within already buffered ranges (no network seek). WebCodecs supports true frame stepping when paused.
npm package: @livepeer-frameworks/player-svelte
Description: Svelte 5 components for FrameWorks streaming player
Author: Livepeer FrameWorks
Latest version: 0.3.1

# @livepeer-frameworks/player-svelte

Svelte wrapper for the FrameWorks player. Resolves endpoints via Gateway or Mist and renders the best available player (WebCodecs, HLS, etc).

**Docs:** `logbook.frameworks.network`

## Install

```bash
pnpm add @livepeer-frameworks/player-svelte
# or
npm i @livepeer-frameworks/player-svelte
```

## Usage

```svelte
<script lang="ts">
  import { Player } from "@livepeer-frameworks/player-svelte";
</script>

<div style="width: 100%; height: 500px;">
  <Player
    contentType="live"
    contentId="pk_..."
    // playbackId
    options={{ gatewayUrl: "https://your-bridge/graphql" }}
  />
</div>
```

Notes:

- There is **no default gateway**; provide `gatewayUrl` unless you pass `endpoints` or `mistUrl`.

### Direct MistServer Node (mistUrl)

```svelte
<Player
  contentType="live"
  contentId="pk_..."
  options={{ mistUrl: "https://edge-egress.example.com" }}
/>
```

### Styles

```ts
import "@livepeer-frameworks/player-svelte/player.css";
```

## Controls & Shortcuts

The player ships with keyboard/mouse shortcuts when the player is focused (click/tap once).

**Keyboard**
| Shortcut | Action | Notes |
|---|---|---|
| Space | Play/Pause | Hold = 2x speed (when seekable) |
| K | Play/Pause | YouTube-style |
| J / Left | Skip back 10s | Disabled on live-only |
| L / Right | Skip forward 10s | Disabled on live-only |
| Up / Down | Volume +/-10% | - |
| M | Mute/Unmute | - |
| F | Fullscreen toggle | - |
| C | Captions toggle | - |
| 0-9 | Seek to 0-90% | Disabled on live-only |
| , / . | Prev/Next frame (paused) | WebCodecs = true step; others = buffered-only |

**Mouse / Touch**
| Gesture | Action | Notes |
|---|---|---|
| Double-click | Fullscreen toggle | Desktop |
| Double-tap (left/right) | Skip +/-10s | Touch only, disabled on live-only |
| Click/Tap and hold | 2x speed | Disabled on live-only |

**Constraints**

- Live-only streams disable seeking/skip/2x hold and frame-step.
- Live with DVR buffer enables the same shortcuts as VOD.
- Frame stepping only moves within already buffered ranges (no network seek). WebCodecs supports true frame stepping when paused.
npm package: @livepeer-frameworks/streamcrafter-core
Description: Core streaming logic for StreamCrafter - framework agnostic WebCodecs-based browser streaming
Author: Livepeer FrameWorks
Latest version: 0.3.1

# @livepeer-frameworks/streamcrafter-core

Headless WHIP streaming engine for FrameWorks. Provides `IngestControllerV2`, `WhipClient`, WebCodecs encoder, audio mixing, compositor, and CSS.

> **Most users should install a wrapper instead of core directly:**
>
> | Package                                                                                                                | Use case                                                      |
> | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
> | [`@livepeer-frameworks/streamcrafter-react`](https://www.npmjs.com/package/@livepeer-frameworks/streamcrafter-react)   | React apps                                                    |
> | [`@livepeer-frameworks/streamcrafter-svelte`](https://www.npmjs.com/package/@livepeer-frameworks/streamcrafter-svelte) | Svelte 5 apps                                                 |
> | [`@livepeer-frameworks/streamcrafter-wc`](https://www.npmjs.com/package/@livepeer-frameworks/streamcrafter-wc)         | Web Components — Vue, Angular, CDN `<script>` tag, plain HTML |
>
> The wrappers include core as a dependency and provide a full UI (preview, camera/screen controls, quality selector, connection status, etc.). Install core directly only if you need **headless programmatic control** with a completely custom UI.

**Docs:** https://logbook.frameworks.network

## Install

```bash
npm install @livepeer-frameworks/streamcrafter-core
```

## Headless Usage

```ts
import { StreamCrafterV2 } from "@livepeer-frameworks/streamcrafter-core";
import "@livepeer-frameworks/streamcrafter-core/streamcrafter.css";

const crafter = new StreamCrafterV2({
  whipUrl: "https://edge-ingest.example.com/webrtc/your-stream-key",
  profile: "broadcast",
});

await crafter.startCamera();
await crafter.startStreaming();

// Later
await crafter.stopStreaming();
crafter.destroy();
```

### Gateway Resolution (Advanced)

The vanilla `StreamCrafterV2` constructor requires a **direct WHIP URL**. If you want gateway resolution, use the `IngestClient` (or the React/Svelte wrappers).

```ts
import { IngestClient, StreamCrafterV2 } from "@livepeer-frameworks/streamcrafter-core";

const ingest = new IngestClient({
  gatewayUrl: "https://bridge.example.com/graphql",
  streamKey: "sk_live_...",
});

const endpoints = await ingest.resolve();
const whipUrl = endpoints?.primary?.whipUrl;

if (!whipUrl) throw new Error("No WHIP URL resolved");

const crafter = new StreamCrafterV2({ whipUrl, profile: "broadcast" });
```

Notes:

- There is **no default gateway**; you must supply `whipUrl` or resolve it yourself.

## Notes

- WebCodecs + Web Workers are used when available for background-safe encoding.
- For custom UIs, build on the core APIs or use the React/Svelte/Web Component wrappers.
- CSS export: `@livepeer-frameworks/streamcrafter-core/streamcrafter.css`
npm package: @livepeer-frameworks/streamcrafter-react
Description: React hooks for StreamCrafter browser streaming
Author: Livepeer FrameWorks
Latest version: 0.3.1

# @livepeer-frameworks/streamcrafter-react

React wrapper for StreamCrafter: drop-in UI component plus hooks for custom layouts.

## Documentation

Docs: https://logbook.frameworks.network

## Install

```bash
npm install @livepeer-frameworks/streamcrafter-react
```

## Usage (Component)

```tsx
import { StreamCrafter } from "@livepeer-frameworks/streamcrafter-react";
import "@livepeer-frameworks/streamcrafter-react/streamcrafter.css";

export function BroadcastPage() {
  return (
    <StreamCrafter
      whipUrl="https://edge-ingest.example.com/webrtc/your-stream-key"
      initialProfile="broadcast"
    />
  );
}
```

### Gateway Mode (Stream Key + Gateway URL)

```tsx
<StreamCrafter
  gatewayUrl="https://bridge.example.com/graphql"
  streamKey="sk_live_..."
  initialProfile="broadcast"
/>
```

Notes:

- There is **no default gateway**; pass either `whipUrl` or (`gatewayUrl` + `streamKey`).
- If both are provided, `whipUrl` takes priority.

## Usage (Hook)

```tsx
import { useStreamCrafterV2 } from "@livepeer-frameworks/streamcrafter-react";

export function CustomBroadcaster() {
  const { mediaStream, startCamera, startStreaming, stopStreaming } = useStreamCrafterV2({
    whipUrl: "https://edge-ingest.example.com/webrtc/your-stream-key",
    profile: "broadcast",
  });

  return (
    <div>
      <video ref={(el) => el && (el.srcObject = mediaStream)} autoPlay muted />
      <button onClick={() => startCamera()}>Camera</button>
      <button onClick={() => startStreaming()}>Go Live</button>
      <button onClick={() => stopStreaming()}>Stop</button>
    </div>
  );
}
```

## Notes

- CSS export: `@livepeer-frameworks/streamcrafter-react/streamcrafter.css`
- Peer deps: `react`, `react-dom`
npm package: @livepeer-frameworks/streamcrafter-svelte
Description: Svelte 5 stores for StreamCrafter browser streaming
Author: Livepeer FrameWorks
Latest version: 0.3.1

# @livepeer-frameworks/streamcrafter-svelte

Svelte 5 wrapper for StreamCrafter with a ready-to-use component and stores for custom UIs.

## Documentation

Docs: https://logbook.frameworks.network

## Install

```bash
npm install @livepeer-frameworks/streamcrafter-svelte
```

## Usage (Component)

```svelte
<script lang="ts">
  import { StreamCrafter } from "@livepeer-frameworks/streamcrafter-svelte";
  import "@livepeer-frameworks/streamcrafter-svelte/streamcrafter.css";
</script>

<StreamCrafter
  whipUrl="https://edge-ingest.example.com/webrtc/your-stream-key"
  initialProfile="broadcast"
/>
```

### Gateway Mode (Stream Key + Gateway URL)

```svelte
<StreamCrafter
  gatewayUrl="https://bridge.example.com/graphql"
  streamKey="sk_live_..."
  initialProfile="broadcast"
/>
```

Notes:

- There is **no default gateway**; pass either `whipUrl` or (`gatewayUrl` + `streamKey`).
- If both are provided, `whipUrl` takes priority.

## Usage (Stores)

```svelte
<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import { createStreamCrafterContextV2 } from "@livepeer-frameworks/streamcrafter-svelte";

  const crafter = createStreamCrafterContextV2();

  onMount(() => {
    crafter.initialize({
      whipUrl: "https://edge-ingest.example.com/webrtc/your-stream-key",
      profile: "broadcast",
    });
  });

  onDestroy(() => crafter.destroy());
</script>

<video srcObject={$crafter.mediaStream} autoplay muted />
<button on:click={() => crafter.startCamera()}>Camera</button>
<button on:click={() => crafter.startStreaming()}>Go Live</button>
```

## Notes

- CSS export: `@livepeer-frameworks/streamcrafter-svelte/streamcrafter.css`
- Peer dep: `svelte` (v5)