Aplicat ii de securitate pentru WebRTC [610927]

Ministerul Educat ¸iei Nat ¸ionale
Universitatea ”OVIDIUS” din Constant ¸a
Facultatea de Matematic ˘a s ¸i Informatic ˘a
Specializarea Informatic ˘a
Aplicat ¸ii de securitate pentru WebRTC
Lucrare de licent ¸ ˘a
Coordonator s ¸tiint ¸ific:
Conf. Univ. Dr. Petac Eugen
Absolvent:
V od˘a Costin-Claudiu
Constant ¸a
2019

Cuprins
Cuprins i
Lista Figurilor iii
1 Motivat ¸ie 2
1.1 Chat-ul Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.1 Scurt istoric . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 De ce am ales WebRTC? . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2 Starea actual ˘a a domeniului 4
2.1 WebRTC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.1 Ce este WebRTC? . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.1.2 De ce ar trebui s ˘a folosim WebRTC? . . . . . . . . . . . . . . . . . 4
2.1.3 Proiectul WebRTC este det ¸inut de Google sau este independent? . . 5
2.1.4 Arhitectura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Microsoft Visual Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3 Solut ¸ia propus ˘a 7
3.1 Tehnologii folosite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.1.1 getUserMedia() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
i

Cuprins Cuprins
3.1.2 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.1.3 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2 Ce face aplicat ¸ia? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3 Implementare cod . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4 Prezentarea aplicat ¸iei 18
Referint ¸e bibliografice 22
ii

Lista Figurilor
1.1 Talkomatic pe sistemul PLATO . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.1 Arhitectura de ansamblu a proiectului WebRTC . . . . . . . . . . . . . . . . . 5
2.2 Istoricul versiunilor Visual Studio . . . . . . . . . . . . . . . . . . . . . . . . 6
3.1 Anatomia unui set de reguli CSS . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2 Creare proiect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3 Creare pagin ˘a html . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.4 Creare fis ¸ier css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.5 Background-ul aplicat ¸iei . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
3.6 Creare fis ¸ier JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.1 Prima pagin ˘a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2 Logare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4.3 Prima pagin ˘a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.4 Filtrele camerei:Normal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.5 Filtrele camerei:Greyscale . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
4.6 Filtrele camerei:Sepia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.7 Filtrele camerei:Invert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.8 Filtrele camerei:Hue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
iii

Lista Figurilor Lista Figurilor
4.9 Filtrele camerei:Blur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.10 Filtrele camerei:Contrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.11 Capturi efectuate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1

Capitolul 1
Motivat ¸ie
1.1 Chat-ul Online
Chat-ul online se poate referi la orice fel de comunicare pe internet care ofer ˘a o transmisie
in timp real a mesajelor de tip text de la expeditor la receptor.
Mesajele de tip chat sunt ˆın general scurte pentru a permite participant ¸ilor s ˘a r˘aspund ˘a
rapid. Prin urmare se creeaz ˘a un sentiment similar unei conversat ¸ii vorbite, care diferent ¸iaza
chat-ul de forumuri sau mail-uri.
Chat-ul online, ˆıntr-o definit ¸ie mai put ¸in strict ˘a, poate fi orice text direct sau bazat pe
video, folosind instrumente precum mesageria instantanee, Internet Relay Chat (IRC) etc.
Expresia de ”chat online” provine de la cuv ˆantul chat, care inseamn ˘a ”conversat ¸ie infor-
mal˘a”. Chat-ul online include aplicat ¸ii bazate pe web care permit comunicarea – adesea
adresat ˘a direct, dar anonim ˘aˆıntre utilizatorii din mediul multi-utilizator.
1.1.1 Scurt istoric
Primul sistem de chat online a fost creat de Doug Brown /c si David R. Woolley ˆın 1973
pe sistemul PLATO la Universitatea din Illinois s ¸i s-a numit Talkomatic. Acesta a avut mai
multe canale, fiecare dintre acestea put ˆand g ˘azdui p ˆan˘a la cinci persoane, cu mesaje care apar
pe ecranele tuturor utilizatorilor, caracter cu caracter, pe m ˘asur˘a ce erau tastate. Talkomatic
a fost foarte popular printre utilizatorii de PLATO la mijlocul anilor ’80. ˆIn 2014, Brown s ¸i
Woolley au lansat o versiune bazat ˘a pe web a Talkomatic.
2

Motivat ¸ie De ce am ales WebRTC?
Figura 1.1 : Talkomatic pe sistemul PLATO
Primul sistem online care a folosit comanda ”chat” a fost creat pentru The Source ˆın
1979 de Tom Walker s ¸i Fritz Thane de la Dialcom, Inc.
Primul serviciu dedicat chat-urilor online care a fost la scar ˘a larg ˘a disponibil publicu-
lui a fost CompuServe CB Simulator ˆın 1980, creat de executivul CompuServe, Alexander
”Sandy” Trevor, ˆın Columbus, Ohio.
1.2 De ce am ales WebRTC?
Am ales WebRTC pentru simplitatea acestuia, nu necesit ˘a descarcare de soft s ¸i se foloses ¸te
direct prin intermediul browserului.
3

Capitolul 2
Starea actual ˘a a domeniului
2.1 WebRTC
2.1.1 Ce este WebRTC?
WebRTC este un framework pentru web care permite comunicat ¸iile ˆın timp real ˆın browser.
Acesta include elementele fundamentale pentru comunicat ¸ii de ˆınalt˘a calitate pe web, precum
componente de ret ¸ea, audio, video utilizate in aplicat ¸iile de chat video si vocal.
Aceste componente, cand sunt implementate ˆıntr-un browser, pot fi accesate prin API-ul
JavaScript permit ¸ ˆand dezvoltatorilor web s ˘a implementeze cu us ¸urinta propria lor aplicat ¸ie
RTC.
2.1.2 De ce ar trebui s ˘a folosim WebRTC?
.Un factor cheie in succesul web este faptul c ˘a tehnologiile sale de baz ˘a, cum ar fi
HTML, HTTP, TCP/IP, sunt deschise s ¸i pot fi implementate liber. ˆIn prezent, nu exist ˘a
o solut ¸ie de ˆınalt˘a calitate, complet gratuit ˘a, disponibil ˘a care s ˘a permit ˘a comunicarea
ˆın browser.
.Deja integrat cu cele mai bune motoare video s ¸i audio, care au fost implementate pe
milioane de puncte in ultimii 8 ani. Google nu percepe redevent ¸e pentru WebRTC.
.Include tehnologia NAT(Network adress translation) s ¸i tehnologia de traversare fire-
wall, folosind STUN, ICE, TURN, RTP-over-TCP s ¸i suport pentru proxies.
.Se bazeaz ˘a pe puterea browserului: WebRTC rezum ˘a semnalizarea oferind o mas ¸in ˘a
de stare de semnalizare care se mapeaz ˘a direct pe PeerConnection. Prin urmare, dez-
voltatorii web pot alege protocolul pentru scenariul lor de utilizare(de exemplu, f ˘ar˘a a
se limita la SIP,XMPP/Jingle).
4

Starea actual ˘a a domeniului WebRTC
2.1.3 Proiectul WebRTC este det ¸inut de Google sau este in-
dependent?
WebRTC este un proiect open-source sust ¸inut de Google, Mozilla si Opera. API s ¸i pro-
tocoalele subortonate sunt dezvoltate ˆın comun la W3C(World Wide Web Consortium) s ¸i
IETF(Internet Engineering Task Force).
2.1.4 Arhitectura
WebRTC ofer ˘a dezvoltatorilor de aplicat ¸ii web posibilitatea de a scrie aplicat ¸ii multimedia
bogate, ˆın timp real pe web, f ˘ar˘a a necesita pluginuri, desc ˘arc˘ari sau instal ˘ari. Acesta este
scopul, de a ajuta la construirea unei platforme RTC puternice care funct ¸ioneaz ˘a pe mai
multe browsere web, pe mai multe platforme.
Arhitectura de ansamblu arat ˘a cam as ¸a:
Figura 2.1 : Arhitectura de ansamblu a proiectului WebRTC
5

Starea actual ˘a a domeniului Microsoft Visual Studio
2.2 Microsoft Visual Studio
Visual Studio este un mediu de dezvoltare integrat ˘a (IDE) dezvoltat de Microsoft pentru a
dezvolta GUI (Interfat ¸ ˘a grafic ˘a de utilizator), console, aplicat ¸ii Web, aplicat ¸ii mobile, cloud,
servicii web etc. Cu ajutorul acestui IDE, putem crea cod gestionat, precum s ¸i cod nativ.
Utilizeaz ˘a diverse platforme de dezvoltare software Microsoft, cum ar fi Windows store,
Microsoft Silverlight, Windows API etc. Nu este un IDE care are un limbaj specific, deoarece
putem utiliza acest lucru pentru a scrie cod ˆın C #, C ++, VB (Visual Basic), Python,
JavaScript s ¸i multe alte limbi. Acesta ofer ˘a suport pentru 36 de limbaje de programare
diferite. Este disponibil at ˆat pentru Windows, c ˆat s ¸i pentru MacOS.
Figura 2.2 : Istoricul versiunilor Visual Studio
Anterior versiunii Visual Studio 4.0 a existat Visual Basic 3, Visual C++, Visual FoxPro
s ¸i Source Safe ca s ¸i produse independente.
6

Capitolul 3
Solut ¸ia propus ˘a
3.1 Tehnologii folosite
3.1.1 getUserMedia()
API-ul getUserMedia ofer˘a acces la fluxuri multimedia (video, audio sau ambele) de pe
dispozitive locale. Exist ˘a mai multe cazuri de utilizare pentru acest API. Prima dintre ele
esteˆın mod evident comunicarea ˆın timp real, dar ˆıl putem folosi s ¸i pentru a ˆınregistra. Un
alt caz interesant de utilizare este supravegherea locuint ¸ei sau a locului de munc ˘a. Pe cont
propriu, acest API este capabil doar s ˘a obt ¸in ˘a capturi audio s ¸i video, nu trimite datele s ¸i nu
le stocheaz ˘aˆıntr-un fis ¸ier. Pentru a avea un chat complet de lucru, de exemplu, trebuie s ˘a
trimitem date pe Internet. Acest lucru poate fi realizat folosind API-ul RTCPeerConnection .
Pentru a stoca datele, putem utiliza API-ul MediaStreamRecorder .
API-ul getUserMedia este uimitor at ˆat pentru dezvoltatori c ˆat s ¸i pentru utilizatori. Dez-
voltatorii pot acum accesa surse audio s ¸i video cu un singur apel funct ¸ional, ˆın timp ce uti-
lizatorii nu trebuie s ˘a instaleze software suplimentar. Din perspectiva utilizatorului, aceasta
ˆınseamn ˘a, de asemenea, o sc ˘adere a timpului de ˆıncepere a utiliz ˘arii funct ¸iei s ¸i, de asemenea,
o utilizare sporitzu a a software-ului de c ˘atre persoane non-tehnice.
Des ¸i API-ul getUserMedia exist ˘a de ceva vreme, acum, ˆıncep ˆand cu 30 decembrie
2013, este ˆınc˘a un proiect de lucru al W3C. Deci, specificat ¸iile pot fi sensibile la mai multe
modific ˘ari. API expune o singur ˘a metod ˘a, getUserMedia (), care apart ¸ine obiectului win-
dow.navigator. Metoda accept ˘a ca parametri ai s ˘ai un obiect de constr ˆangeri, un apel de suc-
ces s ¸i o apelare de es ¸ec. Parametrul constr ˆangerilor este un obiect care are una sau ambele
propriet ˘at ¸i audio s ,i video. Valoarea acestor propriet ˘at ¸i este una boolean ˘a,ˆın care mijloacele
adev ˘arate solicit ˘a fluxul (audio sau video), iar falsul nu solicit ˘a fluxul. Deci, pentru a solicita
atˆat audio c ˆat s ¸i video, trecet ¸i urm ˘atorul obiect:
{ video: true,
audio: true }
7

Solut ¸ia propus ˘a Tehnologii folosite
3.1.2 HTML
Ce este HTML?
HTML (Hyper Text Markup Language) este un limbaj pentru descrierea paginilor web.
HTML este un limbaj de marcare, nu un limbaj de programare. Limbajul de marcare reprezint ˘a
un set de taguri de marcare.
Tagurile HTML
.Tagurile de marcare HTML sunt numite uzual taguri HTML.
.Tagurile HTML sunt cuvinte cheie scrise ˆıntre paranteze ascut ¸ite, de exemplu <html>.
.ˆIn mod normal, tagurile HTML sunt pereche ca <div>si<ndiv>. Primul este tagul
deˆınceput, iar cel din urm ˘a este cel de sfars ¸it.
Documentele HTML
.descriu paginile web
.cont ¸in taguri HTML s ¸i text simplu
.sunt numite s ¸i pagini web
Scopul unui browser este s ˘a citeasc ˘a documentele HTML s ¸i s ˘a le afis ¸eze ca pagini web.
Browser-ul nu afis ¸eaza tagurile HTML, dar le utilizeaza ca s ˘a interpreteze cont ¸inutul paginii.
8

Solut ¸ia propus ˘a Tehnologii folosite
3.1.3 CSS
Ce este CSS?
CSS(Cascading Style Sheets) nu este un limbaj de programare, nici limbaj de mar-
care, ci un limbaj de stilizare, care este folosit pentru a descrie stiluri reutilizabile pentru
prezentarea documentelor scrise ˆıntr-un limbaj de marcare(Documente HTML).
Conceptul s ˘au a fost creat de Hakon Wium Lie ˆın anul 1994, iar ˆın anul 1996 a fost
preluat de W3C s ¸i ast ˘azi permite dezvoltatorilor web s ˘a modifice aspectul paginilor lor web.
De exemplu, CSS poate fi folosit pentru a schimba fontul utilizat ˆın anumite elemente
HTML, precum s ¸i dimensiunea s ¸i culoarea acestuia. Un singur fis ¸ier CSS poate fi legat la
mai multe pagini, ceea ce permite unui dezvoltator s ˘a modifice aspectul tuturor paginilor ˆın
acelas ,i timp.
Sintaxa
Figura 3.1 : Anatomia unui set de reguli CSS
ˆIn figura de mai sus avem un set de reguli.
Selectorul – Selecteaz ˘a elementul HTML c ˘aruia i se va aplica stilul. Se afl ˘a laˆınceputul
setului de reguli.
Declarat ¸ia – Precizeaz ˘a care din propriet ˘at ¸ile elementului HTML va fi stilizat.
Proprietat ¸i – Moduri ˆın care se poate stiliza un element.
Valoarea propriet ˘at ¸ii- Alege una din numeroasele variante pentru o anumit ˘a propri-
etate; se afl ˘a dup ˘a ”dou ˘a puncte”.
9

Solut ¸ia propus ˘a Ce face aplicat ¸ia?
3.2 Ce face aplicat ¸ia?
Am construit o aplicat ¸ie web cu care ar trebui s ˘a putem aplica filtre / efecte peste captura
video inregistrat ˘a cu webcam-ul s ¸i s ˘a imortaliz ˘amˆıntr-o fotografie. Pentru a avea acces la
aplicat ¸ie trebuie s ˘a ne log ˘am.
3.3 Implementare cod
Pentru a face aplicat ¸ia web am folosit Microsoft Visual Studio 2019.
Am creat un proiect nou ASP.NET:
Figura 3.2 : Creare proiect
10

Solut ¸ia propus ˘a Implementare cod
Amˆınceput prin a crea o pagin ˘a html pentru a face fereastra de login.
Figura 3.3 : Creare pagin ˘a html
Am creat cele 2 c ˆampuri de username si password s ¸i 2 butoane Login s ¸i Cancel. Butonul
Login, dup ˘a executarea funct ¸iei check() , ar trebui szu a ne trimit ˘a pe aplicat ¸ia ˆın sine, iar
butonul Cancel, s ¸terge ce am scris in c ˆampurile precizate mai sus.
<div align="center">
<form name="login">
<p><font color="red"> Username: &nbsp</font> <input type="text" name="
userid" /></p><br><br>
<p><font color="red">Password: &nbsp</font> <input type="password" name
="password" /></p><br><br>
<input type="button" onclick="check(this.form)" value="Login" />
<input type="reset" value="Cancel" />
</form>
</div>
Am implementat un script ˆın care se afl ˘a funct ¸ia check() . Aceasta verific ˘a dac ˘a username-
ul s ¸i parola sunt corecte. ˆIn caz afirmativ, ne trimite pe index.html. ˆIn caz negativ, ne apare
un mesaj de eroare.
<script language="javascript">
function check(form) {
if(form.userid.value == "admin" && form.password.value == "admin") {
window.open("index.html");
window.close("login.html");
}
else {
alert("wrong Username or Password")
}
}
</script>
11

Solut ¸ia propus ˘a Implementare cod
Am creat o alt ˘a pagin ˘a html pentru aplicat ¸ia WebRTC.
Pe pagin ˘a am creat un obiect video pentru webcam, un buton pentru captur ˘a, o colect ¸ie
de opt ¸iuni, care aplic ˘a filtrul dorit, cum ar fi: grayscale, sepia, invert, blur etc. s ¸i un buton
de s ¸tergere pentru capturile efectuate.
<div class="top-container">
<video id="video">No streaming available…</video>
<button id="photo-button" class="btn btn-dark">Fa poza</button>
<select id="photo-filter" class="select">
<option value="none">Normal</option>
<option value="grayscale(100%">Grayscale</option>
<option value="sepia(100%)">Sepia</option>
<option value="invert(100%)">Invert</option>
<option value="hue-rotate(90deg)">Hue</option>
<option value="blur(10px)">Blur</option>
<option value="contrast(200%)">Contrast</option>
</select>
<button id="clear-button" class="btn btn-light">Strerge</button>
<canvas id="canvas"></canvas>
</div>
<div class="bottom-container">
<div id="photos">
</div>
</div>
Capturile sunt afis ¸ate/desenate folosind Canvas ˆın partea de jos a paginii.
12

Solut ¸ia propus ˘a Implementare cod
Am implementat un fis ¸ier de tip css pentru a integra un stil celor 2 pagini login.html si
index.html. L-am numit style.css.
Figura 3.4 : Creare fis ¸ier css
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background: #000 url(’background.jpg’);
overflow-x: hidden;
}
Figura 3.5 : Background-ul aplicat ¸iei
.navbar {
background: #333;
padding: 15px;
height: 40px;
color: #fff;
}
.navbar h1 {
text-align: center;
margin: 0;
}
.top-container {
width: 500px;
13

Solut ¸ia propus ˘a Implementare cod
margin: 30px auto ;
}
.btn {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 5px;
}
.btn-dark {
background: #333;
color: #fff;
border: #666 1px solid;
}
.btn-light {
background: #f4f4f4;
color: #333;
border: #ccc 1px solid;
}
.select {
height: 40px;
background: #333;
color: #fff;
padding: 3px;
width: 100%;
border: 1px #666 solid;
margin-bottom: 10px;
}
.bottom-container {
max-width: 960px;
margin: auto ;
padding: 10px;
}
#photos {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
}
#photos img {
width: 100%;
border: 3px #fff solid;
}
#canvas {
display: none;
}
In fis ¸ierele html integram fis ¸ierul css folosind comanda:
<link rel="stylesheet" href="style.css" />
14

Solut ¸ia propus ˘a Implementare cod
Dup˘a ce m-am ocupat de design a trebuit sa rezolv funct ¸ionalitatea aplicat ¸iei, iar pentru
asta, am implementat un fis ¸ier JavaScript.
Figura 3.6 : Creare fis ¸ier JavaScript
Declar ˘am variabilele globale.
let width = 500,
height = 0,
filter = "none",
streaming = false;
const video = document.getElementById(’video’);
const canvas = document.getElementById(’canvas’);
const photos = document.getElementById(’photos’);
const clearButton = document.getElementById(’clear-button’);
const photoButton = document.getElementById(’photo-button’);
const photoFilter = document.getElementById(’photo-filter’);
Acces ˘am camera web prin API-ul getUserMedia.
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function (stream) {
video.srcObject = stream;
video.play();
})
.catch(function (err) {
console.log(‘Error: ${err}‘);
});
Avem metoda eveniment pentru streaming atunci c ˆand acceptam permisiunea de a accesa
camera web.
video.addEventListener(’canplay’, function (e) {
if(!streaming) {
height = video.videoHeight / (video.videoWidth / width);
video.setAttribute(’width’, width);
15

Solut ¸ia propus ˘a Implementare cod
video.setAttribute(’height’, height);
canvas.setAttribute(’width’, width);
canvas.setAttribute(’height’, height);
streaming = true;
}
}, false);
Avem metoda eveniment pentru fotografiere s ¸i funct ¸ia takePicture().
photoButton.addEventListener(’click’, function (e) {
takePicture();
e.preventDefault();
}, false);
function takePicture() {
const context = canvas.getContext(’2d’);
if(width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
const imgUrl = canvas.toDataURL(’image/png’);
const img = document.createElement(’img’);
img.setAttribute(’src’, imgUrl);
img.style.filter = filter;
photos.appendChild(img);
}
}
Avem metoda eveniment pentru filtru.
photoFilter.addEventListener(’change’, function (e) {
filter = e.target.value;
16

Solut ¸ia propus ˘a Implementare cod
video.style.filter = filter;
e.preventDefault();
});
Avem metoda eveniment pentru s ¸tergerea pozelor.
clearButton.addEventListener(’click’, function (e) {
photos.innerHTML = ’’;
filter = ’none’;
video.style.filter = filter;
photoFilter.selectedIndex = 0;
});
In fis ¸ierul index.html ad ˘aug˘am comanda:
<script src="script.js"></script>
Acum, aplicat ¸ia este gata!
17

Capitolul 4
Prezentarea aplicat ¸iei
Imaginile urm ˘atoare vor prezenta modul ˆın care folosim aplicat ¸ia.
As ¸a arata prima ˆıntˆalnire cu aplicat ¸ia web.
Figura 4.1 : Prima pagin ˘a
Ne vom loga folosind ca username: admin s ¸i ca parol ˘a:admin
Figura 4.2 : Logare
18

Prezentarea aplicat ¸iei Prezentarea aplicat ¸iei
Dup˘a ce ne-am logat ne apare un pop-up dac ˘a permitem aplicat ¸iei sa acceseze camera
web. Dac ˘a nu accept ˘am, aplicat ¸ia nu face nimic.
Figura 4.3 : Prima pagin ˘a
Dup˘a ce am acceptat permisiunea, trebuie s ˘a alegem un filtru din cele enumerate.
Figura 4.4 : Filtrele camerei:Normal
Figura 4.5 : Filtrele camerei:Greyscale
19

Prezentarea aplicat ¸iei Prezentarea aplicat ¸iei
Figura 4.6 : Filtrele camerei:Sepia
Figura 4.7 : Filtrele camerei:Invert
Figura 4.8 : Filtrele camerei:Hue
Figura 4.9 : Filtrele camerei:Blur
20

Prezentarea aplicat ¸iei Prezentarea aplicat ¸iei
Figura 4.10 : Filtrele camerei:Contrast
Dup˘a ce am ales filtrul dorit, ap ˘as˘am pe ”Fa poza”. Putem observa c ˘a programul
funct ¸ioneaz ˘a s ¸i vedem capturile f ˘acute sub butoane.
Figura 4.11 : Capturi efectuate
Dac˘a vrem s ˘a le s ¸tergem, ap ˘as˘am butonul ”Sterge”.
21

Referint ¸e bibliografice
[1] G.Albeanu. Modelare s ¸i tehnci de programare ˆın realitatea virtual ˘a. In Conferint ¸a
Nat ¸ional ˘a de ˆInv˘at ¸˘amˆant Virtual , pages 33–38, 2005.
22