GNOME.org

Magic mirror

Your mirror just fell off the wall and broke into a thousand pieces — but you need a mirror to shave your beard off or add some makeup! You only have 15 minutes left before catching the bus to work. So what can you do?

In this tutorial, we're going to make a program which lets you use your webcam as a mirror. You will learn how to:

  • Create a GTK+ application

  • Access your webcam using GStreamer and embed the result into a window

  • Grab photos off your webcam

You'll need the following to be able to follow this tutorial:

  • An installed copy of the Anjuta IDE

  • Installed copies of GTK, GStreamer, and a Vala compiler

  • Basic knowledge of an object-oriented programming language

Create a project in Anjuta

Before you start coding, you'll need to set up a new project in Anjuta. This will create all of the files you need to build and run the code later on. It's also useful for keeping everything together.

  1. Start Anjuta and click File ▸ New ▸ Project to open the project wizard.

  2. Choose GTK+ (simple) from the Vala tab, click Forward, and fill out your details on the next few pages. Use magic-mirror as project name and directory.

  3. Disable Use GtkBuilder for user interface as we will create the UI manually in this tutorial. Check the Guitar-Tuner tutorial using the interface builder.

  4. Make sure that Configure external packages is selected. On the next page, select gstreamer-0.10 from the list to include the GStreamer library into your project.

  5. Click Apply and the project will be created for you. Open src/magic_mirror.vala from the Project or File tabs. You should see some code which starts with the lines:

    using GLib;
using Gtk;

Build the code for the first time

The code loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:

  • The two using lines import namespaces so we don't have to name them explicitly.

  • The constructor of the Main class creates a new window and sets its title. Afterwards the window is shown and a signal is connected which quits the application if the window is closed. More on signals later on.

  • The static main function is run by default when you start a Vala application. It calls a few functions which create the Main class, set up and then run the application. The Gtk.Main function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).

This code is ready to be used, so you can compile it by clicking Build ▸ Build Project (or press Shift+F7).

Change the Configuration to Default and then press Execute to configure the build directory. You only need to do this once, for the first build.

Access the webcam video stream with GStreamer

The GStreamer multimedia framework is able to handle video from webcams. Let's add GStreamer to our application and so we can access the video stream.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

using GLib;
using Gtk;

public class Main : Object
{
	private Gst.Element camerabin;

	public Main () {
		this.camerabin = Gst.ElementFactory.make ("camerabin", "camera");
		this.camerabin.set_state (Gst.State.PLAYING);
	}

	static int main (string[] args) {
		Gtk.init (ref args);
		Gst.init (ref args);
		var app = new Main ();

		Gtk.main ();

		return 0;
	}
}

  1. First we remove the window we created before because GStreamer will take care of showing the picture on screen.

  2. Now we are creating a GStreamer element which accesses our webcam. We are using the Camerabin element, which is an all-in-one camera element and is capable of taking photos, videos, applying effects and much more. Perfect for our use case! With this.camerabin.set_state (Gst.State.PLAYING) we tell the GStreamer pipeline we just created to start playing. Easy, no?

    Of course it is also possible to integrate the video more tightly into other windows but that is an advanced topic that includes some details of the X Window System we will omit here.

    Compile and run it again. You will end up with two windows. In the next step we will integrate the video into the GTK+ window.

Reference Implementation

If you run into problems with the tutorial, compare your code with this reference code. There is also a more extensive implementation that embeds the window into a regular Gtk.Window which involves some advanced techniques, and adds buttons to start/stop the picture.

Further reading

To find out more about the Vala programming language you might want to check out the Vala Tutorial.

Conclusion

That's it, you have managed to create a full-featured webcam photo application in 15 minutes. Now you can shave your beard off or add some makeup to your beautiful face, right before having a beautiful day at your workplace, where you can impress your friends and colleagues with an awesome application you just made in 15 minutes.