Last month I shipped a web app that turns Google Maps location history into an MP4 travel video — route animating on a map, distance counter, music. The constraint I set myself: the video had to be rendered entirely in the browser. Location history is about the most sensitive file a user can hand you, and I didn't want a backend touching it at all.
Here's what that pipeline looks like, and the parts that surprised me.
The pipeline
Parse Timeline.json (exported from Google Maps) into a list of timestamped points
Draw each video frame on a <canvas> — map tiles, the route polyline so far, a moving marker, counters
