Recently I've started to play with GStreamer, a powerful and complex multimedia framework based on glib object model. In less than two weeks I've been able to build a (basic) player which can handle audio and video. In this post I'm starting a report on how to build such a basic player as an introduction to GStreamer.

We'll use Glade-2 to build a Gtk+2.0 interface for our player and we'll build the interface code using C as target language. We'll also use autotools from GNU project, since Glade kindly provides all the setup files for use. We'll need just to tweak a little bit with Makefile.am to add GStreamer compile flags.

Ok, starting! Run Glade and start a new project. Call it as you prefer. In out tutorial we'll call our application blogtheater. Then start placing widgets on the ground. The very first widget you should pick is of course a window. After clicking on window item in glade palette, something similar should appear:

Now it's time to fill the interface with familiarly looking widgets: a menu bar, a working area and a status bar which informs the user about what's going on. We place a vertical box of four slot, we add the menu bar in the first and the status bar in the last. In the second one we'll place the main contents while in the third one we'll place the controls. The result should look like in following picture:

The buttons need some makeup: using stock buttons will do the job. First button will be Open, then Play, Pause and (we miss a slot, should add one!) Stop. In the left most slot we'll put a two lines vertical box with timestamp up and a range down, to visualize the media playing position. The result, again, look like the picture:

More promising, isn't it? OK. Let me explain some tricks I've used with glade. Nothing is marked as "fill" and "expand" except the vertical box holding the range and the timestamp. The timestamp if formed by three distinct labels: the first and the third (for elapsed and total time) and another one which is just "/". That will simplify the callback, as we'll see while coding file callbacks.c. Now, let's add the screen and the playlist, the first on left, the second on right, as follows:

Inside the vertical pane object (the one divided in two vertical region by a draggable separator, are placed two frame widgets with "No file playing" and "Playlist:" as labels. The GtkAdjustment of left frame has been set to resizeable while the rightest one has not. That's due to gravity behaviour when the window is resized. Left frame hosts a GtkImage widget which will be used by GStreamer to show video contents. The right one contains a GtkTreeView widget which allows displaying of a structured list of arbitrary data.

The interface is almost complete (OK, no "About" dialog, but who cares? You are skilled enough to add it yourself) and we miss just a file selector dialog, so we click on the FileChooser widget inside Glade palette. Than we save the project and we build the code which will look like any other ordinary GNU package, with configure and everything in place.

So far, that's all. If you wish, you can download blogtheater glade project. In the next issue we'll see how GStreamer performs data pipelining and how use it inside a multimedia application. Stay tuned. :-)