Create a GIF screencast

README.md

Convert a screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and 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

To convert in.mov into out.gif (filesize: 48KB), open Terminal to the folder with in.mov and run the following command:

ffmpeg -i in.mov -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > out.gif

Notes on the arguments:

• -r 10 tells ffmpeg to reduce the frame rate from 25 fps to 10
• -s 600x400 tells ffmpeg the max-width and max-height
• --delay=3 tells gifsicle to delay 30ms between each gif
• --optimize=3 requests that gifsicle use the slowest/most file-size optimization

To share the new GIF using Dropbox and Copy Public URL, run the following:

cp out.gif ~/Dropbox/Public/screenshots/Screencast-`date +"%Y.%m.%d-%H.%M"`.gif

Installation

The conversion process requires the following command-line tools:

• ffmpeg to process the video file
• gifsicle to create and optimize the an animated gif

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

brew install ffmpeg 
brew cask install x-quartz #dependency for gifsicle, only required for mountain-lion and above
open /usr/local/Cellar/x-quartz/2.7.4/XQuartz.pkg # runs the XQuartz installer
brew install gifsicle

Resources

• 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

performance.md

Performance Testing

Disappointed with the color and quality that ffmpeg's GIF conversion gives. Imagemagick's convert can also be used to do the conversion, though this has serious performance penalties.

The following details experiments of converting a 3.8 second movie to GIF.

FFMPEG to PNG | individually

• 42 seconds

ffmpeg -i in-trimmed.mov -r 10 -vcodec png out-static-%02d.png 
time for img in out-static*.png; do convert -verbose +dither -layers Optimize "$img" "$img.gif" ;  done

FFMPEG to PNG | bulk

• 70KB filesize; 7.2 seconds in CONVERT
• http://dl-web.dropbox.com/u/29440342/screenshots/CTHVGY-Screencast-2013.02.06-18.03.gif

ffmpeg -i in-trimmed.mov -r 10 -vcodec png out-static-%02d.png 
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png  GIF:- > out13.gif

FFMPEG to PNG | bulk | gifsicle

• 56KB size; 7.2 seconds in CONVERT
• http://dl-web.dropbox.com/u/29440342/screenshots/USNVKN-Screencast-2013.02.06-18.13.gif

ffmpeg -i in-trimmed.mov -r 10 -vcodec png out-static-%02d.png 
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png  GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > out12.gif

FFMPEG to PPM | bulk

• 6.7 seconds in CONVERT, 70KB filesize
• http://dl-web.dropbox.com/u/29440342/screenshots/ZMMDMX-Screencast-2013.02.06-17.59.gif

ffmpeg -i in-trimmed.mov -r 10 -vcodec ppm out-static-%02d.ppm
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.ppm  GIF:- > out14.gif

FFMPEG to PPM | bulk | gifsicle

• 7.2 seconds in CONVERT, 56KB filesize
• http://dl-web.dropbox.com/u/29440342/screenshots/UGTQNY-Screencast-2013.02.06-17.49.gif

time ffmpeg -i  in-trimmed.mov -r 10 -f image2pipe -vcodec ppm - |  time convert -verbose +dither -layers Optimize -resize 600x600\> - gif:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile ->  out15.gif

FFMPEG to GIF | gifsicle

• 1 second total (not using CONVERT), 22KB filesize
• http://dl-web.dropbox.com/u/29440342/screenshots/XVXWCJ-Screencast-2013.02.06-17.48.gif

ffmpeg -i in-trimmed.mov -vf "scale=min(iw\,600):-1" -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=7 --colors 128 > out16.gif

Notes

• Omitting resizing down to 600x600 before converting to GIF dramatically slows down CONVERT.
• PPM is the only image format that is compatible with FFMPEG piping directly to CONVERT
  • it has the same performance and compression characteristics as outputting to PNG
  • it avoids creating and cleaning up temporary image files
  • otherwise the temporary files would need to be sorted by numeric order before globbing

Resources

• http://www.imagemagick.org/discourse-server/viewtopic.php?f=2&t=18320#reading-multiple-images-over-standard-input
• http://superuser.com/questions/71028/batch-converting-png-to-jpg-in-linux
• http://zeekish.wordpress.com/2011/09/14/pdf-to-gif-conversion-and-optimization/
• http://stackoverflow.com/questions/3306888/ffmpeg-generate-n-evenly-spaced-png-screenshots
• http://mariovalle.name/postprocessing/ImageTools.html#gifsicle
• http://ffmpeg-users.933282.n4.nabble.com/Converting-avi-files-to-animated-gifs-td935274.html
• https://lists.libav.org/pipermail/ffmpeg-user/2010-August/026860.html
• http://stackoverflow.com/questions/8133242/ffmpeg-resize-down-larger-video-to-fit-desired-size-and-add-padding
• http://superuser.com/questions/318845/improve-quality-of-ffmpeg-created-jpgs

Thank you so much for sharing all this research! It saved me likely from hours of frustration! 🙏

So, these are notes on using the first approach with ffmpeg only (not the Imagemagick approach in second gist)...

I got:

Error: Cask 'x-quartz' is unavailable: No Cask with this name exists. Did you mean “xquartz”?

Seems like xquartz is indeed what we want:
https://formulae.brew.sh/api/cask/xquartz.json

It seems using the xquartz version of brew above installed without requiring the additional step:

open /usr/local/Cellar/x-quartz/2.7.4/XQuartz.pkg # runs the XQuartz installer

e.g.

==> Running installer for xquartz; your password may be necessary.

After also installing gifsicle, I ran basically as you've instructed:

$ ffmpeg -i ~/Desktop/in.mov -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > ~/Desktop/out.gif

This worked as advertised and I was delighted. However, my video (given I hadn't been so careful with dragging an exactly 600 x 400 rect) was of course skewed. Also, it appeared to be speed up like an old fashioned 30s movie). So, since for my purposes I didn't need much in terms of optimization (just to make the conversion from QT to an animated gif really), I did:

$ ffmpeg -i ~/Desktop/in.mov -pix_fmt rgb24 -f gif - | gifsicle --delay=3 > ~/Desktop/out.gif

which of course took a while longer, but worked for my purpose which was to leave a recording of the UX results of a pull request submission ✅ Again, thank you!

Thanks for the guide really helpful. Also @roblevintennis thanks for the comment.
I tried to follow the steps given and they worked mostly, but it seems home-brew now installs the artefact in a different location than before.

So the command should be:
open /usr/local/Caskroom/xquartz/2.7.11/XQuartz.pkg