<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" id="magic-mirror.vala" xml:lang="de">

  <info>

  <title type="text">Magischer Spiegel (Vala)</title>

    <link type="guide" xref="vala#examples"/>

    <desc>Use your webcam as a mirror using the GStreamer framework and GTK+</desc>

    <revision pkgversion="0.1" version="0.1" date="2011-03-19" status="review"/>

    <credit type="author">

      <name>Daniel G. Siegel</name>

      <email its:translate="no">dgsiegel@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Johannes Schmid</name>

      <email its:translate="no">jhs@gnome.org</email>

    </credit>

    <credit type="editor">

      <name>Marta Maria Casetti</name>

      <email its:translate="no">mmcasetti@gmail.com</email>

      <years>2013</years>

    </credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Mario Blättermann</mal:name>

      <mal:email>mario.blaettermann@gmail.com</mal:email>

      <mal:years>2011, 2013</mal:years>

    </mal:credit>

  </info>

<title>Magischer Spiegel</title>

<synopsis>

  
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:

  <list>

    <item>
Create a GTK+ application
</item>

    <item>
Access your webcam using GStreamer and embed the result into a window
</item>

    <item>
Grab photos off your webcam
</item>

  </list>

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

  <list>

    <item>
An installed copy of the <link xref="getting-ready">Anjuta IDE</link>
</item>

    <item>
Installed copies of GTK, GStreamer, and a Vala compiler
</item>

    <item>
Basic knowledge of an object-oriented programming language
</item>

  </list>

</synopsis>

<media type="image" mime="image/png" src="media/magic-mirror.png"/>

<section id="anjuta">

  <title>Erstellen eines Projekts in Anjuta</title>

  
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.

  <steps>

    <item>

    
Start Anjuta and click <guiseq><gui>File</gui><gui>New</gui><gui>Project</gui></guiseq> to open the project wizard.

    </item>

    <item>

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

   	</item>

   	<item>

    
Disable <gui>Use GtkBuilder for user interface</gui> as we will

    create the UI manually in this tutorial. Check the <link xref="guitar-tuner.vala">Guitar-Tuner</link>

    tutorial using the interface builder.

    </item>

    <item>

    
Make sure that <gui>Configure external packages</gui> is selected. On the next page, select

       gstreamer-0.10 from the list to include the <app>GStreamer</app> library into your project.

    </item>

    <item>

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

using GLib;

using Gtk;

    </item>

  </steps>

</section>

<section id="build">

  <title>Build the code for the first time</title>

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

  <list>

  <item>

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

   </item>

   <item>

    
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.

   </item>

   <item>

    
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).

   </item>

  </list>

  
This code is ready to be used, so you can compile it by clicking <guiseq><gui>Build</gui><gui>Build Project</gui></guiseq> (or press <keyseq><key>Shift</key><key>F7</key></keyseq>).

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

</section>

<section id="webcam">

 <title>Access the webcam video stream with GStreamer</title>

 
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.

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;

	}

}

 <steps>

 <item>
First we remove the window we created before because GStreamer will

 take care of showing the picture on screen.

 </item>

  <item>

  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.

  </item>

 </steps>

</section>

<section id="impl">

 <title>Referenz-Implementierung</title>

 
If you run into problems with the tutorial, compare your code with this <link href="magic-mirror/magic-mirror.vala">reference code</link>.

 There is also a more <link href="magic-mirror/magic-mirror-advanced.vala">extensive implementation</link> that embeds the window into a regular Gtk.Window

 which involves some advanced techniques, and adds buttons to start/stop the picture.

</section>

<section id="further">

<title>Weitere Informationen</title>

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

<link href="http://live.gnome.org/Vala/Tutorial">Vala Tutorial</link>.

</section>

<section id="conclusion">

<title>Conclusion</title>

  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.

</section>

</page>