Skip to content

README.md

Latest commit

 

History

History
102 lines (75 loc) · 4.51 KB

README.md

File metadata and controls

102 lines (75 loc) · 4.51 KB
Raw

M4S Merger Tool (Web) | 中文

License React Tailwind FFmpeg Vercel Deploy

✅ No Installation (Click-to-use) | No Data Upload | Bilingual (CN/EN) | Fast & Free
✅ Video Merging | Audio Merging | Audio & Video Muxing
✅ .M4S | .MP4 | .MP3

🚀 Web : https://m4s-merger-tools-web.vercel.app/

Feature Description
Zero Installation Runs entirely in the browser. No need to download Python, FFmpeg, or executable files.
Privacy First Files are processed locally using WebAssembly. Your media never leaves your device.
Modern UI/UX Features an elegant "Dark SaaS" style with a frosted glass aesthetic. Supports Light, Dark, and System Default themes.
Flexible Merging Supports merging video fragments, audio fragments separately, or muxing them into the final MP4.
Bilingual Support Full support for Simplified Chinese and English (UI and logs).
Blazing Fast Processing v2.0.0 Upgrade: Intelligent Stream Copy technology, boosting speed by 10x+. Defaults to Copy mode with automatic fallback for compatibility.

Other Information

1. Requirements & Limitations
  • Browser: Requires a modern browser (Chrome, Edge, Firefox).
  • SharedArrayBuffer: The server hosting this application must send the Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp response headers for FFmpeg WASM to function correctly.
  • Memory: Merging very large files may consume significant RAM, as the files need to be loaded into browser memory.
2. Development Stack

Packages & Frameworks:

  • Core Framework: React 19 (react, react-dom)
  • Build Tool: Vite (vite)
  • Styling: Tailwind CSS v3 (tailwindcss), PostCSS (postcss), Autoprefixer (autoprefixer)
  • Language: TypeScript (typescript)
  • Icons: Lucide React (lucide-react)

Interfaces & Services:

  • FFmpeg WASM: The project uses the WebAssembly version of FFmpeg for in-browser video/audio processing.
    • Core files are located in public/scripts/ffmpeg/ (ffmpeg.min.js, ffmpeg-core.js, etc.).
    • The service is encapsulated in services/ffmpegService.ts, providing methods like load() (load FFmpeg) and mergeFiles() (merge video/audio).
    • It interacts via the global window.FFmpeg object (typical usage for FFmpeg WASM v0.11.x or similar versions).

Languages:

  • TypeScript: (.ts, .tsx) Primary development language.
  • HTML/CSS: (.html, .css) Basic structure and styling.
3. Developer Guide

  1. Clone the Repository

       git clone https://github.com/MaxMiksa/M4S-Merger-Tools-Web.git
   cd M4S-Merger-Tool

  2. Install Dependencies

    npm install

  3. Start the Development Server

    npm run dev

  4. Open in Browser Visit http://localhost:5173 (or the port displayed in the terminal).

4. License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contribution & Contact

Issues and Pull Requests are welcome!
For any questions or suggestions, please contact Zheyuan (Max) Kong (Carnegie Mellon University, Pittsburgh, PA).

Welcome to submit Issues and Pull Requests!
Any questions or suggestions? Please contact Max Kong (Carnegie Mellon University, Pittsburgh, PA).

Zheyuan (Max) Kong: kongzheyuan@outlook.com | zheyuank@tepper.cmu.edu GitHub: https://github.com/MaxMiksa/M4S-Merger-Tools-Web