Monday, January 18, 2016

Recording a screencast in Linux

Screencasts

A picture is worth a thousand words.
And what if you want to make it even better? What about using an animated image to show some action or progress? Like this one:



Personally I like the animated images on the main project pages at GitHub. See for example git-plus or color-picker Atom plugins. (Or my build-rake plugin displayed above.)

The question is how to record such screencasts?


Screen Recording in Linux

There are several tools for Linux which can be used for screen recording. It also depends it you want to create a standard video file (e.g. for uploading to youtube) or an animated image which can be embedded into web pages.


Standard Video

For recording the desktop to a standard video file (like in AVI or WEBM format) you can use the ffmpeg tool.

To record the screen with audio capture (via PulseAudio) to a WebM file (using open codecs VP9 for video and Opus for audio) use command like this:.

ffmpeg -f pulse -i default -video_size x -framerate 15 -f x11grab -i :0.0+<width>,<height> -b:v 1M -crf 10 output.webm
See these links for more details:

Animated Image

If you want to create an animated image you need to use the GIF image format (you could use an animated PNG as well, but that is not supported by all browsers).

You could use ffmpeg as well (just use output.gif file name), but in my tests the resulting image is too big for using on web pages. It's probably caused by the fact that ffmpeg uses dithering for images with 24bit colors which obviously leads to less compression. Maybe there are some options to tune this, but still writing the position of the recorded area manually is a bit uncomfortable...

Then I found the byzanz tool. It's by default available to install in the openSUSE distribution, simply run:

sudo zypper in byzanz xwininfo

(This will also install xwininfo package, see later why.)

Now you can record the desktop in a similar way like ffmpeg, see the accepted parameters:

byzanz-record --help

Again, you need to manually enter the coordinates of the recorded area if you do not want to record complete screens. And that's not trivial... Fortunately I found this nice byzanz-record-window helper script.

You can install it locally via these commands:

cd ~/bin
wget https://gist.githubusercontent.com/lucy/3042755/raw/eda2b85b51779affbc392a2bb3f1b60ed5fe98ff/byzanz-record-window
chmod a+x byzanz-record-window

The script uses the xwinfo helper to obtain the coordinates of the selected window. They are then passed to the byzanz-record tool.

I'd suggest to use about 3 second delay before starting the actual recording to have some time to get ready (switch to the correct window, position the mouse cursor, etc...).

So the final recording command would look like this:

byzanz-record-window --delay=3 --duration=5 screencast.gif


Final Notes

Be prepared to repeat the recording several times, you'll probably need more than a single attempt. I also found it easier to repeat the recording than editing and rebuilding the animation just to remove the useless parts at the beginning or the end.

Check also the resulting image size, for embedding into web pages it should be as small as possible. If it is too big then decrease the window size, do a shorter recording or avoid too many changes in the image.

7 comments:

ancorgs said...

I just found Peek, which is a outstanding GUI application that does the same than Byzant but in a fully graphical and intuitive way. And it's packaged for all major distros (including openSUSE, of course).

https://github.com/phw/peek/

హాట్‌గర్ల్స్ said...

It's Really A Great Post. Looking For Some More Stuff.
Best MSBI Training in Bangalore
Best PEGA Training Institute in Bangalore
Best Oracle PLSQL Training Institutes in Bangalore
Best Advanced JAVA Training Institute in Bangalore
Best Salesforce CRM training institute in Bangalore
Best Oracle DBA Training Institute in Bangalore

I Digital Academy said...

Its a good post, helpful to the learners.
Spoken english Training in Bangalore

Unknown said...

It's A Really Great Post Thank You For Sharing. And it's Helpful to The Learners.
Best Digital Marketing Courses in Bangalore

Unknown said...

1. Best Digital Marketing Agency
Comment:Great Information, Thanks for sharing

unknown said...

very nice post thankyou for sharing.
Sobha Royal Pavilion Sarjapur Road

Training for IT and Software Courses said...

Thanks For sharing a nice post about MSBI Training Course.It is very helpful and MSBI useful for us.MSBI Training in Bangalore