🎥 Screezy

Browser-based Screen Recording & Video Editing powered by WebAssembly FFmpeg

Screezy is a modern web application that allows users to record their screen, trim videos, convert formats, and share recordings — all directly in the browser, without relying on server-side video processing.

The core idea behind Screezy is simple but powerful:

Move video processing from the backend to the browser using WebAssembly.

---

✨ Features

• 🎬 Screen recording with optional audio
• ✂️ Frame-accurate video trimming
• 🔄 Video format conversion (WebM → MP4)
• 🔗 Shareable public video links
• 📊 Basic video analytics (views & watch progress)
• 🔐 Privacy-first, client-side video processing

---

🧠 How Screezy Works

1️⃣ Screen Recording

Screezy uses the Browser MediaRecorder API to capture:

• Screen video
• Microphone or system audio (optional)

The recording is stored as a video blob directly in the browser.

No extensions. No native apps.

---

2️⃣ Client-Side Video Processing (Core Architecture)

Screezy uses FFmpeg compiled to WebAssembly via @ffmpeg/ffmpeg.

This enables:

• Video trimming
• Lightweight transcoding
• Format conversion

All processing happens inside the user's browser.

There is:

• ❌ No server-side FFmpeg
• ❌ No upload-before-edit workflow
• ❌ No video processing queues

---

3️⃣ Upload & Sharing

After editing:

• The processed video is uploaded
• A unique token is generated
• A public watch page is created

Users can instantly share the recording via link.

---

4️⃣ Analytics

Screezy tracks:

• Video views
• Watch progress

Analytics are stored using a lightweight SQLite database and logged via API routes.

---

⚙️ Tech Stack

Frontend

• Next.js 15 (App Router)
• React
• TypeScript
• Tailwind CSS
• Framer Motion

Video & Media

• MediaRecorder API
• WebAssembly FFmpeg (@ffmpeg/ffmpeg)

Backend (Minimal)

• Next.js API Routes
• SQLite (analytics)
• Local/static storage (demo setup)

---

🚀 Why WebAssembly FFmpeg?

Traditional Architecture