Way back in Dec 2015, @maxogden wrote a nice guide on stabilizing your own video with ffmpeg. I return to it on occasion and have updated my gist comment to offer some updated commands. Since enough has changed regarding installation and use, I figure a new, spiffy, and working guide deserves a non-gist home.

Presenting the 2021-era guide to pretty easy DIY video stabilization!

On Mac OS, install ffmpeg and vidstab from homebrew:

1
2

brew install ffmpeg
brew install libvidstab

On linux, you can sudo make install.

Run stabilization in two passes

There are plenty of options for libvidstab, like shakiness, accuracy, smoothing. The defaults are good, but you may want to experiment. There’s even a visual diagnostic mode.

Assuming the source video is named clip.mkv…

1
2
3
4
5
6

# The first pass ('detect') generates stabilization data and saves to `transforms.trf`
# The `-f null -` tells ffmpeg there's no output video file
ffmpeg -i clip.mkv -vf vidstabdetect -f null -

# The second pass ('transform') uses the .trf and creates the new stabilized video.
ffmpeg -i clip.mkv -vf vidstabtransform clip-stabilized.mkv

You now have a clip-stabilized.mkv!

Bonus: create a comparison video

Use the vstack or hstack filter, depending on if you want them stacked vertically or side-by-side:

1
2
3
4
5

# vertically stacked
ffmpeg -i clip.mkv -i clip-stabilized.mkv  -filter_complex vstack clips-stacked.mkv

# side-by-side
ffmpeg -i clip.mkv -i clip-stabilized.mkv  -filter_complex hstack clips-sxs.mkv

Double bonus: A two-liner that does everything (because repeating these filenames gets annoying)

1
2

export vid="sourcevid.mkv"
ffmpeg -i "$vid" -vf vidstabdetect -f null -; ffmpeg -i "$vid" -vf vidstabtransform "$vid.stab.mkv"; ffmpeg -i "$vid" -i "$vid.stab.mkv"  -filter_complex vstack "$vid.stacked.mkv"

I’ve published a few articles on Medium that may interest the reader here:

requestAnimationFrame Scheduling For Nerds

Understand how rAF callbacks are scheduled and why its very reasonable to have multiple callbacks execute within the same frame.

Debugging Node.js with Chrome DevTools

The canonical guide to using the Chrome DevTools UI for debugging Node.js. It definitely beats console.log. ;)

Aside from that, I’ve been busy working on Lighthouse, performance metrics, tooling, and DevTools.

Recently, I’ve spent some time recently profiling real-world mobile websites. Using the 1000/100/6 performance model¹, and spelunking deep into each app, the findings have been fascinating.

I’ve written up case study documents for each, incorporating all the findings:

1. Illustrated diagnoses for the poor performance
2. What actions the developer should take
3. How Chrome’s tooling should improve
4. Questions and insights for the rendering engine (Blink)

➜ Perf Audits: CNet, Time, Google Play

In this doc, we look at the scrolling of CNET, input latency on CNET, some very interesting challenges on the responsive Time.com, and infinite scroll on Google Play’s desktop site.

The intended audience is browser engineers and performance-minded frontend developers. It’s fairly advanced, but I’m spelunking deep to identify how the sites butt heads with the browser APIs and architecture.

Lastly, we’re using this research to improve Chrome DevTools and what you hear from Chrome.

Wikipedia eng team scrutinizing their performance millisecond by millisecond. (Yes, it’s a long paper printout of the Chrome DevTools timeline flamechart :) Photo by Ori Livneh, CC BY 4.0

(BTW, use this link to view the same doc but with comments enabled)

1 - More on this performance model later. Stay tuned.