# Magic mirror (Vala)

Use your webcam as a mirror using the GStreamer framework and GTK+
Daniel G. Siegel
dgsiegel@gnome.org
Johannes Schmid
jhs@gnome.org
Marta Maria Casetti
mmcasetti@gmail.com 2013
Fran Dieguez
frandieguez@gnome.org 2012-2013.

# 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:

        Crear un apliativo GTK+
        Acceda á súa cámara web usando GStreamer e incruste o resultado nunha xanela
        Obter as fotos da śua cámara web

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

        An installed copy of the Anjuta IDE
        Copias instaladas de GTK, GStreamer e compilador de Vala
        Coñecemento básico dun linguaxe de programación orientado a obxectos

# Cree un proxecto de Anjuta

Antes de comezar a programar, deberá configurar un proxecto novo en Anjuta. Isto creará todos os ficheiros que precise para construír e executar o código máis adiante. Tamén é útil para manter todo ordenado.

Inicie Anjuta e prema FicheiroNovoProxecto para abrir o asistente de proxectos.

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.

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.

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.

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;

# Construír o código por primeira vez

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 BuildBuild Project (or press ShiftF7).

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.

# Acceder ao fluxo de vídeo de cámara web con GStreamer

O contorno multimedia de traballo de GStreamer é capaz de manexar vídeo desde cámara web. Engada GStreamer á súa aplicación e poderá acceder ao fluxo de vídeo.

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; } }

Primeiro quítase a xanela creada anteriormente, xa que GStreamer encargarase de mostrar a imaxe na pantalla.

Agora vaise crear un elemento de GStreamer que accede á cámara web. Vaise a usar o elemento «Camerabin», que é un elemento de cámara todo en un capaz de facer fotos, vídeos, aplicar efectos e moito máis. Perfecto para o noso caso de uso. Con `this.camerabin.set_state (Gst.State.PLAYING)` indícase á túbería de GStreamer que se acaba de crear que empece a reproducir. Sinxelo, non?

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.

# Implementación de referencia

Se ten problemas con este titorial, compare o seu código con este código de referencia. Tamén hai unha implementación máis ampla que incrusta a xanela nunha xanela GTK regular que implica algunhas técnicas avanzadas, e engade botóns para iniciar/deter a imaxe.

# Lectura complementaria

Para atopar máis información sobre a linguaxe de programación Vala pode visitar o titorial de Vala.

# Conclusión

Isto é todo, acaba de crear unha aplicación completo para sacar fotos coa cámara web en menos de 15 minutos. Agora xa pode afeitar a barba, maquillarse un pouco e ordenar o seu espazo de traballo para impresionar aos seus amigos e colegas con unha aplicación feita en 15 minutos.