How I Built a Client-Side Video to GIF Converter with Zero Dependencies

I spent a weekend building a video-to-GIF converter that runs entirely in the browser. No server, no uploads, no ffmpeg binary — just raw JavaScript turning video frames into an animated GIF. Here's how it actually works under the hood. Why Bother? Most online GIF makers upload your video to some server, process it, and send back the result. That's fine until you realize: Your video sits on someone else's machine It's slow because you're waiting on network round-trips File size limits are usually tiny It breaks when the service goes down I wanted something that processes everything locally. The video never leaves your browser tab. Extracting Frames from Video The first step is pulling individual frames out of a video file. The <video> element + <canvas> combo makes this surprisingly doable: async function extractFrames(videoFile, fps = 10) { const video = document.createElement('video'); video.muted = true; video.src = URL.createObjectURL(videoFile); await new Promise(resol