Webm to Gif ChromeOS

ChromeOS Screenshot

ChromeOS added a cool feature to allow videos as well as images to be taken from the desktop.

The cool part of this feature is you can choose which part of the screen to snapshot. If you are a blogger, this makes you life much simpler and is a welcome addition. The output by default is Webm, however in this blog post I demonstrate how to convert to gif.

Screenshot Keyboard Shortcut

• If you want to take a full screenshot, use CTRL + F5 (i.e. Show windows)
• To take a partial screenshot use CTRL + SHIFT + F5

The additional goodness, is you can switch between both image and video by clicking the toggle

NOTE:

• For more information on Chromebook keyboard shortcuts

Taking the video

When taking the video - you may need a couple of takes to get the perfect shot. Alternatively you can edit the video post production (my personal preference). Try and keep the video as short as possible so the output size is relatively small.

The resultant file from this process will be in Webm format.

Trimming the Webm

I use ffmpeg to edit my video files, but a lot of online solutions exist.

1. Watch the video to get an idea at what timestamp (i.e. start/end) the video needs to be trimmed
2. Trim the video based on requirements e.g.

• Start Video: 5 secs in
• End Video: 10 secs in
• Input file: input.webm
• Ouput file: trimmed.webm

3. Translates to the following ffmpeg command:

1ffmpeg -s 00:00:05 -t 00:00:10 -i input.webm trimmed.webm

Webm to Gif

Performing the default conversion will generate a low res version of your input file. To generate a better output file, ask ffmpeg to generate a color palette.

Generating a color palette:

1. Let ffmpeg know the color range to use by sampling the video content

1ffmpeg -y -i trimmed.webm -vf palettegen custom-palette.png

To translate the webm to a gif enter the following command:

2. Use the generated color pallete to produce the gif video

1ffmpeg -y -i trimmed.webm -i custom-palette.png -filter_complex paletteuse -r 4 output.gif