
Mkcast – GIF terminal screencasts with key presses overlaid - gnocchi
https://github.com/KeyboardFire/mkcast
======
danso
This is great...now I'll have to find a spare laptop to load Ubuntu on. I'm on
OS X and have been attempting to write Unix tutorials...I don't like doing
videos, so I use Quicktime to do a window recording, save it, and then send
the file to the "gifify" utility
([https://github.com/vvo/gifify](https://github.com/vvo/gifify)), which
besides wrapping around ffmpeg to do the conversion, uses the giflossy fork of
gifsicle to optimize the image:

    
    
           gifify screen.mov -o screen.gif --resize 800:-1
    
    

example GIF:

[http://www.compciv.org/files/images/cli/echo-
redirect.gif](http://www.compciv.org/files/images/cli/echo-redirect.gif)

It's better than embedding video clips for such short snippets, but being able
to show keystrokes would be even better (Quicktime does record mouse button
presses)

~~~
glitch
Eh... Admittedly, this is one scenario where GIFs might be acceptable if kept
to small little (not long) screencasts for the terminal (simple, solid
colors).

Still, movies win out in (1) _smaller file size_ and (2) _control for easy
pausing, reversing, and skipping forward_.

I hate it when I can't pause, go back, or go forward on instructional
examples. Often I want to skip ahead to the relevant part, or pause so I can
examine and play around more.

I want to be able to pause it easily so I can type on the computer keyboard
I'm working on. I want to be able to scrub the timeline back and forth to
easily replay something I might have missed instead of having to watch the
whole thing over again. All too often a part might go by too fast, and with
the GIF you need to wait for the whole thing to cycle again in order to catch
that spot in the instruction that went too quickly. And then that spot goes by
too quickly again, and you just want to pause the bloody thing, but you can't
because it's a GIF. And so someone tacks on a bunch of extra JavaScript to
create a player for the GIF in order to add that control. At this point in the
story, file size and simplicity have both been thrown out the window. But, I
digress...

The GIFs only serve a very limited purpose for VERY short screencasts so that
it isn't an annoyance replay the whole thing again and again to catch
something that was missed, etc.

Even with that example as small as it is,
[https://gfycat.com/AcidicTangibleChupacabra](https://gfycat.com/AcidicTangibleChupacabra)
reduced it:

    
    
      GIF:  408,744 bytes.
      WebM: 344,978 bytes.
      MP4:  151,047 bytes.
    

That's a 2.7 to 1 compression ratio from the GIF to the MP4. And if you were
specifically targeting "terminal recording" as a targeted scenario, you might
be able to tailor the video compression settings for better quality and frame
usage than GyfCat does.

I'd rather get the 147.5 kibibyte MP4 over the 399.2 kibibyte GIF on my
mobile. Especially when I'm looking up something on my phone in concrete and
metal building with poor signal and non-accessible Wi-Fi.

Using the HTML5 video tag, it serves WebM and MP4, so everybody should be
happy.

There seems to be an abuse of GIFs when most people's browsers support MP4 or
WebM just fine nowadays. If your browser doesn't support that, then you
probably want to stick to simple text instructions for the terminal
instructional example anyway.

~~~
godzilla82
Dont mean to be rude, but comparison of file sizes of different video
containers is pointless. You need to see what audio or video format each of
the container files store. Then there could be changes in framerate (fps),
frame size (like 640x480), compression quality (or inversely video bit rate),
audio bit rate, image encoding (rgb for gif vs yuv420 ). Just changing the
audio bit rate from 128kbps to 32kbps for a voice only video (i mean no music,
like they have for tutorials) can reduce file size by 50%!

~~~
glitch
Yes, I agree with you in essence. I don't agree that it's pointless, though; I
believe there exists some merit to it. The point of the comparison was more
about a quick and dirty quick example with the compression implementation and
settings used by GyfCat, which was a quick way to convert the GIF. There are
obvious flaws in this approach. Many flaws, in fact. However, even with those
flaws, it demonstrated my point (that the GIF sucks) as far as I'm concerned.
More optimal settings and all sorts of possibilities for alternatives should
be explored. But, I will leave that to someone else because that is outside of
the intended scope of my intent for this comment.

------
acqq
It is mostly a bash script wrapper around Byzanz, the later existing since at
least 2008:

[http://linuxpoison.blogspot.co.at/2008/11/desktop-
recording-...](http://linuxpoison.blogspot.co.at/2008/11/desktop-recording-
tool-byzanz.html)

Still, interesting.

------
falcolas
Why gif, and not webm or mp4? Using gifs makes it only a bit more portable,
but makes it consume significantly more bandwidth.

~~~
madsravn
It's not like we are using a dial-up modem anymore. We have plenty of
bandwidth.

~~~
arthurfm
> We have plenty of bandwidth.

Smartphone users might not have lots of bandwidth and GIFs are incredibly
inefficient compared to H.264 and WebM videos. Why waste bandwidth when you
don't have to?

For example, the following GIF of a CD in a microwave is 8 MB, but when
converted to a WebM by Gfycat is just 369 KB.

[http://gfycat.com/GrimOpenDutchsmoushond](http://gfycat.com/GrimOpenDutchsmoushond)

~~~
cooper12
Off-topic: Strangely enough, it reported the same size for the MP4, but
downloading it [0] shows that it's 1.1 MB. Inspecting it with `mediainfo`
shows that it was encoded with the Baseline Profile, so that might explain the
counterintuitively large size. (This profile is used for supporting low-
powered devices, like phones, and results in a higher bitrate being used; 757
vs 252 Kbps in this case.) It seems that Gfycat just reports the WebM size
either out of technical constraints, and/or for the sake of boasting higher
amounts of bandwidth saved.

[0]
[http://fat.gfycat.com/GrimOpenDutchsmoushond.mp4](http://fat.gfycat.com/GrimOpenDutchsmoushond.mp4)

~~~
glitch
GyfCat reports the smallest file size between the both WebM and MP4. If the
MP4 is smaller (or the WebM is smaller), it shows that in the textual
information, regardless of video file presently playing. What's shown in the
textual info is purely about the boasting in this case.

Still, that's definitely a file-size improvement over the GIF.

    
    
      GrimOpenDutchsmoushond.GIF:  8,714,192 bytes.
      GrimOpenDutchsmoushond.MP4:  1,137,305 bytes.
      GrimOpenDutchsmoushond.WebM:   378,363 bytes.

~~~
cooper12
Ah, I see. Thanks for the explanation. That does make sense. And of course. I
was just digressing. Your original point still stands.

------
przemoc
Looks nice. I was going to perform a shameless plug by mentioning my simple
Linux OSD nanoproject (for those wanting to use some other recording matters,
but still see the keystrokes on the screen):

[https://github.com/przemoc/kaos/](https://github.com/przemoc/kaos/)

but I just remembered that I still haven't fixed a bug I noticed on my
computer at work, where I had Gnome back then. Nowadays I have awesome there
too (just like on my laptop), so I'll possibly won't reproduce it, but notes I
left should be enough to do the fix one day. ;)

------
jsheard
The Sublime Text dev has an interesting take on this idea, using a single
packed PNG and canvas rendering to avoid GIFs 256-colour limitation while
remaining lossless:

[http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.h...](http://www.sublimetext.com/~jps/animated_gifs_the_hard_way.html)

~~~
m_mueller
I'm hoping someone takes the ball and maintains that project, I think it's
pretty awesome. Whenever I think of great landing page animations for software
tools, I think of ST.

------
ghuntley
Similar available on Windows -
[http://carnackeys.com/](http://carnackeys.com/) with source available at
[https://github.com/Code52/carnac](https://github.com/Code52/carnac)

------
300
This is awesome! I'll definitely try to use it and make some Vim tutorials.

------
shanselman
For Windows, use the Open Source
[http://www.carnackeys.com](http://www.carnackeys.com) and either CamStudio or
Camtasia. Works great.

~~~
Normati
windows also comes with the well-hidden "Problem Steps Recorder" that takes a
sequence of screen shots whenever you click something. Doesn't do the text
overlay but it's already installed with Windows which makes some things
easier.

------
glhaynes
Smart and useful! And if there are issues with the GIF format, surely others
could easily be added. Nice work.

