"I love Paul Irish"

2022-05-03 16:16:16

Paul IrishMaking the www greatRSSBlogArchivesAboutContactVideo Stabilization With `ffmpeg` and `VidStab`Apr 30th, 2021Way 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:12brew install ffmpegbrew install libvidstabOn linux, you can sudo make install.Run stabilization in two passesThere 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…123456# The first pass ('detect') generates stabilization data and saves to `transforms.trf`# The `-f null -` tells ffmpeg there's no output video fileffmpeg -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.mkvYou now have a clip-stabilized.mkv!Bonus: create a comparison videoUse the vstack or hstack filter, depending on if you want them stacked vertically or side-by-side:12345# vertically stackedffmpeg -i clip.mkv -i clip-stabilized.mkv -filter_complex vstack clips-stacked.mkv# side-by-sideffmpeg -i clip.mkv -i clip-stabilized.mkv -filter_complex hstack clips-sxs.mkvDouble bonus: A two-liner that does everything (because repeating these filenames gets annoying)12export 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"rAF Internals & Node Debugging GuideFeb 28th, 2018I’ve published a few articles on Medium that may interest the reader here:requestAnimationFrame Scheduling For NerdsUnderstand how rAF callbacks are scheduled and why its very reasonable to have multiple callbacks execute within the same frame.Debugging Node.js with Chrome DevToolsThe 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.Advanced Performance Audits With DevToolsMar 27th, 2015Recently, I’ve spent some time recently profiling real-world mobile websites. Using the 1000/100/6 performance model1, and spelunking deep into each app, the findings have been fascinating.I’ve written up case study documents for each, incorporating all the findings:Illustrated diagnoses for the poor performanceWhat actions the developer should takeHow Chrome’s tooling should improveQuestions and insights for the rendering engine (Blink)➜ Perf Audits: CNet, Time, Google PlayIn 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 :)(BTW, use this link to view the same doc but with comments enabled)1 - More on this performance model later. Stay tuned.← OlderBlog ArchivesHeyo, I’ma front-end developer,and work on the Google Chrome team focused on Developer Tooling.I live in sunny Palo Alto.Contact me or read more about meFollow @paul_irishPopular PostsWhy moving elements with translate() is better than pos:abs top/leftConditional stylesheets vs CSS hacks? Answer: Neither!Semantics in practice and mapping semantic value to its consumersThe protocol-relative URLChrome Canary for DevelopersPaul Irish doesn't care about attribution, b. — It's all yours under Creative Commons CC0. Unrelatedly, I made a dope webapp for the Caltrain Schedule. Check it.