Sometimes you need to show someone something on a phone, words are just not good enough. With testing moving more to mobile, having the ability to show a colleague the issue has become a little harder. Google introduced screencasting in Android 4.4, a way to record everything you do on screen. Great, but that makes a big video that is difficult to look at on Github, so lets convert that video into a GIF.
For this you will need the Android SDK, FFMPEG and ImageMagick. Install on Mac by using Homebrew. You will need and Android 4.4 phone to make this work, these instructions are also tailored for OSX system.
brew install android-sdk imagemagick ffmpeg --devel
With terminal open and your android 4.4 phone plugged in, use the following commands, swapping out the file name as you see fit.
To start the recording, use the adb shell screenrecord command </pre>
adb shell screenrecord /sdcard/pull_request.mp4
You can also change the bit rate from 4mbps up to 8mbps by using
adb shell screenrecord --bit-rate 8000000 /sdcard/pull_request.mp4
Hit control + c to stop recording.
When you are done, pull the video off by using
adb pull /sdcard/pull_request.mp4
This is now the video file we will work with. If you want to delete lots of files you didn’t use, you can
adb shell in terminal to access the phones storage.
Converting the video to GIF
ffmpeg -i pull_request.mp4 -vf scale=360:-1 -r 5 output.gif
Lets break it down,
ffmpeg is the application we are using
pull_request.mp4 is the file name of the video
-vf is the video filter graph for setting FPS and scale
scale=360:-1 is the WxH, so 360 as that is 1/4 the width of the Nexus 5, this is to reduce file size. Using -1 sets the aspect ratio automatically for us based on the input video size, 16:9 in our case, meaning less guess work.
-r is the frame rate of the GIF, I have used 5, but you could go to 6 or 7.
output.gif is our finished file name.
Compressing the GIF
This is the hard part, finding a balance for the quality Vs file size. We ended up with a 3.5MB GIF from a 20 second video clip, using Imagemagick, we got that down to 1.3MB, but the results were not that useful. Instead, I have decided on a 10% fuzz to give a nice result, but still reducing file size to 2.1MB, meaning it is roughly 100k per second.
convert output.gif -fuzz 10% -layers Optimize final.gif
I decided not to embed the GIF, save you the download, if you want to see it, click the link