StreamClipper is a modern web-based tool built with Next.js that allows you to easily download and edit Twitch clips directly within your browser. By leveraging ffmpeg.wasm, all video processing is done client-side, ensuring privacy, speed, and no dependency on heavy backend rendering servers.
- Direct Twitch Clip Downloading: Integrates seamlessly with Twitch to fetch high-quality clip source files.
- In-Browser Video Editing: Powered by
@ffmpeg/ffmpegfor fast, local processing entirely in the browser. - Precise Video Trimming: Set precise start and end times to perfectly cut your clips with a synchronized looping preview.
- Audio Controls: Adjust audio volume, mute, or tweak audio playback directly in the editor.
- Privacy First: The heavy lifting happens locally in your browser. No video content is uploaded to any external server to be processed.
- Modern UI: Clean and intuitive interface optimized for ease of use.
- Framework: Next.js (React 19)
- Video Processing: FFmpeg.wasm (
@ffmpeg/ffmpeg,@ffmpeg/core) - Icons: Lucide React
Ensure you have Node.js installed on your machine.
-
Clone the repository:
git clone https://github.com/yourusername/streamclipper.git cd streamclipper -
Install the dependencies:
npm install # or yarn install / pnpm install -
Run the development server:
npm run dev
-
Open http://localhost:3000 with your browser to access the streamclipper editor.
- Proxy Route (
/api/proxy): The application uses a Next.js serverless function to securely query the Twitch GQL API, bypassing CORS and fetching the direct.mp4video URLs of Twitch clips. - VideoEditor Component: The fetched video is loaded into an interactive user interface where users can define clip regions, tweak volume, and preview their edits.
- FFmpeg Compilation: The application constructs precise arguments based on your edits and feeds them into the
ffmpeg.wasmmodule, outputting a finished, trimmed video ready for immediate download.
This project is open-source and available under the MIT License.