Skip to content

tajo9128/screenstudio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

158 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ScreenStudio Logo

ScreenStudio

Record. Edit. Stream. Export. — All in your browser.

Free • Open Source • Docker-Ready • AI-Powered • No Install Required

MIT License Platforms Docker Ready


What is ScreenStudio?

ScreenStudio is a browser-based screen recorder, video editor, and live streamer — no downloads, no installs, no accounts required. It runs entirely in your browser, or as a Docker container on your server.

Feature Details
Record Screen + Webcam + Audio One-click capture with PiP overlay, cursor effects, annotations
Edit Multi-track timeline Split, trim, move clips. 33 filters, 13 transitions, keyframes
Stream YouTube Live / Twitch RTMP relay with FFmpeg, scene composition, real-time stats
Export YouTube upload + local download OAuth flow, AI-generated metadata, resumable upload
AI 3-tier assistant Regex commands, Ollama (local LLM), paid API fallback

Quick Start

Option 1: Docker (Recommended)

# Pull and run
docker run -p 3000:80 tajo9128/screenstudio:v1.0.0

# Open http://localhost:3000

Option 2: Docker Compose (Full Stack)

# Clone the repo
git clone https://github.com/tajo9128/screenstudio.git
cd screenstudio

# Start everything (app + RTMP relay for streaming)
docker compose -f docker-compose.full.yml up -d

# Open http://localhost:3000

Option 3: Development

git clone https://github.com/tajo9128/screenstudio.git
cd screenstudio
npm install
npm run dev

# Open http://localhost:3000

Docker Images

Image Description Tag
tajo9128/screenstudio Frontend (Nginx) v1.0.0
tajo9128/screenstudio-relay RTMP relay server v1.0.0

Docker Compose Files

File Use Case
docker-compose.yml Base app (Ollama on host machine)
docker-compose.desktop.yml Docker Desktop (Ollama on host)
docker-compose.vps.yml VPS with Ollama in container
docker-compose.full.yml Full stack: App + Ollama + RTMP Relay

6 Modes

1. Record

One-click screen recording with professional features

  • Screen / Window / Tab capture
  • Webcam overlay (circle, rounded-rect, square shapes)
  • System audio + microphone recording
  • Cursor highlight + click ripple effects
  • Real-time annotations (pen, line, rectangle, arrow, text)
  • Zoom (1x–5x) with scroll wheel + pan
  • Auto-save to selected folder
  • Quality: 720p / 1080p / 2K / Native
  • Format: WebM (VP9/VP8/H264) or MP4

2. Edit

Multi-track timeline with 33 filters and 13 transitions

Timeline:

  • Unlimited tracks with mute/lock
  • Clip split (S key), move, resize, speed (0.25x–4x)
  • Undo/redo (50-snapshot stack)
  • Keyboard: Space = play/pause, S = split, Delete = remove

33 Video Filters:

Color & Tone Effects Transform
Brightness, Contrast Blur, Sharpen Mirror, Flip
Saturation, Hue Grayscale, Sepia Rotate, Crop
Temperature, Tint Noise, Pixelate Vignette, Opacity
White Balance Posterize, Cartoon Border
Color Grade (3-way) Film Grain, Old Film Lift/Gamma/Gain
Curves (R/G/B), Levels Chroma Key (green screen) Emboss, Glow

13 Transitions: Crossfade, Fade to Black, Wipe (L/R/U/D), Slide, Zoom, Dissolve, Barn Door, Iris, Clock Wipe, Push

Keyframe Animation:

  • Per-parameter keyframes with interpolation (Linear, Ease-In/Out)
  • Visual keyframe dots on timeline clips

14 Audio Effects: Noise Gate, De-Esser, Limiter, Compressor, 3-Band EQ, High/Low-Pass, Delay/Echo, Reverb, Chorus, Stereo Widener, Fade In/Out

3. Stream

Live stream to YouTube Live or Twitch from your browser

  • RTMP relay with automatic reconnection (3 retries)
  • Platform presets: YouTube Live, Twitch, Custom RTMP
  • Configurable bitrate (2.5–12 Mbps) and resolution (720p/1080p/1440p)
  • Real-time stats: uptime, bitrate, FPS, bytes sent
  • Scene composition during stream
  • Simultaneous record + stream

4. Webinar

Present with scenes, Q&A, and audience engagement

  • 4 default scenes (Screen Only, Camera+Screen PiP, Full Camera, Side-by-Side)
  • Lower Third name/title overlay
  • Audio mixer with per-source volume
  • Replay buffer (15s/30s/60s)

5. Export

Download or upload your recording

  • Format selection: WebM, MP4, MKV
  • Quality presets: 720p / 1080p / 2K
  • Direct YouTube upload with OAuth
  • AI-generated metadata (title, description, tags)

6. Settings

Configure AI providers, recording defaults, and YouTube OAuth


AI Assistant

A floating AI assistant available in Edit and Stream modes.

Tier 1: Regex Commands  -->  Instant, no LLM needed (17 commands)
Tier 2: Ollama (Free)   -->  Local LLM on your machine
Tier 3: Paid API        -->  OpenAI / Anthropic / any OpenAI-compatible API

Supported Commands: Trim, Zoom, Title, Cursor, Annotations, Quality, Format, Filter, Text, Speed, Export, Help


Browser Support

Browser Recording Editing Streaming
Chrome 90+ Full Full Full
Edge 90+ Full Full Full
Firefox 90+ Full Full Full
Safari 17+ Partial Partial No

Screen capture requires getDisplayMedia API. Safari has limited support.


Tech Stack

  • Frontend: React 19 + React Router 7 + Vite 7
  • Recording: MediaRecorder API + Canvas API + Web Audio API
  • Editing: Canvas compositing, Web Audio offline processing
  • Streaming: WebSocket + FFmpeg (RTMP relay server)
  • AI: Ollama integration + OpenAI/Anthropic fallback
  • Deployment: Docker + Nginx + Node.js

Contributing

# Fork, clone, install
git clone https://github.com/YOUR_USERNAME/screenstudio.git
cd screenstudio
npm install

# Create feature branch
git checkout -b feature/my-feature

# Make changes, test
npm run dev
npm run build
npm run lint

# Push and open PR
git push origin feature/my-feature

License

MIT — free for personal and commercial use.


Made with ♥ for creators, educators, and streamers worldwide.

About

ScreenStudio The perfect hybrid of OBS Studio + Loom + Kdenlive — all in your browser. Free • Open Source • Docker-Ready • AI-Powered

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages