The latest articles on Forem by gvmaplicaciones (@gvmaplicaciones). https://forem.com/gvmaplicaciones https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3855942%2Fa72fb0e3-1796-4587-8f3a-9ed98f13e6d8.png https://forem.com/gvmaplicaciones en gvmaplicaciones Wed, 01 Apr 2026 15:38:17 +0000 https://forem.com/gvmaplicaciones/how-i-built-a-browser-based-video-editor-with-ffmpegwasm-no-backend-no-server-costs-57d https://forem.com/gvmaplicaciones/how-i-built-a-browser-based-video-editor-with-ffmpegwasm-no-backend-no-server-costs-57d <p>I got tired of opening CapCut every time I needed to quickly join 2-3 clips. Too many menus, too many features I'll never use. So I built my own.<br> <strong><a href="https://www.2minclip.com" rel="noopener noreferrer">2minclip.com</a></strong> — a free online video editor that runs entirely in the browser. No install, no signup, no watermark.<br> Here's how I built it and what I learned.</p> <h2> The core idea </h2> <p>The concept is simple: ilovepdf but for video. You open the browser, upload your clips, edit, export. That's it. No account, no server processing, no storage costs.<br> The key technical decision was using <strong>FFmpeg.wasm</strong> — a WebAssembly port of FFmpeg that runs entirely in the browser. This means:</p> <ul> <li>Zero server costs (users process video on their own device)</li> <li>Complete privacy (videos never leave the user's device)</li> <li>No backend to maintain ## Tech stack</li> <li> <strong>React + Vite</strong> — fast dev experience, easy deployment</li> <li> <strong>FFmpeg.wasm</strong> — video processing in the browser</li> <li> <strong>Tailwind CSS</strong> — styling</li> <li> <strong>dnd-kit</strong> — drag and drop for the timeline</li> <li> <strong>i18next</strong> — ES/EN internationalization</li> <li> <strong>Vercel</strong> — deployment (free tier covers everything) Total infrastructure cost: ~12€/year for the domain. That's it. ## The biggest challenge: audio streams The hardest bug I ran into was this FFmpeg error: Stream specifier ':a' matches no streams It happened when a clip had no audio track. FFmpeg was trying to extract [0:a] from a silent video and failing. The fix was to detect whether each clip has audio before building the filtergraph, and generate silence (aevalsrc=0) for clips without audio.</li> </ul> <h2> What it does </h2> <ul> <li>Upload multiple clips at once (MP4, MOV, WebM)</li> <li>Choose canvas: 9:16 / 16:9 / 1:1</li> <li>Trim with playhead + split button</li> <li>Reorder by dragging</li> <li>Adjust speed (0.5x, 1x, 2x)</li> <li>Flip and rotate clips</li> <li>Add audio tracks with volume control and fade out</li> <li>Add text with fonts and colors</li> <li>Overlay images and videos</li> <li>Export to MP4 H.264 — no watermark, no limits</li> </ul> <h2> Lessons learned </h2> <p><strong>FFmpeg.wasm is powerful but slow on mobile.</strong> For clips under 60 seconds it works fine. For longer videos on low-end devices it can struggle.<br> <strong>The canvas-first approach is better UX.</strong> Choosing the output format before editing eliminates confusion and produces predictable results.<br> <strong>SEO matters from day one.</strong> Since this is a tool people search for when they need it, organic search is the main acquisition channel.</p> <h2> Try it </h2> <p><strong><a href="https://2minclip.com" rel="noopener noreferrer">2minclip.com</a></strong> — free, no account, works on mobile and desktop.<br> Would love feedback — especially if you've worked with FFmpeg.wasm and have tips on improving export performance on mobile.</p> javascript showdev sideprojects webdev