1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="magic-mirror.vala" xml:lang="el">
<info>
<link type="guide" xref="index#vala"/>
<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>dgsiegel@gnome.org</email>
</credit>
<credit type="author">
<name>Johannes Schmid</name>
<email>jhs@gnome.org</email>
</credit>
</info>
<title>4 Magic Mirror</title>
<synopsis>
<p><em>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?</em></p>
<p>In this tutorial, we're going to make a program which lets you use your webcam as a mirror. You will learn how to:</p>
<list>
<item><p>Create a GTK+ application</p></item>
<item><p>Access your webcam using GStreamer and embed the result into a window</p></item>
<item><p>Grab photos off your webcam</p></item>
</list>
<p>Θα χρειαστείτε τα παρακάτω για να μπορέσετε να ακολουθήσετε αυτόν τον οδηγό:</p>
<list>
<item><p>Ένα εγκατεστημένο αντίγραφο του </p></item>
<item><p>Installed copies of GTK, GStreamer, and a Vala compiler</p></item>
<item><p>Basic knowledge of an object-oriented programming language</p></item>
</list>
</synopsis>
<media type="image" mime="image/png" src="media/magic-mirror.png"/>
<section id="anjuta">
<title>Δημιουργήστε ένα έργο με το Anjuta</title>
<p>Πριν ξεκινήσετε να προγραμματίζετε, πρέπει να δημιουργήσετε ένα καινούργιο έργο στο Anjuta. Έτσι θα δημιουργηθούν όλα τα απαραίτητα αρχεία που χρειάζονται για την εκτέλεση του κώδικα αργότερα. Επίσης θα ήταν χρήσιμο να τα κρατάτε όλα μαζί.</p>
<steps>
<item>
<p>Ξεκινήστε το Anjuta και πατήστε <guiseq><gui>Αρχείο</gui><gui>Νέο</gui><gui>Έργο</gui></guiseq> για να ανοίξετε το μάγο του έργου (project wizard).</p>
</item>
<item>
<p>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>guitar-tuner</file> as project name and directory.</p>
</item>
<item>
<p>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.</p>
</item>
<item>
<p>Make sure that <gui>Configure external packages</gui> is selected. On the next page, select
<em>gstreamer-0.10</em> from the list to include the <app>GStreamer</app> library into your project.</p>
</item>
<item>
<p>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:</p>
<code mime="text/x-valasrc"><![CDATA[
using GLib;
using Gtk;]]></code>
</item>
</steps>
</section>
<section id="build">
<title>Build the code for the first time</title>
<p>The code loads an (empty) window and shows it. More details are given below; skip this list if you understand the basics:</p>
<list>
<item>
<p>The two <code>using</code> lines import namespaces so we don't have to name them explicitly.</p>
</item>
<item>
<p>The constructor of the <code>Main</code> 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.</p>
</item>
<item>
<p>The static <code>main</code> 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 <code>Gtk.Main</code> function starts the GTK main loop, which runs the user interface and starts listening for events (like clicks and key presses).</p>
</item>
</list>
<p>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>).</p>
<p>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.</p>
</section>
<section id="webcam">
<title>Access the webcam video stream with GStreamer</title>
<p>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.</p>
<code mime="text/x-vala" style="numbered"><![CDATA[
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;
}
}
]]></code>
<steps>
<item><p>First we remove the window we created before because GStreamer will
take care of showing the picture on screen.</p>
</item>
<item>
<p>
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 <code>this.camerabin.set_state (Gst.State.PLAYING)</code>
we tell the GStreamer pipeline we just created to start playing. Easy, no?
</p>
<p>Of course it is also possible to integrate the video more tighly into other
windows but that is an advanced topic that includes some details of the X Window
System we will omit here.
</p>
<p>
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.
</p>
</item>
</steps>
</section>
<section id="impl">
<title>Υλοποίηση αναφοράς</title>
<p>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.</p>
</section>
<section id="further">
<title>Further reading</title>
<p>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>.</p>
</section>
<section id="conclusion">
<title>Conclusion</title>
<p>
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.
</p>
</section>
</page>
|
