ScreenVerse 🎬

A modern screen recording and video editing tool built with web technologies

ScreenVerse is a powerful web application designed for content creators, educators, and developers. It combines advanced web technologies to deliver a seamless screen recording experience and intuitive video editing capabilities—specializing in creating tutorials and demo videos with smooth zoom effects.

✨ Key Features

🎥 Screen Recording

• High-Quality Capture: Screen recording powered by WebRTC technology
• Multiple Recording Options: Support for full-screen, specific window, or browser tab capture
• Real-Time Preview: Live visual feedback during recording
• Local Storage: Recorded videos securely stored in the browser’s local database

✂️ Video Editing

• Timeline Editor: Intuitive drag-and-drop timeline interface
• Smart Zoom: Manually add zoom points for smooth screen magnification effects
• Video Trimming: Precise trim functionality to remove unwanted segments
• Multiple Aspect Ratios: Support for 16:9, 4:3, 1:1, 9:16, and other output formats

🎨 Export Options

• Custom Backgrounds: Choose solid colors, preset backgrounds, or custom background images
• High-Quality Output: Up to 1080p resolution support for exports
• Multi-Format Support: Export to popular video formats like WebM and MP4
• Real-Time Progress: Detailed progress indicators during export

🌍 Multi-Language Support

• Internationalization: Built-in English and Chinese interface switching
• Localized UI: Fully localized user interface and prompt messages

🛠️ Tech Stack

Frontend Framework

• Next.js 14: Full-stack React framework
• TypeScript: Type-safe JavaScript
• Tailwind CSS: Utility-first CSS framework

UI Components

• Radix UI: Accessible low-level UI components
• Lucide React: Modern icon library
• shadcn/ui: Polished UI component collection

Media Processing

• WebRTC API: Browser-native screen capture
• FFmpeg WASM: Client-side video processing and transcoding
• Canvas API: Video frame rendering and effect handling
• MediaRecorder API: Video recording and export

Data Storage

• IndexedDB: Browser-local video storage
• localStorage: User settings and temporary data

Development Tools

• ESLint: Code quality checking
• React Hooks: State management and side-effect handling

🚀 Getting Started

Prerequisites

• Node.js 18.0 or higher
• Modern browser (supports WebRTC and WASM)

Installation

# Clone the repository
git clone https://github.com/Arterning/ScreenVerse.git
cd ScreenVerse

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

Development

# Start the development server
npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 to view the application.

Build

# Build for production
npm run build
npm start

📖 Usage Guide

Recording a Video

1. Start Recording: Click the record button and select the screen content to capture
2. Recording Controls: Use the pause/resume buttons to manage the recording process
3. Stop Recording: After finishing, the video will be automatically saved locally

Editing a Video

1. Open the Editor: Select a video from the recording list to enter edit mode
2. Add Zoom Points:
   • Navigate to the target time on the timeline
   • Click the "Add Zoom" button
   • Click on the video to set the zoom center point
   • Adjust the zoom level and duration
3. Trim the Video: Use the trim tool to remove unwanted segments
4. Configure Export Options: Select aspect ratio, background, and other parameters

Exporting a Video

1. Configure Export Settings: Choose resolution, background, and format
2. Start Export: Click the export button and wait for processing to complete
3. Download the Video: The final video will automatically download once processing finishes

🎯 Core Advantages

🌟 Smooth Zoom Effects

ScreenVerse’s standout feature is its intelligent zoom system. Due to browser security restrictions, automatic mouse click tracking is not possible—but we provide an intuitive manual marking method:

• Precise Timing: Pinpoint zoom moments on the video timeline
• Custom Center Points: Click the video frame to set zoom centers
• Smooth Transitions: Fluid zoom animations powered by easing functions
• Adjustable Levels: Zoom range support from 1.0x to 3.0x

💻 Client-Side Only Processing

• Privacy & Security: All video processing happens locally in the browser
• No Uploads Required: Sensitive content never needs to be uploaded to servers
• High Performance: Near-native processing speeds using WebAssembly

🎨 Professional-Grade Editing

• Visual Timeline: Clear timeline display of all editing actions
• Real-Time Preview: Instant effect previews during editing
• Undo/Redo: Complete edit history management

🤝 Contribution Guidelines

We welcome contributions of all kinds!

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Standards

• Use TypeScript for type safety
• Follow ESLint code style guidelines
• Write clear commit messages
• Add appropriate tests for new features

📝 Changelog

v1.0.0 (2025-01-01)

• 🎉 Initial release
• ✨ Screen recording and basic editing support
• 🔥 Smooth zoom effect implementation
• 🌍 Multi-language interface support

📄 License

This project is licensed under the MIT License.

🙋‍♂️ Support

If you find this project useful, please give us a ⭐️!

Made with ❤️ and ☕

© 2025 ScreenVerse. All rights reserved.