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
166
167
168
169
170
171
172
173
174
175
176
177
178
|
<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" id="magic-mirror.vala" xml:lang="sv">
<info>
<title type="text">Magisk spegel (Vala)</title>
<link type="guide" xref="vala#examples"/>
<desc>Använd din webbkamera som en spegel med GStreamer-ramverket och 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>Sebastian Rasmussen</mal:name>
<mal:email>sebras@gmail.com</mal:email>
<mal:years>2019</mal:years>
</mal:credit>
<mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
<mal:name>Anders Jonsson</mal:name>
<mal:email>anders.jonsson@norsjovallen.se</mal:email>
<mal:years>2021</mal:years>
</mal:credit>
</info>
<title>Magisk spegel</title>
<synopsis>
<p><em>Din spegel föll ner och gick i tusen bitar — men du behöver en spegel för att raka skägget eller sminka dig! Du har bara 15 minuter innan bussen till jobbet går. Vad ska du göra?</em></p>
<p>I denna handledning kommer vi göra ett program som låter dig använda din webbkamera som en spegel. Du kommer lära dig hur du:</p>
<list>
<item><p>Skapar ett GTK+-program</p></item>
<item><p>Kommer åt din webbkamera med GStreamer och bäddar in resultatet i ett fönster</p></item>
<item><p>Får bilder från din webbkamera</p></item>
</list>
<p>Du behöver följande för att kunna följa denna handledning:</p>
<list>
<item><p>En installerad kopia av den <link xref="getting-ready">integrerade utvecklingsmiljön Anjuta</link></p></item>
<item><p>Installerade kopior av GTK, GStreamer och en Vala-kompilator</p></item>
<item><p>Grundläggande kunskap i ett objektorienterat programmeringsspråk</p></item>
</list>
</synopsis>
<media type="image" mime="image/png" src="media/magic-mirror.png"/>
<section id="anjuta">
<title>Skapa ett projekt i Anjuta</title>
<p>Innan du börjar koda kommer du behöva konfigurera ett nytt projekt i Anjuta. Detta kommer skapa alla filer som du behöver för att bygga och köra koden senare. Det är också användbart för att hålla allting samlat.</p>
<steps>
<item>
<p>Starta Anjuta och klicka på <guiseq><gui>Arkiv</gui><gui>Ny</gui><gui>Projekt</gui></guiseq> för att öppna projektguiden.</p>
</item>
<item>
<p>Välj <gui>GTK+ (enkel)</gui> från fliken <gui>Vala</gui>, klicka på <gui>Framåt</gui>, och fyll i dina detaljer på de nästkommande sidorna. Använd <file>magic-mirror</file> som projektnamn och katalog.</p>
</item>
<item>
<p>Inaktivera <gui>Använd GtkBuilder för användargränssnitt</gui> då vi kommer skapa användargränssnittet manuellt i denna handledning. Se handledningen <link xref="guitar-tuner.vala">Gitarrstämmare</link> för användning av gränssnittsbyggaren.</p>
</item>
<item>
<p>Säkerställ att <gui>Konfigurera externa paket</gui> är valt. På nästa sida, välj <em>gstreamer-0.10</em> från listan för att inkludera <app>GStreamer</app>-biblioteket i ditt projekt.</p>
</item>
<item>
<p>Klicka på <gui>Verkställ</gui> så kommer projektet skapas åt dig. Öppna <file>src/magic_mirror.vala</file> från flikarna <gui>Projekt</gui> eller <gui>Filer</gui>. Du bör se kod som börjar med raderna:</p>
<code mime="text/x-csharp">
using GLib;
using Gtk;</code>
</item>
</steps>
</section>
<section id="build">
<title>Bygg koden för första gången</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>De två <code>using</code>-raderna importerar namnrymder så vi inte behöver namnge dem explicit.</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>Denna kod är klar att användas, så du kan kompilera den genom att klicka på <guiseq><gui>Bygg</gui><gui>Bygg projekt</gui></guiseq> (eller trycka <keyseq><key>Skift</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>Kom åt webbkamerans videoström med GStreamer</title>
<p>GStreamer-multimediaramverket kan hantera video från webbkameror. Låt oss lägga till GStreamer till vårt program så vi kan komma åt videoströmmen.</p>
<code mime="text/x-csharp" style="numbered">
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>Först tar vi bort fönstret vi skapade tidigare, för GStreamer kommer ta hand om att visa bilden på skärmen.</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 tightly 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>Referensimplementation</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>Vidare läsning</title>
<p>För att lära dig mer om programmeringsspråket Vala kan du vilja ta en titt på <link href="http://live.gnome.org/Vala/Tutorial">Vala-handledningen</link>.</p>
</section>
<section id="conclusion">
<title>Avslutning</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>
|
