# Clip Studio — nearline media batch

## What this example does

Records a short screen or camera clip in the browser (`getDisplayMedia` / `getUserMedia` + `MediaRecorder`), then sends it to the host **media** pack for batch `transcode` and `extractFrame`. This is **nearline**, not a live encode pipeline.

For continuous host VP9/WebM encode, use [Live Encode](../live-encode/). For browser WebRTC A/V, use [Screenshare](../screenshare/).

## Prerequisites

Install the [BridgeSwarm extension and native host](../../README.md#easy-install-recommended). On macOS after a host update, run `npm run repair:macos` and fully quit the browser.

## How to run

**Recommended:** Extension Settings → enable **Examples server**.

```bash
npm run examples
```

Open **http://127.0.0.1:4173/clip-studio/**. Do not use `file://`.

## Usage

1. Share screen or camera.
2. Record a short clip (max seconds is on the page).
3. Run transcode / extract-frame on the captured blob via `BridgeSwarm.media.*`.

## Files in this directory

- **index.html** — Capture stage, record controls, output.
- **style.css** — Stage layout.
- **app.js** — Capture, MediaRecorder, media pack calls.

## APIs and concepts

- `BridgeSwarm.capabilities.has('media')`
- `BridgeSwarm.media.transcode` / `extractFrame` / `info`

See [Capabilities](../../docs/CAPABILITIES.md).