How I Built a Live Photo Converter That Works Entirely in Your Browser (No Upload, No App)

#ai #webdev #nextjs #tutorial

I've been building small web tools with AI coding for the past few months. Here's one that people actually use: LivePhotoKit — a free, browser-based converter for iPhone Live Photos, HEIC images, and more.

The Problem

iPhone users shoot millions of Live Photos and HEIC images every day. But when they try to:

Send a Live Photo to an Android friend → doesn't work
Upload HEIC to a web form → rejected
Convert Live Photo to GIF → need a paid app
Open HEIC on Windows → nothing happens

Existing solutions either require you to install an app, upload your private photos to someone's server, or pay a subscription.

What LivePhotoKit Does

Drop a file in. Get what you need. Done.

HEIC to JPG/PNG/WebP/PDF — instant, no upload
Live Photo to GIF — the one thing iOS can't do natively
Live Photo to MP4 video — extract the video part
Open HEIC files — view in browser, no app needed
Image compressor — shrink photos without losing quality
Batch convert — process multiple files at once

Everything runs locally in your browser. Zero server uploads. Zero sign-ups. Zero watermarks.

Tech Stack (Built Mostly by AI)

Next.js 16 (static export) — hosted on Cloudflare Pages
Canvas API — image encoding/decoding, GIF generation
gifenc — pure JS GIF encoder (no WASM, works on mobile)
jszip — unpack .livp Live Photo packages
JSZip + jsPDF — PDF generation from images

The entire conversion pipeline runs in the browser. No ffmpeg, no server-side processing. This means it works on iPhones, Androids, and any modern browser.

What I Learned

ffmpeg.wasm is too heavy for mobile — 30MB+ WASM binary crashes Safari. Switched to Canvas + pure JS encoders.
iOS file input is fragile — transparent overlays, hidden inputs, and programmatic click() all fail on Safari. The fix: a native <label htmlFor> wrapping a visible input.
Live Photo's .livp format is just a ZIP — unpack it with JSZip, grab the MOV video + HEIC still, done.
GIF encoding in pure JS works — gifenc does the job at ~3MB per animated GIF.