OS X Screencast to Animated GIF

GIF-Screencast-OSX.md

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime and ffmpeg.

Forked from https://gist.github.com/dergachev/4627207. Updated to use a palette to improve quality and skip gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

• Open "Quicktime Player",
• Go to File -> New Screen Recording
• Selected screen portion by dragging a rectangle, recorded 13 second video.
• Go to File -> Export -> As Movie
  • Saved the video in full quality with the filename in.mov

Create a palette image from the video:

ffmpeg -y -i in.mov -vf fps=10,palettegen palette.png

Convert into a GIF using the palette

ffmpeg -i in.mov -i palette.png -filter_complex "fps=10,paletteuse" out.gif

Combined together into a bash function which also resizes to 640x? (thanks to @robertoentringer and @nick):

function movtogif () {
  tempfile=.mov-to-gif-$(date +"%s").png
  ffmpeg -i $1 -vf "scale=640:-2" "${1%.mov}-resized.mov"
  ffmpeg -stats -y -i "${1%.mov}-resized.mov" -vf fps=10,palettegen $tempfile
  ffmpeg -stats -i "${1%.mov}-resized.mov" -i $tempfile -filter_complex "fps=10,paletteuse" "${1%.mov}.gif"
  rm $tempfile "${1%.mov}-resized.mov"
}

movtogif original.mov

Installation

The conversion process requires the following command-line tools:

• ffmpeg to process the video file

If you use homebrew and homebrew-cask software packages, just type this in:

brew install ffmpeg 

Resources

• http://superuser.com/questions/556029/how-do-i-convert-a-video-to-gif-using-ffmpeg-with-reasonable-quality/556031#556031
• http://schneems.com/post/41104255619/use-gifs-in-your-pull-request-for-good-not-evil (primary source!)
• http://www.reddit.com/r/programming/comments/16zu7d/use_gifs_in_your_pull_requests_for_good_not_evil/
• http://superuser.com/questions/436056/how-can-i-get-ffmpeg-to-convert-a-mov-to-a-gif#_=_
• http://gnuski.blogspot.ca/2012/06/creating-animate-gif-with-free-software.html

Related Ideas

• Extend https://github.com/dergachev/copy-public-url folder action for this use case
  • it would automate the conversion before copying Dropbox public URL
  • assign the folder action to ~/Dropbox/Public/Screenshots/gif
  • consider finding a way to simplify the dependency installation

@baumandm thanks for share this !

To facility the usage I created a small function in my .bash_profile :

function movtogif () {
  tempfile=.mov-to-gif-$(date +"%s").png
  ffmpeg -v quiet -stats -y -i $1 -vf fps=10,palettegen $tempfile
  ffmpeg -v quiet -stats -i $1 -i $tempfile -filter_complex "fps=10,paletteuse" "${1%.mov}.gif"
  rm $tempfile
}

Usage

$ movtogif filename.mov

P.S.: tested on macOS Mojave !

Another version that also reduces the dimensions by 50% (useful if you're recording on a retina screen):

function movtogif () {
  tempfile=.mov-to-gif-$(date +"%s").png
  ffmpeg -v quiet -i $1 -vf "scale=iw*.5:ih*.5" "${1%.mov}-resized.mov"
  ffmpeg -v quiet -stats -y -i "${1%.mov}-resized.mov" -vf fps=10,palettegen $tempfile
  ffmpeg -v quiet -stats -i "${1%.mov}-resized.mov" -i $tempfile -filter_complex "fps=10,paletteuse" "${1%.mov}.gif"
  rm $tempfile "${1%.mov}-resized.mov"
}