Multimedia - Suport de Curs Pentru Autoinstruire

ACADEMIA DE STUDII ECONOMICE BUCUREȘTI
FACULTATEA DE CIBERNETICĂ, STATIISTICĂ ȘI INFORMATICĂ

ECONOMICĂ
MULTIMEDIA
Suport de curs pentru autoinstruire
Titular disciplină: conf. univ. dr. Liviu-Adrian COTFAS

Cuprins
1. UNITATEA DE STUDIU 1 - Concepte generale, clase de aplicații multimedia ................. 4
Cuprins.................................................................................................................................... 4
1.1. Introducere.................................................................................................................. 4
1.2. Obiectivele și competențele unității de studiu ........................................................... 4
1.3. Conținutul unității de studiu ....................................................................................... 4
1.4. Dezvoltarea de aplicații multimedia cu ajutorul HTML5, CSS3, JavaScript ............... 10
1.5. Sinteza unității de studiu ........................................................................................... 11
1.6. Concepte și termeni de reținut ................................................................................. 11
1.7. Îndrumar pentru autoverificare ................................................................................ 12
1.8. Întrebări de control și teme de dezbatere ................................................................ 12
1.9. Bibliografie obligatorie .............................................................................................. 12
2. UNITATEA DE STUDIU 2 - Imaginea .............................................................................. 13
Cuprins.................................................................................................................................. 13
2.1. Introducere................................................................................................................ 13
2.2. Obiectivele și competențele unității de studiu ......................................................... 13
2.3. Conținutul unității de studiu ..................................................................................... 13
3. UNITATEA DE STUDIU 3 - Sunetul ................................................................................. 47
Cuprins.................................................................................................................................. 47
3.1. Introducere................................................................................................................ 47
2
4. UNITATEA DE STUDIU 4 - Video .................................................................................... 75
Cuprins.................................................................................................................................. 75
4.1. Introducere................................................................................................................ 75
4.7. Întrebări de control și teme de dezbatere .............................................................. 100
4.8. Bibliografie obligatorie ............................................................................................ 100
Bibliografie ............................................................................................................................. 101
3
1. UNITATEA DE STUDIU 1 - Concepte generale, clase de aplicații
multimedia
Cuprins
1.1. Introducere.................................................................................................................. 4
1.2. Obiectivele și competențele unității de studiu ........................................................... 4
1.3. Conținutul unității de studiu ....................................................................................... 4
1.4. Dezvoltarea de aplicații multimedia cu ajutorul HTML5, CSS3, JavaScript ............... 10
1.1. Introducere
Multimedia reprezintă ansamblul mijloacelor de comunicare prin care informațiile pot fi
percepute vizual şi auditiv în diferite forme.
1.2. Obiectivele și competențele unității de studiu

Obiectivele unității de studiu:
▪ înțelegerea conceptului de multimedia;

▪ cunoașterea claselor de aplicații multimedia;
▪ cunoașterea condițiilor hard / soft pentru multimedia.
Competențele unității de studiu:
▪ studenții vor putea să definească conceptul de multimedia;

▪ studenții vor cunoaște clasele de aplicații multimedia;
▪ studenții vor cunoaște condițiile hard / soft pentru multimedia.
Durata medie de studiu individual alocat unității: 2 ore
1.3. Conținutul unității de studiu
1.3.1. Evoluție și concepte generale

Multimedia reprezintă ansamblul mijloacelor de comunicare prin care informațiile pot
fi percepute vizual şi auditiv în diferite forme. Multimedia din punct de vedere informatic
4
este o combinaţie de: text, imagine, sunet, grafică, animaţie, video accesibilă utilizatorului
prin intermediul sistemului de calcul.
Dezvoltarea multimediei s-a realizat datorită unui proces cunoscut sub denumirea de
Revoluție Digitală care s-a bazat pe două mari descoperiri:
▪ Conversia semnalului din analog în digital; proces care genera un volum mare de
date, deci necesita un spațiu mare de memorie pentru stocarea resurselor
multimedia în format digital;
▪ Dezvoltarea tehnicilor de compresie / decompresie a datelor.
Multimedia se regăseşte la intersecţia mai multor domenii de activitate:
▪ Mass media: Ziarul, revista ( considerate ca fiind primele document multimedia)
▪ Telecomunicţiile – aplicatii pe baza de streamming, prezentari online, televiziune
pe internet, etc.
▪ Informatică (aplicatii multimedia, baze de date multimedia)
Procesul de compresie / decompresie a datelor nu este specific resurselor multimedia.

Înainte de existența multimediei se comprimau / decomprimau date alfanumerice
existente în diferite tipuri de documente. Odată însă cu apariția multimediei se dezvoltă
algoritmi de compresie / decompresie care realizează procesul cu pierdere de informație.
Pierderea de informație se manifestă prin faptul că la decompresie nu se obține un rezultat
identic cu ceea ce a intrat în procesul de compresie. Acest lucru nu numai că este posibil dar
cei mai eficienți algoritmi care realizează compresia / decompresia resurselor multimedia sunt
cei care fac acest lucru cu pierdere de informație (JPEG, MPEG etc). Pierderea de informație,
în procesul de compresie, este una controlată adică resursa multimedia nu pierde din calitate.
Este cunoscut faptul că orice algoritm de compresie identifică într-un volum de date o
anumită redundanță informațională pe care urmează să o elimine.
In general, algoritmii de compresie identifică o anumită redundanță în volumul de date

pe care o elimină. Procesul de compresie a datelor multimedia are particularități ce derivă
din natura acestor date: o Se poate realiza cu pierdere de informaţie (cele mai eficiente
tehnici de compresie a datelor multimedia sunt acelea care realizează compresia /
decompresia cu pierdere de informaţie, de exemplu: JPEG pentru compresia imaginilor
BITMAP, respectiv MPEG pentru audio - video); Pierderea de informaţie se manifestă prin
faptul că, la decompresie nu se obţin exact aceleaşi date care au intrat iniţial în procesul de
compresie. Această pierdere este una controlată şi nu deteriorează calitatea datelor, ea este
posibilă pentru că fiinţa umană are limite în ceea ce priveşte percepţia vizuală (adâncime de
culoare) şi auditivă (frecvenţe ale sunetului).
5
Procesul de compresie necesită mult mai mult timp decât cel de decompresie.
Tehnologii care au facilitat apariţia şi dezvoltarea multimediei ca tehnologie:

Tehnologii de dezvoltare a perifericelor care se atașează unui sistem de calcul; deoarece
resursele multimedia provin, în marea lor majoritate, din afara sistemului de calcul;
Tehnologii de stocare a informaţiilor – suportul optic de stocare a informaţiilor (CD, DVD),

stick-uri de memorie, HDD extern, unităţi de Blue-Ray; Se poate spune că apariţia unităţii de
CD a determinat o explozie a aplicaţiilor multimedia care astfel au putut fi raspândite
publicului larg;
Tehnologii de transfer la distanţă a datelor, materializate prin reţele de calculatoare

având lărgimi de bandă din ce în ce mai mare;
Tehnologii de compresie/decompresie a datelor, în sensul că, echipamente de procesare

a resurselor multimedia implementează compresia / decompresia la nivel hardware având pe
plăci chip-uri specializate în acest sens. De exemplu, unitatea de DVD realizează decompresia
MPEG2 la nivel hardware.
Alte concepte cu care operează multimedia:

o Concepte ce privesc navigarea si parcurgerea de documente multimedia:
HYPERTEXT – se folosesc pt parcurgerea non secventiala a unui document,
(urmand o alta logica decat cea secventiala). In acest caz elementul de legatura
este de tip text.
HYPERMEDIA – similar hypertext , este un element de legătură diferit de un

text ( poate fi o imagine, grafic, secvenţă video).
Principala aplicaţie care se bazează pe hypermedia este World Wide Web
(WWW).
o Prin sistem multimedia se înţelege o colecţie de date şi aplicaţii multimedia cu anumite
caracteristici:
Componentele sistemului accesibile prin intermediul sistemului de
calcul;
Date multimedia sunt în format digital (NU analogic);
Elementele sistemului sunt integrate, se invocă dintr-o unică interfaţă;
Sistemul multimedia are o interfaţă cu un grad ridicat de interacţiune cu
utilizatorul.
o Baze de date multimedia – sisteme care stochează şi procesează tipul media în cadrul
bazelor de date. Sunt SGBD-uri care au tipuri predefinite cum ar fi image la MS SQL
6
server sau componente care permit procesarea tipuli media ORACLE prin componenta
InterMedia, sau SGBD-uri dedicate pentru multimedia cum ar fi Jasmine.
o Sunt conturate doua directii privind dezvoltarea aplicaţiilor multimedia:
▪ Multimedia authoring – dezvoltă aplicaţii multimedia folosind produse software de

creaţie multimedia: o FLASH, Director o Multimedia Toolbook
Ele includ o varietate de componenete preprogramate ce permit recunoaşterea mai

multor formate de resurse multimedia, playere, viewere de imagini, instrumente
pentru generarea animaţiilor, pentru implementarea conceptelor de hypertext,
hypermedia etc. fără ca dezvoltatorul să cunoască modul cum ele au fost construite.
Accentul cade mai mult pe scenariul de derulare a aplicaţiei, pe sincronizarea
elementelor în prezentare.
▪ Multimedia programming – foloseşte medii de programare (.NET, medii bazate pe

Java), funcţii de nivel scăzut (API - Application Programming Interface), biblioteci
specializate precum şi alte elemnete care necesită un efort de programare
considerabil.
1.3.2. Clase de aplicații multimedia

Un prim criteriu de clasificare îl constituie domeniul care utilizează aplicaţii multimedia:
o Instruire, educaţie, învăţare; cele mai utilizate fiind tutorialele, aplicatii de
elearning, encarta.
o Publicitate, reclamă; aplicaţiile semnificative pentru acest domeniu sunt cele de
prezentare.
o Medicină, sunt echipamentele periferice: ecograful, computer tomograf, etc.

o Industrial, de exemplu instrumentele de proiectare grafica.
o Entertainment, de exmplu motoarele grafice de simulare a realitatii, realitate
virtuala.
o Sistme informatice geografice GIS. Hărţile digitale rezolva o gama variată de
probleme cum ar fi: probleme de transpot, cadastru, mediu, de localizare de
dezvoltare regională, etc. Produsele comerciale sunt Google Earth, Google Map,
iar cele profesionale ArcGIS, Mapinfo.
o Comunicaţii prin aplicatiile de tip videoconferinţă sunt din ce in ce mai utilizate,

de exemplu: skype, Netmeeting.
7
După destinaţie şi interactivitate:
o Aplicaţii de interes public şi personal de exemplu: infochioscurile, jocurile pe

calc, video on demand.
o Interactive / non interactive. La cele interactive utilizatorul intervine in modul
de derulare a aplicatiei în timp ce in cazul celor non interactive utlizatorul nu
intervine in derularea aplicatieie (de exemplu prezentarile care curg dupa un
scenariu fix) o Locale ( rulează pe desktop) / telematice (rulează aplicaţii client
server WEB). Aplicatiile locale ruleaza pe echipamentul local ceea ce presupune
utilizarea resurselor locale, in contrast cu aplicatiile telematice care folosesc
foarte mult echipamentele server (instalate la distanta) si foarte putin resursele
locale.
1.3.3. Condiții hardware și software pentru multimedia

Condiţii HARD. Ne axăm pe prezentare de echipamente
periferice:
o Dispoz periferice pentru achiziţia de imagini fixe :
✓ SCANNER transforma informatia luminoasa in informatie
electrică, iar ulterior aceasta este convertita si salvata sub forma
digitala. In legatura cu aplicatii de tip OCR (Object charcater
Recognition) rezulta documente in format editabil. In prezent se
dezvolta tehnologia de tip ICR (Intelligent Character Recognition)
care permite recunoasterea scrisului de mana. Tipurile de
scannere sunt Flatbed – paginile se aseaza pe o suprafata de

sticla. Capul de scanare se deplaseaza sub sticla de-a lungul paginii.
Handy – este folosit prin miscarea manuala a capului de
scanare deasupra paginii de scanat.
Rotative – pagina de scanat este fixata pe un cilindru rotativ
transparent. Acesta se roteste cu o viteza mare, iar cu ajutorul
unui fascicul luminos se preia imaginea scanata.
8
✓ Aparat foto digital foloseste lentile asemanatoare aparatului foto
clasic pentru transformarea informatiei luminoase in informatie
electrica. Pentru a transfera imaginile sistemului de calcul are
nevoie de un driver si o conexiune cu un port USB.
o Placa de sunet actioneaza ca un convertor de semnal audio din analog in
digital pe input-uri (microfon, etc), respectiv din digital in analog pe
outputuri. In ultima perioada placa de bază incorporeaza o placa de sunet.
Producatorii consacrati sunt Creative, Realtek, C-Media.
o Achiziţii de secvenţe VIDEO:

✓ Placa de achizitie si numerizare video (placa de captura) actioneaza
simila unei placi de sunet, numai ca aici se refera la semnal video,
nu la cel audio- depinde de capabilitatile placilor. Si placile video
normale pot face acest lucru; dar in general doar preiau, nu si
transmit semnale video. Altele pot prelua semnalul video pe tipuri
de semnal. Altele sunt capabile sa preia mai multe fluxuri simultan
(procesari in direct intre cele 2 fluxuri; de exemplu: transmisiune in
direct din mai multe locuri, cu efecte de tranzitie intre ele, etc)
✓ WEB Cam nu face conversie de semnal, acesta fiind captat direct in
format digital.
✓ Placa TV tunner este instrumentul capabil sa preia semnal din
antena TV sa il decodeze si sa il furnizeze sub forma de imagine pe
monitor. Unele tunner-e po avea si o iesire pentru putea fi conexat
cu alte instrumente de procesare video.
Condiţii SOFT, ne axam pe prezentarea componenetelor software:

▪ Driverele, reprezinta componenentele software necesare pentru controlul
periferilor. In general acestea sunt furnizate de catre producatorii echipamentelor.
▪ Software multimedia ca extensie a sistemului de operare, pentru ca simpla instalare
a sistemului de operare furnizeaza si o componenta software cu ajutorul careia se
pot manipula resurse media
✓ Windows Media Player pentru Microsoft formatele standard
9
(necomprimat WAV si AVI si comprimat WMA WMV)
✓ Quick Time (pentru MAC, sunt mai performante AIFF si MOV) o
Produse software multimedia specializate pe medii de comunicare,
fac parte din software utilitar
✓ Achiziţie prelucrare imagini: in general au unelte pentru bitmap cit

si pentru vectorial, genereaza si animatie, pornind de la cadre cheie,
apoi generand cadrele intermediare in raport cu factorul timp
Adobe PhotoShop
Fire Works
CORELL DRAW
CORELL IMAGINE CORELL TRACE
✓ Achiziţii prelucrare sunet:
Adobe Audition Sound Forge
✓ Achiziţii prelucrare / editare video

Adobe Premier
Movie Maker
▪ Produse software pentru creație multimedia după filozofia de organizare a proiectului

multimedia (metafora în programare) se clasifica in:
✓ Soft de creație multimedia ce-şi elaborează proiectul pe principiul
cărții (utilizează dispunerea elementelor în pagină). Ex: TOOLBOOK
INSTRUCTOR
✓ Soft de creaţie multimedia ce-şi elaborează proiectul de-a lungul
axei timpului; de exemplu: FLASH, DIRECTOR
✓ Soft de creaţie multimedia ce-şi dezvoltă aplicaţia pe baza unei

diagrame de flux. Ex: AUTHORWARE (Macromedia a fost cumpărată
de ADOBE)
1.4. Dezvoltarea de aplicații multimedia cu ajutorul HTML5, CSS3, JavaScript

Standardul HTML5 oferă un suport mult îmbunătățit pentru multimedia web, prin
includerea elementelor precum audio, video, canvas. Exemple de tipuri de elemente
multimedia suportate includ:
10
▪ text
▪ imagini
▪ animație
▪ grafică raster - elementul <canvas>
▪ grafică vectorială – elemental <svg>
▪ 3D graphics - WebGL
▪ audio – elemental <audio>
▪ Video – elemental <video>
Dezvoltarea aplicațiilor web se realizează cu ajutorul limbajelor HTML, JavaScript și CSS.
1.4.1. Limbajul JavaScript

Este un limbaj dinamic, bazat pe obiecte. În cazul aplicațiilor web poate fi utilizat pentru
operațiuni precum: manipulare noduri DOM, tratare evenimente, procesare, comunicare la
distanță. Secvențele de cod JavaScript se pot include într-o aplicație web prin intermediul tag-
ului <script>, fie direct în cadrul paginii (Figura 1-1) sau prin intermediul unui fișier extern
(Figura 1-2).
<script type="text/javascript">
// cod JavaScript …..
let test = 10;
</script>
Figura 1-1. Includere secvență JavaScript în cadrul unei pagini
<script type="text/javascript" src="lib/test.js"></script>

Figura 1-2. Includere secvență JavaScript prin intermediul unui fișier extern
1.5. Sinteza unității de studiu

Multimedia reprezintă ansamblul mijloacelor de comunicare prin care informațiile pot
fi percepute vizual și auditiv în diferite forme. Din punct de vedere informatic este o
combinație de: text, imagine, sunet, grafică, animație, video accesibilă utilizatorului prin
intermediul sistemului de calcul. Dezvoltarea multimediei s-a realizat datorită unui proces
cunoscut sub denumirea de Revoluție Digitală. Aplicațiile multimedia pot fi clasificate în
funcție de domeniu, în funcție de destinație și de nivelul de interactivitate. Multimedia
presupune atât condiții hardware, cât și condiții software.
1.6. Concepte și termeni de reținut
multimedia compresia datelor
decompresia datelor HYPERTEXT
HYPERMEDIA condiții hardware
condiții software software pentru creație multimedia
software multimedia
11
1.7. Îndrumar pentru autoverificare
Aplicația 1.1. Enumerați tehnologiile care au facilitat apariția și dezvoltarea multimediei ca
tehnologie.
Răspuns:
Tehnologii care au facilitat apariția și dezvoltarea multimediei ca tehnologie sunt:

tehnologii de dezvoltare a perifericelor, tehnologii de stocare a informațiilor, tehnologii de
transfer la distanță a datelor, tehnologii de compresie/decompresie a datelor.
Aplicația 1.2. Explicați diferența dintre conceptele de hypertext și hypermedia.
Răspuns:
HYPERTEXT – se folosesc pt parcurgerea non secventiala a unui document. In acest caz

elementul de legatura este de tip text. HYPERMEDIA – similar hypertext , este un element
de legătură diferit de un text ( poate fi o imagine, grafic, secvenţă video). Principala aplicaţie
care se bazează pe hypermedia este World Wide Web (WWW).
1.8. Întrebări de control și teme de dezbatere

1. Ce este Multimedia?
2. În ce context este recomandabilă utilizarea aplicațiilor de creație multimedia care

elaborează proiectul pe principiul cărții?

elaborează proiectul utilizând o axă a timpului?

elaborează proiectul pe baza unei diagrame de flux?
1.9. Bibliografie obligatorie

▪ Dardala, M., Smeureanu, I., Reveiu, A. Tehnologii Multimedia, Editura ASE,
Bucuresti 2008
▪ Smeureanu,I., Drula, G., Multimedia, concepte si practica, Editura Cison, 1997
▪ Cotfas, L.-A., Suport de curs și seminar, 2020, https://github.com/liviucotfas/ase-
multimedia, România
▪ http://en.wikipedia.org/wiki/Lempel-Ziv-Welch
▪ http://en.wikipedia.org/wiki/Tagged_Image_File_Format
▪ http://ro.wikipedia.org/wiki/MP3
12
2. UNITATEA DE STUDIU 2 - Imaginea
Cuprins
2.1. Introducere................................................................................................................ 13
2.1. Introducere
O imagine este o suprafața de obicei dreptunghiulara caracterizata, la nivelul oricărui
punct al ei, de o anumita culoare. Exista doua modele de culoare: aditiv și substractiv.

▪ cunoașterea formatelor de reprezentare a imaginilor;

▪ cunoașterea conceptului de animație;
▪ înțelegerea algoritmilor de compresie a imaginilor.
▪ studenții vor cunoaște avantajele și dezavantajele imaginilor raster;

▪ studenții vor cunoaște avantajele și dezavantajele imaginilor vectoriale;
▪ studenții vor cunoaște algoritmii utilizați pentru compresia imaginilor;
▪ studenții vor putea implementa aplicații web care să utilizeze imagini raster și
vectoriale.

punct al ei, de o anumita culoare. La modul ideal, culoarea variază in mod continuu in oricare
direcție. Din păcate, in sistemele numerice, nu se pot utiliza mărimi care variază continuu ci
doar forma discretizata a acestora.
13
2.3.1. Formate de reprezentare a imaginilor
Exista doua modele de culoare:
1. Model aditiv de culoare (reprezentativ RGB). In modelul aditiv se porneste de la

culoare neagra si se adauga culori (rosu, verde si albastru) ajungandu-se pana la
culoarea alb, figura 2.1. Se mai numeste si modelul bazat pe lumina. In acest model
lipsa semnaului produce negru. Practic orice culoare este compusa din rosu, verde
si albastru prin stabilirea valorilor acestora. Fiecare culoare poate lua valori de la 0
la 256, rezultand 16.777.216 de culori posibile.
Figura 2.1. Reprezentarea imaginilor color în spaţiul RGB
2. modelul substractiv (reprezentativ CMYK) se mai numeste si modelul bazat pe

pigmenti. Este exact opusul modelului aditiv in sensul ca lipsa semnalului
(pigmentului) produce alb. Denumirea CMYK vine de la initialele cyan, magenta şi
yellow, iar K reprezinta negru. Este un model de suprapunere a celor 4 culori,
figura
14
Figura 2.2. Reprezentarea imaginii în CMYK
Diferenta intre RGB si CMYK
▪ diferenta intre cele doua modele de culoare: una este substractiva (CMYK) iar
cealalta aditiva (RGB).
▪ RGB reda o imagine emisa de lumina, iar CMYK o imagine emisa prin reflexie.
▪ este imposibila reproducerea unei imagini de pe monitor (RGB) in mod identic pe
hartie (CMYK).
▪ culorile in RGB sunt exprimate cu valori intre 0 si 255. ex albastru: R:0 G:0 B:255
15
Figura 2.3. Diferenţa dintre modelele de reprezentare RGB şi CMYK
In orice prezentare multimedia, elementul imagine este aproape nelipsit, întrucât

impactul vizual este foarte puternic pentru om. După cum se ştie, calitatea imaginilor, la
vizualizare pe ecran, este condiţionată de rezoluţia de afişare şi de capacităţile grafice ale
calculatorului şi monitorului. Problemele caracteristice acestui element al multimediei sunt
deja cunoscute din alte domenii, unde el deţine un rol primordial, ca de exemplu în
proiectarea asistată de calculator, CAD.
Există două tipuri principale de imagini grafice:
▪ bitmap - potrivită pentru imagini cu detalii fine, cum ar fi picturi sau fotografii. Numită
și grafică raster. Stochează informația despre culoarea fiecărui pixel.
▪ vectorială - utilizat pentru desene grafice, de la desene și logo-uri simple la creații

artistice sofisticate. Utilizează descrieri matematice.
Imaginea bitmap (matriceală)

Uneori background-ul unei prezentări sau producţii multimedia este o imagine fixă,
obţinută prin scanare. Aceasta este exemplul tipic de imagine, denumită bitmap, descrisă
ca o matrice informaţională simplă, formată din puncte individuale. în alte situaţii, acest
element se combină cu textul sau cu imaginea video, completând informaţia transmisă. De
regulă, orice imagine captată de la o sursă externă este o imagine bitmap, secvenţele de
biţi ce codifică această imagine reprezentând punctele de pe ecran şi culorile asociate lor.
Astfel, o imagine grafică raster este formată dintr-o matrice dreptunghiulară de rânduri
și coloane compuse din pixeli.
Un pixel este zonă pătrată (sau ocazional rectangulară) de culoare, reprezentând un

singur punct din imagine. Toți pixelii dintr-o imagine raster au exact aceeași dimensiune.
16
Fiecare specifică o singură culoare stocată utilizând de cele mai multe ori 24 de biți. Numărul
total de pixeli dintr-o imagine raster este fix. Pentru a mări o imagine raster este necesară
adăugarea de pixeli suplimentari. Similar, anumiți pixeli trebuie eliminați le reducerea
dimensiunilor unei imagini raster. Lățimea și înălțimea unei imagini raster sunt determinate
de câte pixeli conține fiecare rând și coloană.
Figura 2-1. Pixeli într-o imagine raster
Prin utilizarea facilității de zoom disponibilă în programele de grafică, pixelii

individuali devin vizibili sub formă de pătrate, așa cum se poate observa în Figura 2-2.
Figura 2-2. Observarea unei imagini grafice cu ajutorul facilității de zoom
Următoarele caracteristici descriu imaginile raster:
17
▪ dimensiunea în pixeli - descrieți dimensiunea unei imagini raster, exprimată ca
numărul de pixeli de-a lungul axei x (lățime) de numărul de pixeli de-a lungul axei y
(înălțime). Ex: 800px * 600 px.
▪ număr de pixeli - numărul total de pixeli dintr-o matrice raster. Pentru a determina
numărul de pixeli, multiplicați dimensiunile orizontale și verticale ale pixelilor. Ex: o
imagine cu dimensiunea de 30 * 18 pixeli conține 540 pixeli.
▪ adâncimea culorii (rezoluția culorii) - măsură a numărului de culori diferite care pot fi
reprezentate de un pixel individual. Numărul de biți alocați fiecărui pixel sau
adâncimea de biți determină rezoluția culorii. 8-biți (256 culori), 24 biți (16.8 millioane
de culori). Un desen folosind 16 culori distincte necesită doar 4 biți pe pixel. Utilizarea
unui cod cu o adâncime de biți mai mare produce un fișier mai mare, fără creșterea
calității.
Reprezentarea bitmap se foloseşte în principal în aplicaţii orientate pe fotografii. De

exemplu se pot realiza baze de date de imagini pe un CD-ROM, ce pot depozita aproximativ
400 de astfel de imagini, full-color şi de înaltă rezoluţie.
Imaginile în format bitmap sunt emise în general de către periferice, care lucrează
în mod linie (raster). Astfel imaginea vizualizată pe ecran este o imagine bitmap digitală,
stocată în memoria video şi actualizată o dată la 60 de secunde sau mai repede, în funcţie
de viteza de scanare a monitorului.
Codajul bitmap al imaginii este considerat ca fiind unul sărac in informaţie, în sensul
că semantica imaginii nu este luată în considerare adică obiectele care compun imaginea
nu se pot distinge în mod individual. Reprezentarea matriceală a imaginii conservă toate
punctele imaginii, daca dacă nu i se aplică o metodă de comprimare.
De asemenea, o deficienţă a acestei reprezentări, de care trebuie sa se ţină seama
în proiectele multimedia, constă în aceea, că nu se pot adapta unei scări variabile de
vizualizare. Astfel, orice mărire a dimensiunii imaginii este însoţită de o degradare vizuală.
Pe de altă parte operaţia micşorare a dimensiunii imaginii, adică de grupare a pixelilor, chiar
d" uneori dă rezultate satisfăcătoare, nu este simplu de realizat.
Modificarea imaginilor bitmap se poate realiza totuşi, prin programe de editare,
specifice, cum ar fi Adobe PhotoShop. Aici se pune problema dacă imaginea este cu nivele
de gri sau în culori. Imaginea în culori numerizată prin scanare nu este descompusă în cele
patru culori de bază, ci doar trei culori, care se combină pentru a da o anumită tentă unui
punct imagine. Această trecere făcută automat necesită uneori retuşul electronic al
rezultatului, pentru a fi cât mai aproape de original. Aceeaşi descompunere cromatică este
folosită şi pentru afişarea imaginii în culori, pe ecran.
18
Morfismul este un efect de modificare a imaginilor fixe, constând transformări
animate şi repetate, insesizabile ochiului, şi realizand combinarea între două imagini, una
de început şi alta finală, astfel încât una din ele va apare ca "dizolvată" în cealaltă.
Reprezentarea imaginii sub formă de matrice are numeroase dezavantaje, datorită
păstrării tuturor punctelor imaginii. Orice metodă de compresie a acestui tip de imagine
duce la o degradare a acesteia proporţională cu rata de compresie.
Cu toate acestea, există numeroase formate de fişiere care păstreaza imaginea sub
forma unei matrici de puncte.
Formatul PCX (PC PaintBrush File Format) este un format recunoscut pe platforma
Windows - PaintBrush. El poate trata imaginea codificată pe 8 biţi (256 de culori), de
dimensiune maximă 64000 * 64000 pixeli, stocarea ei făcându-se pe linii şi pe planuri.
Se parcurg toate planurile unei linii, apoi se trece la planurile celei de-a doua linii până
când sunt parcurse toate. Algoritmul de compresie utilizat de acest format este RLE (Run
Lenght
Encoding) pentru eliminarea informaţiei redundante.
Formatul TIFF (Tag Image File Format) este foarte cunoscut pentru stocarea şi
transferul imaginilor scanate. Datorită lui s-a răspândit foarte mult imaginea matriceală.
Acest format este foarte puternic în ceea ce priveşte codificarea imaginilor şi foloseşte
mai mulţi algoritmi de compresie: RLE, LZW (Lempel-Ziv-Welch) sau JPEG. Majoritatea
programelor pot gestiona acest tip de format de fişier. Formatul TIFF deţine şi avantajul de
a fi recunoscut pe toate tipurile de platforme, ceea ce face posibil transferul de la una
la alta, fără dificultăţi.
Formatul BMP (Microsoft Windows Bitmap) este formatul tradiţional care stocheză
imaginea bitmap, definit de Microsoft pentru interfaţa sa grafică. Imaginea stocată
poate fi comprimată sau nu RLE, poate fi monocromă sau în culori pe 24 sau 32 de biţi.
Acest format este recunoscut şi în mediul OS/2.
Formatul ICO (Icon Resource File) este un format bitmap, pentru imagini de
dimensiune mică şi este folosit de Windows pentru reprezentarea icon-urilor program.
Acest tip de fişier acceptă definiţia unei imagini în numeroase rezoluţii şi în culori
diferite.
Formatul JPEG (Joint Photographics Experts Group) este un format pentru imaginile
bitmap, comprimate conform standardului JPEG. Avantajul său constă în aceea că deţine
19
rate de compresie JPEG diferite, definite chiar de utilizator, în funcţie de spaţiul pe hard
disc sau în funcţie de calitatea imaginii ce se doreşte a fi obţinută. Aceste rate de
compresie pot fi foarte mari fără a pierde din calitatea imaginii. Formatul JPEG s-a dorit
a fi în acelaşi timp un standard al unui tip de compresie şi a unui format de fişier.
Formatul GIF (Graphics Interchange Format) este un format foarte răspândit şi este
folosit pentru transferul de imagini bitmap, de maxim 64K x 64K, între noduri situate la
distanţă, datorită ratelor mari de compresie pe care le acceptă. Acest format a fost
dezvoltat de CompuServe pentru a facilita tranzitul informaţiilor grafice în domeniul
telecomunicaţiilor. El permite o rată avantajoasă de comprimare prin metoda LZW, iar
imaginea este analizată linie cu linie.
PNG (Portable Network Graphics), format bitmap construit ca o îmbunatatire a
formatului GIF în sensul ca permite transparenta si are o rata de compresie mai buna
decât a formatului GIF;
Formatul DIB (Device Independent Bitmap) este un format de tip bitmap al unui fişier
imagine, frecvent întâlnit în enciclopediile tematice multimedia. Poate exista ca format
de sine stătător sau poate fi ascuns într-un fişier de format RIFF (Resource
Interchange File Format). Pentru aplicaţiile sub Windows este preferat acest format.
Fişierul PJFF DIB mai este recunoscut şi după extensia RDI.
Imaginea vectorială
Imaginea vectorială este construită din elemente geometrice (linii, curbe,
poligoane, elipse etc.) care definesc obiectele grafice numite şi vectori. Astfel de imagini
sunt stocate prin descrierea lor, prin prisma elementelor geometrice ce le compun. Din
acest motiv ele ocupă mai puţin spaţiu de memorie în comparaţie cu imaginile bitmap dar
devin semnificative când imaginea abundă de elemente grafice. Editarea imaginilor
vectoriale se face la nivelul obiectelor grafice ce compun imaginea.
Imaginile vectoriale sunt independente de scala de vizualizare, în sensul că, aplicând zoom
pe imagine, aceasta nu se distorsionează deoarece ea se retrasează la o scală mai mare sau
mai mică.
Aceste tipuri de imagini sunt mai puţin utilizate în practică deoarece au ca principal
neajuns faptul că nu pot reda fidel realitatea deoarece nu tot ce există în lumea
înconjurătoare se poate reprezenta prin elemente geometrice.
O teorie bine cunoscută care are ca scop reprezentarea elementelor din realitate
prin imagini vectoriale este teoria Fractală (Fractalii). Prin fractal se înţelege o figură
geometrică fragmentată care poate fi divizată în părţi astfel încât fiecare parte să fie o
20
aproximare a întregului. Această definiţie descrie şi modul recurent în care fractalii sunt
generaţi. In figura
2.1 este prezentat un fractal din natură şi anume frunza de ferigă.
Cele mai cunoscute formate vectoriale sunt:

DXF (Drawing Exchange Format) este formatul vectorial lansat de firma Autodesk
pentru produsul software de instruire asistată de calculator AutoCAD;
EPS (Encapsulated Post Script) este formatul firmei Adobe pentru imagini
vectoriale şi se bazează pe un limbaj de descriere numit Post Script;
SHP (Shapefile) este formatul firmei ESRI pentru descrierea datelor spaţiale de tip:
punct, polilinie şi poligon, utilizat la reprezentarea acestora în sisteme informatice
geografice (GIS).
Figura 2.4 Fractal ferigă
Indiferent de formatul de reprezentare al imaginii, pe monitorul calculatorului ea este

afişată punct cu punct (pixel cu pixel).
21
2.3.2. Animația
Pentru prima dată dinamismul la nivel vizual a fost redat prin intermediul sistemelor
de calcul sub formă de animaţie. Dezvoltarea tehnologica este factorul cel mai important
care a permis utilizarea componentei video la scara larga. Aceasta componeneta este cel
mai spectaculos element al tipului media.
Atât animaţia cât şi video digital, crează impresia de mişcare printr-o succesiune de
imagini fixe derulate la o anumită viteză. Această viteză trebuie să fie suficient de mare
atunci când mişcarea este realizată pe ecranul calculatorului. Exploatând un fenomen
biologic cunoscut sub denumirea de "persistenţa viziunii", prin care un obiect văzut de
ochiul uman rămâne lipit pe retină pentru încă un timp scurt după vizualizarea sa, se
permite ca o serie de imagini care se modifică foarte uşor, dar foarte rapid, una dupa alta,
să pară legate într-o iluzie vizuală a mişcării. Viteza cu care fiecare cadru este înlocuit cu
următorul este ceea care crează senzaţia de mişcare. Acesta ar fi principiul animaţiei, care
constă în modificarea rapidă a imaginii vizualizate, adică modificarea rapidă a locului unui
obiect sau a formei şi dimensiunilor sale.
Stocarea numerică a acestei mişcări impune reţinerea elementelor independente ce

compun mişcarea, în conformitate cu un parametru fixat, timpul. în mod obişnuit,
elementele variabile se stochează împreună cu parametrii lor temporali, folosind formate
independente, construcţia ansamblului pornind de la formatele grafice fixe.
Se poate aprecia că tehnicile de animaţie au fost prima sursă a acţiunii dinamice în

prezentările multimedia. încercând să copieze cât mai bine lumea reală, calculatorul poate
reda animaţia folosind conceptele procedurale şi logice folosite în animaţia pe celuloid.
Aceasta este tehnica de animaţie care foloseşte în redarea mişcării, cadrele cheie. Cadre
cheie sunt considerate numai cadrul cu care se începe acţiunea şi cadrul cu care se încheie
aceasta. Mişcarea este sugerată în fapt, prin procesul de tweening, adică de seria celorlalte
cadre, care se derulează între aceste două cadre cheie. In plus, animarea unei acţiuni cere
calcularea numărului de cadre intermediare, precum şi stabilirea căii pe care o urmează
acţiunea.
Viteza de deplasare a unui obiect pe ecran este influenţată de dimensiunea acestuia,
în sensul că un obiect de dimensiune mică lasă impresia unei mişcării mai rapide, datorită
consumului mai mic de resurse (memorie citită şi scrisă, timp de transfer, volum de date
transferate). în schimb, obiectele de dimensiuni mari nu pot fi animate cu viteze mari
datorită consumului mare de timp, astfel încât pentru o viteză apropiată de mişcarea reală
se preferă un număr mai mic de paşi intermediari.
O altă tehnică prin care se poate reda mişcarea cu ajutorul calculatorului, este legată
de procesul de inking. Furnizarea unui traseu de animaţie se bazează pe metode de calcul
a valorilor pixelilor RGB, pe metode de determinare a limitelor obiectelor dintr-o scenă şi
22
de combinare a culorilor lor, astfel încât să se producă anumite efecte speciale, vizuale şi
de translaţie. Această tehnică obţine mişcarea ca urmare a realizării acestor efecte speciale.
Cele mai multe dintre software-urile authoring furnizează unelte specifice pentru
crearea animaţiei prin diferite tehnici, direct în proiectul în lucru. Aceste tehnici sunt în
general orientate asupra cadrelor sau asupra obiectelor din cadre. Folosindu-se de aceste
mijloace, se poate crea animarea unui text sau a unei imagini fixe, mai ales folosite în
prezentările multimedia. în fapt, elementele multimedia se pun într-o anumită secvenţă
prin cadrele în mişcare. Elementele de la care se porneşte în crearea animaţiei pot fi de
asemenea şi fişiere importate, asupra lor putându-se apoi aplica efecte speciale sau diferiţi
algoritmi. Ca o concluzie pentru realizarea acestui element al multimediei, putem enumera
câteva dintre caracteristicile sale:
- secvenţierea şi trasarea cadrelor intermediare, care redau senzaţia de mişcare;
- modificarea formei sau dimensiunilor obiectelor, care redau mişcarea;
- estomparea efectului de anti-aliasing, ştiind că se porneşte în general de la un element

format din puncte imagine;
- crearea de efecte speciale, vizuale şi de translaţie;
- modificarea scării de afişare a obiectelor în cadre;
- modificarea poziţiei obiectelor, deplasarea acestora pe direcţii şi trasee stabilite.
Imaginea animată este recunoscută în aplicaţii sub diferite formate de fişiere. Cele mai
cunoscute formate de fişiere ce conţin animaţie bitmap sunt GIF, FLI şi FLC (Animation
Flic). Un alt format pentru stocarea imaginii animate sau pentru video comprimat, este
RLE.
Acest format este utilizat şi recunoscut de numeroase editoare grafice, furnizate mai ales
împreună cu Video for Windows.
2.3.3. Compresia imaginilor

Termenul de compresie a imaginilor (uneori numit si codare a imaginilor) se referă la o
clasă largă de tehnici şi metode al căror scop este reprezentarea unei imagini date cu un
număr cât mai mic de biţi (mai mic decât numărul de biţi al reprezentării inițiale).
Aceasta este necesară la reprezentarea în format numeric a imaginilor (în scopul

transmiterii sau stocării) deoarece consumă o cantitate mare de informație.
Aceasta latura se refera la reducerea volumului de date pentru stocare şi transfer si se

datorează tehnicilor de comprimare şi decomprimare. Compresia se aplică tuturor tipurilor
23
de date: textuale, grafice, vectoriale, imagini bitmap, imagini fixe sau animate şi sunet. In
conformitate cu specificul fiecărui tip de dată, se aleg algoritmi potriviţi, specifici sau normaţi.
1. Algoritmul de codare Huffman constă în a căuta informaţia redundantă şi în a o

codifica în funcţie de frecvenţa sa de apariţie. Astfel, baiţi sau grupuri de baiţi care
apar mai des se codifică pe un număr mai mic de biţi, corespondenţa dintre aceste
informaţii codificate şi codul propriu-zis ţinându-se într-un tabel de corespondenţă,
tabel care este necesar receptorului pentru a decodifica informaţia. Această tehnică
este folosită nu numai pentru codificarea imaginilor, în special a imaginilor
mononcrome, ci şi pentru codificarea datelor textuale. Codajul propriu-zis este
precedat de o analiză a datelor şi de calculul frecvenţelor de apariţie.
2. Compresia RLE (Run Length Encoding) este destinat compresiei imaginilor si este
avantajos în cazul datelor care conţin secvenţe lungi şi puţine valori diferite. Pentru o
imagine în culori codificarea se face prin identificarea unei culori, apoi prin indicarea
acesteia şi a numărului de pixeli din această culoare. Raportul de compresie obţinut
prin această metodă variază de la imagine la imagine, nefiind însă foarte mare.
3. LZW (Lempel, Ziv, Welch) este deja foarte cunoscut şi este aplicat prin intermediul
utilitarelor ARC, PKZIP sau LHARC, precum şi al numeroaselor filtre ce recunosc
diferite formate de fişiere. Algoritmul se bazează pe o tabelă de corespondenţă între
date şi adresele lor, tabelă ce se construieşte pe măsură ce codificarea avansează. La
reconstituirea datelor, receptorul procedează în mod simetric pentru reconstituirea
dicţionarului, utilizând acelaşi algoritm. Deşi se bazează tot pe un tabel ca şi codajul
Huffman, acest codaj nu necesită o analiză în prealabil a datelor de codificat. Pentru
a da un randament sporit, metodele se pot combina aplicându-se mai întâi un codaj
LZW şi apoi unul Huffman.
4. Algoritmul RGB 5-5-5 - Numele provine de la modul in care se realizeaza compresia.

Se reduce numarul de pixeli rezervati pentru fiecare culoare fundamentala din
spectrul RGB de la 8 la 5 biti. Implicatiile la nivel de imagine: reduce numarul de
nuante. Se observa ca ochiul uman nu percepe deranjant aceste modificari in ceea
ce priveste numarul de nuante, deci nu sunt sesizate schimbari majore de calitate.
2.3.4. Formate de reprezentare a imaginilor

Cele mai utilizate formate de comprimare sunt:
1. Formatul GIF (Graphics Interchange Format)
Formatul suporta pana la 8 biti per pixel folosind o paleta de 256 culori diferite. Culorile sunt
alese din spectrul RGB pe 24 biti. Sunt salvate culorile cele mai apropiate de culoarea
originala. Pentru imagini mari cu diversitate de nuante se genereaza palete de culori pe
cadrane. Acest format suporta animatie bazata pe frame-uri. Limitarea numarului de culori
24
face ca formatul GIF sa fie recomandat in situatiile cand avem imagini simple de gen grafice,
logo-uri cu zone intanse de aceasi culoare si nerecomandate in cazul fotografiilor. Imaginile
GIF, dupa prelucrare, sunt comprimate apoi folosind algoritmul LZW fara pierdere de
informatie.
2. Formatul TIFF (Tagged Image File Format)

Acest format foloseste in reprezentare algoritmul LZW. Tiff permite reprezentarea pixelilor
(punctelor de culoare) pe 48 de biti, ceea ce inseamna 16 biti pentru fiecare culoare
fundamentala din spectrul de culori RGB. Astfel se obtine o reprezentare de o mare acuratete
la nivel de culoare. In formatul Tiff se aplica algoritmul LZW construind un dictionar ce contine
initial 256 de culori de baza, urmand ca prin parcurgerea imaginii sa adauge la dictionar noi
simboluri care rezulta din pixeli de culori diferite si combinat cu secvente de pixeli care se
repeta in cadrul imaginii. Dictionarul permite maxim 4096 de intrari (simboluri). Formatul Tiff
a devenit container. Astfel in acest format pot fi stocate imagini comprimate jpeg cat si alte
imagini vectoriale.
3. JPEG (Joint Photographic Experts Group)
Acest algoritm a fost creat la iniţiativa ISO a CCITT. Acest standard se încadrează în
clasa metodelor de comprimare cu pierdere de informatie şi utilizează algoritmi hibrizi,
bazaţi pe transformarea cosinus discretă şi pe codajul Huffman. Principiul sub care
funcţionează JPEG este stabilirea de relaţii între pixelii unei imagini şi codificarea lor, iar
prin aplicarea sa se poate obţine o imagine comprimată într-un raport de 75:1, fără o
degradare vizibilă a calităţii acesteia. Structura standardului a fost finalizată în 1989 şi
poartă în clar denumirea de "compresie numerică a imaginilor fixe de natură fotografică".
Realizarea normei JPEG este condiţionată de existenţa a trei elemente necesare:
-un codor, care primeşte datele numerice ale imaginii sursă şi generează, conform
unui ansamblu de proceduri, datele imaginii comprimate;
-un decodor, care transformă datele imagine comprimată în datele imaginii

reconstruite, folosind un ansamblu de proceduri;
-un format de transfer, care prezintă datele imagine comprimată, precum şi

specificaţiile obţinute din procesul de codaj.
Reducerea cantităţii de date se bazează pe eliminarea acelor aspecte din imagine
care nu afectează perceperea vizuală a acesteia. în acest sens, imaginea RGB este
codificată într-un semnal ce ţine de chrominanţă şi luminanţă. Apoi, ea este descompusă
în blocuri de câte 8x8 pixeli, 64 pixeli, cărora li se aplică algoritmul transformatei cosinus
25
discretă, DCT. împărţirea imaginii în blocuri cu această dimensiune este datorată
codificării pe câte 8 biţi a fiecărei componente a semnalului imagine: luminanţă şi
chrominanţă. Datorită funcţiilor matematice se trece astfel de la o reprezentare spaţială a
celor 64 de informaţii distincte la o reprezentare secvenţială, cu o componentă continuă.
JPEG poate funcţiona corespunzător în patru moduri, determinate de procesele de

codaj al imaginii:
-codaj bazat pe transformarea cosinus discret secvenţial, în care blocurile de pixeli

sunt codificate unul după altul, de la stânga la dreapta şi rând de blocuri după rând
de blocuri; este şi cel mai simplu. Acest mod de codificare are ca rezultat construirea
definitivă şi pe porţiuni, de sus în jos, a imaginii finale.
-codaj bazat pe transformarea cosinus discret progresiv, în care blocurile de
informaţie, care sunt supuse codificării, sunt tratate în mod egal, în aceeaşi ordine,
dar prin mai multe baleieri ale imaginii. Imaginei rezultată din acest tip de codaj se
construieşte prin adăugarea de noi detalii de culoare, cu fiecare nou bloc codificat,
până când se obţine imaginea finală.
-codaj progresiv fără pierdere, în care se face o predicţie a unei valori pornind de la
alte trei eşantioane vecine. Diferenţa acestei valori estimate faţă de valoarea sa
efectivă face obiectul unui codaj de tip Huffman. Acest codaj nu mai are în vedere
transformări de tip DCT, iar aplicarea lui se foloseşte în special pentru imaginile de
calitate fotografică, cum ar fi de exemplu imaginile Photo-CD.
-codaj progresiv ierarhic, în care imaginea este codificată ca într-o urzeală, fără a fi
supusă transformărilor DCT. Se porneşte cu o linie de urzeală de referinţă, după care
se face o predicţie asupra liniilor de urzeală următoare. Diferenţa constatată între
urzelile sursă şi urzelile reconstruite se codifică printr-un algoritm de tip diferenţial.
Rata de comprimare obţinută în fiecare din aceste moduri depinde de
caracteristicile imaginii tratate. Astfel pentru aceeaşi imagine se pot obţine patru rate de
compresie JPEG, după modul în care a fost codificată imaginea. De exemplu, pentru o
imagine sursă reprezentată 16 biţi / pixel, raportul rată de compresie JPEG - calitatea
imaginii obţinute se prezintă în felul următor:
-la o reducere de 0,08 biţi / pixel, adică la o rată de 200:1, se permite obţinerea unei
imagini cu forme identificabile,
26
-la o reducere de 0,25 biţi / pixel, adică o rată de compresie de 60:1, se obţine o
imagine de calitate medie,
-la o reducere 0,75 biţi / pixel, adică o rată de 20:1, imaginea este de calitate
excelentă; - la o reducere 2,25 biţi / pixel, adică o rată de 7:1, imaginea este aproape
identică, din punct de vedere vizual, cu imaginea iniţială.
Norma JPEG şi-a găsit deja aplicarea, folosindu-se pentru stocarea pe suporţii optici
CD-I şi pentru DVI.
4. MJPEG (Motion JPEG)
Principiul M-JPEG constă în comprimarea individuală a imaginilor succesive captate în

timp real, una câte una, linie după linie, după algoritmul JPEG şi nu integrează tehnici de
codificare a predicţiei şi de interpolare interlinii imagine, ca la MPEG. Printre avantajele
acestui standard se pot enumera:
- obţinerea imaginilor de calitate foarte bună;
- imaginile de comprimat pot avea rezoluţii foarte mari, depăşind chiar 1000x1000
pixeli;
- datorită codificării fiecărei imagini în parte, există posibilitatea de a ajunge la o

imagine şi prin acces aleator.
Algoritmul aplicat de M-JPEG ajunge la o rată de compresie de aproximativ 24:1 pentru
o bună calitate a imaginii, el furnizând un raport de compresie cuprins între 15:1 şi 80:1. Pe
de altă parte, M-JPEG oferă rate scăzute de comprimare în comparaţie cu alte metode,
fişierele de date rămânând la o dimensiune destul de mare. Din aceste considerente, el este
puţin utilizat pentru CD-ROM sau pentru reţeaua video.

punct al ei, de o anumita culoare. Exista doua modele de culoare: aditiv și substractiv.
Imaginile pot fi împărțite în două categorii: bitmap (raster) sau vectoriale. Termenul de
compresie a imaginilor (uneori numit si codare a imaginilor) se referă la o clasă largă de tehnici
şi metode al căror scop este reprezentarea unei imagini date cu un număr cât mai mic de biţi
(mai mic decât numărul de biţi al reprezentării inițiale). Imaginile raster pot fi utilizate în
context web cu ajutorul elementelor de tip <img> și <canvas>. Imaginile vectoriale pot fi
utilizate în context web cu ajutorul elementului de tip <svg>.
27
Imagine raster format de reprezentare
Imagine vectorială GIF
Model de culoare JPEG
RGB TIFF
CMYK pixel
Aplicația 1.1. Explicați conceptul de pixel.
Răspuns:
Un pixel este zonă pătrată (sau ocazional rectangulară) de culoare, reprezentând un singur
punct din imagine. Toți pixelii dintr-o imagine raster au exact aceeași dimensiune. Fiecare
specifică o singură culoare stocată utilizând de cele mai multe ori 24 de biți.
Aplicația 1.2. Enumerați caracteristicile care descriu o imagine raster.
Răspuns:
O imagine raster este caracterizată în principal de dimensiunea în pixeli, de numărul de pixeli

și de adâncimea de culoare. Dimensiunea în pixeli a unei imagini raster este exprimată ca
numărul de pixeli de-a lungul axei x (lățime) și de numărul de pixeli de-a lungul axei y
(înălțime). Numărul total de pixeli se obține multiplicând dimensiunile orizontale și verticale
ale imaginii exprimate în pixeli. Ex: o imagine cu dimensiunea de 30 * 18 pixeli conține 540
pixeli.
Aplicația 1.3. Implementați utilizând limbajele HTML, JavaScript și CSS o librărie pentru
afișarea de grafice pe canvas. Interfața aplicației va fi similară cu cea din Figura 2-3.
28
Figura 2-3. Afișare grafic cu bare pe canvas
Răspuns:
Regăsiți în cele ce urmează modalitatea de implementare a clasei BarChart.
//http://exploringjs.com/es6/ch_classes.html
//https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Classes
class BarChart{
constructor(canvas) {
this.canvas = canvas;
}
draw(values){
let context = this.canvas.getContext('2d');
context.save();
let h = this.canvas.height;
let w = this.canvas.width / values.length;
context.fillStyle = '#DEDEDE';
context.fillRect(0, 0, this.canvas.width, this.canvas.height);
context.fillStyle = 'red';
context.strokeStyle = 'black';
context.lineWidth = 2;
//...spread operator
let maxValue = Math.max(...values);
let f = this.canvas.height / maxValue;
for (let i = 0; i < values.length; i++) {
29
let rectWidth = w * 0.8;
let rectHeight = values[i] * f * 0.9;
let rectX = (i + 0.1) * w;
let rectY = h - rectHeight;
context.fillRect(rectX, rectY, rectWidth, rectHeight);

context.strokeRect(rectX, rectY, rectWidth, rectHeight);
/* Equivalent to:
context.beginPath();
context.rect(rectX, rectY, rectWidth, rectHeight);
context.fill();
context.stroke();*/
}
context.restore();
}
}
Regăsiți în cele ce urmează modalitatea de apel a clasei BarChart.
<!DOCTYPE html>
<html>
<head>
<title>BarChart</title>
<meta name="viewport" content="width=device-width, initial-
scale=1, maximum-scale=1.0, user-scalable=0">
<script src="canvas-bar-chart-library.js"></script>
</head>
<body>
<form>
<input id="tbValues" type="text" value="12, 13, 3, 2, 1, 10, 7, 18
">
<input id="btnDrawChart" type="button" value="Draw chart">
</form>
Click on the bar chart to donwload it<br>

<a id="btnDownload" href="#" download="barchart">
<canvas id="canvasBarChart" style="width: 300px; height: 200px">
Your browser does not support the canvas element. :(
</canvas>
</a>
30
<script>
'use strict';
let canvasBarChart = document.getElementById('canvasBarChart');

let btnDrawChart = document.getElementById('btnDrawChart');
let barChart = new BarChart(canvasBarChart);
btnDrawChart.addEventListener('click', () => {
let tbValues = document.getElementById('tbValues');
let values = tbValues.value;
//the eval() function evaluates JavaScript code represented as

a string.
US/docs/Web/JavaScript/Reference/Global_Objects/eval
barChart.draw(eval('[' + values + ']'));
});
//?After an event triggers on the deepest possible element, it the

n triggers on parents in nesting order
//https://javascript.info/tutorial/bubbling-and-capturing
/*canvasBarChart.addEventListener('click', function () {
this.parentNode.setAttribute('href', this.toDataURL('image/png
'));
});*/
btnDownload.addEventListener("click", (ev) => {

const dataUrl = canvasBarChart.toDataURL('image/png')
//Note: The currentTarget read-
only property of the Event interface identifies the current target for the
event, as the event traverses the DOM. It always refers to the element to
which the event handler has been attached, as opposed to Event.target, wh
ich identifies the element on which the event occurred and which may be it
s descendant.
ev.currentTarget.setAttribute('href', dataUrl);
});
</script>
</body>
</html>
31
Aplicația 1.3. Implementați utilizând limbajele HTML, JavaScript și CSS o aplicație care să
permită afișarea histogramei unei imagini preluate prin drag and drop. Interfața aplicației va
fi similară cu cea din Figura 2-4.
Figura 2-4. Afișare histogramă imagine
Răspuns:
Regăsiți în cele ce urmează codul necesar pentru preluarea imaginii prin drag and drop. Pentru
desenarea histogramei se va utiliza biblioteca pentru grafice cu bare de la aplicația anterioară.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5Multimedia - DragDrop</title>
<script src="canvas-bar-chart-library.js"></script>
</head>
<body style="text-align:center;">
Drag and drop an image to start. Click on the image afterwards to down
load it. <br>
32
<a id='downloadLink' href="#" download="histogram.png">

<canvas id="canvasHistogram" width="512" style="width:512px;border
-style: dotted;"></canvas>
</a>
<br>
<canvas id="canvasImage" style="border-style: dotted;">

Your browser does not support the canvas element. :(
</canvas>
<script>
'use strict';
//Selectors
const canvasImage = document.getElementById('canvasImage');
const canvasHistogram = document.getElementById('canvasHistogram')
;
const barChart = new BarChart(canvasHistogram);
//Methods
function drawImage(img) {
const cW = img.naturalWidth, cH = img.naturalHeight;
canvasImage.width = cW;
canvasImage.height = cH;
const context = canvasImage.getContext('2d');

context.drawImage(img, 0, 0);
}
function drawImageHistogram(){
const v = [];
for (let i = 0; i < 256; i++) {
//The push() method adds new items to the end of an array,
and returns the new length.
// http://www.w3schools.com/jsref/jsref_push.asp
v.push(0);
}
const context = canvasImage.getContext('2d');
33
const cW = canvasImage.width;
const cH = canvasImage.height;
const imageData = context.getImageData(0, 0, cW, cH);
const data = imageData.data;
for (let y = 0; y < cH; y++) { //each line

for (let x = 0; x < cW; x++) { //each column
const offset = ((cW * y) + x) * 4
const red = data[offset];

const green = data[offset + 1];
const blue = data[offset + 2];
const val = Math.round((red + green + blue)/3);

v[val]++;
}
}
barChart.draw(v);
}
//Events
document.addEventListener('dragover', function(e){e.preventDefault
();})
document.addEventListener('drop', function (e) {
e.preventDefault();
//Access the `dataTransfer` property from the `drop` event whi

ch
//holds the files dropped into the browser window.
const files = e.dataTransfer.files;
//we need to check the length of the files property in order t

o make sure that the user has dragged and dropped a file and not something
else (ex: a text). Note: if the user has dropped a text, we can access it
in a similar manner, using the DataTransfer object
if (files.length > 0) {
//The FileReader object lets web applications asynchronous
ly read the contents of files (or raw data buffers) stored on the user's c
omputer, using File or Blob objects to specify the file or data to read
//https://developer.mozilla.org/en/docs/Web/API/FileReader
const reader = new FileReader();
//FileReader.onload: a handler for the load event. This ev

ent is triggered each time the reading operation is successfully completed
.
34
US/docs/Web/API/FileReader/onload
reader.addEventListener('load', function (e) {
const image = document.createElement('img');
image.addEventListener('load', function(){
drawImage(this);
drawImageHistogram();
});
image.setAttribute('src', e.target.result);
});
//FileReader.readAsDataURL: starts reading the contents of

the specified Blob, once finished, the result attribute contains a data:
URL representing the file's data.
reader.readAsDataURL(files[0]);
}
});
//?After an event triggers on the deepest possible element, it the

n triggers on parents in nesting order
//https://javascript.info/tutorial/bubbling-and-capturing
document.getElementById('downloadLink').addEventListener('click',
function(){
//1. Ok for small images. Does not work with large images
//downloadLink.setAttribute("href", this.toDataURL("image/png"
));
//2. create a Blob object representing the image contained in

the canvas; this file may be cached on the disk or stored in memory at the
discretion of the user agent.
US/docs/Web/API/HTMLCanvasElement/toBlob
canvasHistogram.toBlob(function(blob){downloadLink.setAttribut
e('href', URL.createObjectURL(blob))}, 'image/png');
});
</script>
</body>
</html>
permită aplicarea de efecte pe imagini încărcate cu ajutorul unui control de tip ”input”.
Interfața aplicației va fi similară cu cea din Figura 2-5.
35
Figura 2-5. Aplicare efecte pe canvas
Răspuns:
Regăsiți în cele ce urmează codul HTML necesar pentru construirea interfeței.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Image Editor</title>

<script src="image-editor.js"></script>
<link rel="stylesheet" type="text/css" href="image-editor.css">

36
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#2F3BA2">

<link rel="icon" sizes="192x192" href="img/icons/icon-192x192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Image Editor">
<link rel="apple-touch-icon" href="img/icons/icon-152x152.png">
<meta name="msapplication-TileImage" content="img/icons/icon-
144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
</head>
<body style="text-align:center;">
<canvas id="visibleCanvas" style="
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -
50%);
max-width:100%; width:auto; height: auto; max-height: 600px">
</canvas>
<div style="
background-color: rgba(200,200,200,0.8);
padding: 10px;
position: fixed;
top:10px; left: 50%;
transform: translate(-50%);">

<input type="file" id="fileBrowser" name="fileBrowser" accept="ima
ge/*">
</div>

<div style="
background-color: rgba(200,200,200,0.8);
padding: 10px;
position: fixed;
bottom: 10px; left: 50%;
transform: translate(-50%);
margin-right: -50%;">
<!-
- https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attribut
es -->
<button type="button" class="effectType" data-
effect="normal">Normal</button>
37
effect="grayscale">Grayscale</button>
effect="threshold">Threshold</button>
effect="sephia">Sephia</button>
effect="invert">Invert Colors</button>
effect="pixelate">Pixelate</button>
effect="twoChannels">2 Channels</button>
effect="red">Red</button>
effect="green">Green</button>
effect="blue">Blue</button>
<a id="donwloadLink" href="#" download="processedImage">


Download
</a>
</div>
<div class="loader" style="display: none">

<div id="spinner"></div>
</div>
<script>
app.load();
</script>
</body>
</html>
Regăsiți în cele ce urmează codul CSS aferent aplicației.
.loader {
left: 50%;
top: 50%;
position: fixed;
38
transform: translate(-50%, -50%);
}
.loader #spinner {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Regăsiți în cele ce urmează codul JavaScript aferent aplicației.
'use strict';
const app = {
visibleCanvas: null,
offscreenCanvas: null,
donwloadLink: null,
loader: null,
currentEffect: null
}
//Drawing methods
/** Changes the effect
* @param {string} effect - The new effect
*/
app.changeEffect = function(effect){
if(effect !== app.currentEffect)
{
app.currentEffect = effect;
app.drawImage();
}
}
app.drawImage = function() {
//show spinner
app.loader.style.display = 'block';
39
//https://developer.mozilla.org/en-US/docs/Web/API/Performance/now
let t0 = performance.now();
console.log("t0: "+t0);
let pContext = app.offscreenCanvas.getContext("2d");

switch (app.currentEffect) {
case "normal":
app.normal(pContext);
break;
case "grayscale":
app.grayscale(pContext);
break;
}
let t1 = performance.now();
console.log(t1-t0 + ": drawing the image on the canvas");
app.offscreenCanvas.toBlob(function(blob){
let blobUrl = URL.createObjectURL(blob);
app.donwloadLink.href = blobUrl;
},"image/png");
app.loader.style.display = 'none';
}
app.normal = function(pContext){
pContext.drawImage(app.visibleCanvas, 0, 0);
}
app.grayscale = function(pContext){
let oContext = app.visibleCanvas.getContext("2d");
let imageData = oContext.getImageData(0, 0, oContext.canvas.width, oCo

ntext.canvas.height);
let pixels = imageData.data;
for (let i = 0; i < pixels.length; i += 4)

pixels[i] = pixels[i + 1] = pixels[i + 2] = Math.round((pixels[i]
+ pixels[i + 1] + pixels[i + 2]) / 3);
pContext.putImageData(imageData, 0, 0);
}
//Events
app.load = function () {
app.visibleCanvas = document.createElement("canvas");
40
app.donwloadLink = document.getElementById("donwloadLink");
app.offscreenCanvas = document.getElementById("visibleCanvas");
app.loader = document.querySelector('.loader');
let buttons = document.getElementsByClassName("effectType");

for(let i=0; i<buttons.length; i++){
//more about the data attribute: https://developer.mozilla.org/en/
docs/Web/Guide/HTML/Using_data_attributes
buttons[i].addEventListener("click", function(){ app.changeEffect(
this.dataset.effect)});
}
document.getElementById("fileBrowser").addEventListener("change", func
tion(e){
//1. create the reader
let reader = new FileReader();
//2. attach events
reader.addEventListener('load', function(event){
let img = document.createElement("img");

img.addEventListener("load", function(){
app.visibleCanvas.width = app.offscreenCanvas.width = img.
naturalWidth;
app.visibleCanvas.height = app.offscreenCanvas.height = im
g.naturalHeight;
const context = app.visibleCanvas.getContext("2d");

context.drawImage(img,0,0);
app.changeEffect("normal");
});
img.src = event.target.result;
});
//3. start loading the file
reader.readAsDataURL(e.target.files[0]);
});
}
Regăsiți în cele ce urmează codul aferent fișierului manifest.
{
"name": "Image Editor",
"short_name": "Image Editor",
"icons": [{
"src": "img/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
41
}, {
"sizes": "144x144",
"type": "image/png"
}, {
"sizes": "152x152",
"type": "image/png"
}, {
"sizes": "192x192",
"type": "image/png"
}, {
"sizes": "256x256",
"type": "image/png"
}, {
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
permită afișarea unui grafic cu bare utilizând grafică vectorială. Interfața aplicației va fi
similară cu cea din Figura 2-6.
42
Figura 2-6. Afișarea unui grafic cu bare utilizând grafică vectorială
Răspuns:
Regăsiți în cele ce urmează codul aferent fișierului HTML.
<!DOCTYPE HTML>
<html>
<head>
<title>SVG Bar Chart</title>
<style>
.bar:hover {
fill: yellow;
}
</style>
<script src="svg-bar-chart-library.js"></script>
</head>
<body>
<div id="barChart" style="width: 600px; height:400px;"></div>
<script>
const data = [
['Label 1', 1],
43
['Label 2', 2],
['Label 3', 3],
];
const barChart = new BarChart(document.getElementById("barChar

t"));
barChart.draw(data);
</script>
</body>
</html>
Regăsiți în cele ce urmează codul aferent fișierului JavaScript.
//http://exploringjs.com/es6/ch_classes.html
US/docs/Web/JavaScript/Reference/Classes
class BarChart{
constructor(domElement) {
this.domElement = domElement;
this.svgns = "http://www.w3.org/2000/svg";
}
draw(data){
this.data = data;
this.width = this.domElement.clientWidth;
this.height = this.domElement.clientHeight;
this.createSVG();
this.drawBackground();
this.drawBars();
this.domElement.appendChild(this.svg);
}
createSVG(){
this.svg = document.createElementNS(this.svgns, "svg");
this.svg.setAttribute('style', 'border: 1px solid black');
//or
//this.svg.style.borderColor = 'black';
//this.svg.style.borderWidth = '1px';
//this.svg.style.borderStyle = 'solid';
this.svg.setAttribute('width', this.width); //note: this.svg.width
is readonly
this.svg.setAttribute('height', this.height);
}
drawBackground(){
const rect = document.createElementNS(this.svgns, 'rect');
rect.setAttribute('x', 0);
44
rect.setAttribute('y', 0);
rect.setAttribute('height', this.height);
rect.setAttribute('width', this.width);
rect.style.fill = 'WhiteSmoke';
//rect.setAttribute("fill", 'WhiteSmoke'); //! not recommended
this.svg.appendChild(rect);
}
drawBars(){
const barWidth = this.width / this.data.length;
const f = this.height / Math.max(...this.data.map(x=>x[1]));
for(let i=0; i<this.data.length; i++){
const label = this.data[i][0];

const value = this.data[i][1];
const barHeight = value * f * 0.9;

const barY = this.height - barHeight;
const barX = i * barWidth + barWidth/4;
const bar = document.createElementNS(this.svgns, 'rect');

bar.setAttribute('class','bar');
//or
//bar.classList.add('bar'); //!recommended
bar.setAttribute('x', barX);
bar.setAttribute('y', barY);
bar.setAttribute('height', barHeight);
bar.setAttribute('width', barWidth/2);
//note: if the styles are set using CSS .bar:hover {...} will
only work if marked as !important
//the styling should be moved to the .bar {...} instead
bar.setAttribute("fill", '#db4437');
bar.setAttribute("stroke-width", 2);
bar.setAttribute("stroke", "black");
this.svg.appendChild(bar);
const text = document.createElementNS(this.svgns, 'text');

text.appendChild(document.createTextNode(label));
text.setAttribute('x', barX);
text.setAttribute('y', barY - 10);
this.svg.appendChild(text);
}
}
}
45
1. Dați exemple de situații când este preferabilă utilizarea imaginilor raster.
2. Dați exemple de situații când este preferabilă utilizarea imaginilor vectoriale.
3. Creați o imagine vectorială si salvați-o într-un format raster. Comparați dimensiunile celor
două fișiere.
4. Salvați o poză în mai multe formate diferite. Comparați dimensiunea fișierelor rezultate și
calitatea imaginilor stocate.

Bucuresti 2008
46
3. UNITATEA DE STUDIU 3 - Sunetul
Cuprins
3.1. Introducere................................................................................................................ 47
3.1. Introducere
Sunetul este o vibrație propagată printr-un mediu material sub forma unei unde
mecanice. Sunetul digital se reprezintă printr-un flux de valori numerice care rezultă în urma
procesului de eșantionare și cuantificare a semnalului analog. Compresia sunetului utilizează
tehnici precum mascarea frecvențelor și mascarea temporală. Sunetul poate fi utilizat în
context web cu ajutorul elementului de tip <audio>.

▪ cunoașterea definiției sunetului;

▪ cunoașterea modurilor în care se poate face numerizarea sunetului;
▪ cunoașterea formatelor audio;
▪ cunoașterea MIDI
▪ înțelegerea modurilor de compresie a sunetului.
▪ studenții vor putea să definească conceptul de sunet;

▪ studenții vor cunoaște principalele formare audio;
▪ studenții vor putea implementa aplicații web care să utilizeze fișiere audio.
47
3.3.1. Noțiuni generale

mecanice. Din punct de vedere fiziologic senzația produsă asupra organului auditiv de către
vibrațiile materiale ale corpurilor și transmise pe calea undelor acustice. Urechea umană
percepe vibrații în intervalul 20 -20000Hz. Zgomotul reprezintă un caz particular de sunet
caracterizat prin lipsa încărcăturii informaționale.
Utilizarea sunetului în aplicații:
• Comunicarea ideilor – folosind dialoguri informative, narațiuni și prin conținut

vocal,
• Îmbogățirea structurii navigaționale cu efecte de sunet orientate spre interfață
precum – butoane controlate prin comenzi audio,
• Muzică de fundal pentru prezentări ș i aplicații dedicate entertainment,
• Obținerea de venituri din vânzarea de muzică online și distribuirea de secvențe
audio în format digital.
Procesul de înregistrare a sunetului este reprezentat în Figura 3-1. Procesul de redare a
sunetului este reprezentat în Figura 3-2.
Presiune Voltaj
Figura 3-1. Înregistarre sunet
Voltaj Presiune
48
Figura 3-2. Redarea sunetului
Reprezentarea sunetului:
▪ Axa X: timp
▪ Axa Y: presiune (0 – presiunea aerului în repaus)
Două caracteristici importante ale sunetului sunt amplitudinea și frecvența. Amplitudinea
măsoară dimensiunea vibrației / volumul sunetului, așa cum se poate observa în Figura 3-3.
Figura 3-3. Sunete cu amplitudini diferite
Frecvența măsoară viteza vibrației / tonul sunetului, așa cum se poate observa în Figura 3-4.
Figura 3-4. Sunete cu frecvențe diferite
3.3.2. Numerizarea sunetului

Sunetul digital se reprezintă printr-un flux numeric (valori numerice) care rezultă în urma
procesului de eșantionare şi cuantificare a semnalului analog (semnal captat printr-un
dispozitiv analog – de exemplu microfon). Prin eșantionare se înțelege procesul de
segmentare, cu o periodicitate fixă, a semnalului audio analog şi conversia amplitudinii lui în
valori numerice (figura 3.1). Această reprezentare a sunetului digital se numește PCM
(PulseCode Modulation).
49
Figura 3.1 Eşantionarea semnalului audio
Valorile astfel obţinute se pot cuantifica pe un număr diferit de biţi (8, 16, 32 etc.) depinzând
de capabilităţile plăcii de sunet. La digitizarea semnalului audio, editoarele de sunet
furnizează utilizatorilor posibilitatea de a stabili valorile parametrilor de numerizare după
cum se observă în figura 3.2.
Din figura 3.2 se poate observa că s-a optat pentru o frecvenţă de eşantionare de 11025
Hz (aproximativ 11 kHz), valorile se reprezintă pe 2 baiţi şi sunetul se memorează pe un singur
canal (mono).
Prin procesul de eşantionare şi cuantificare se urmăreşte să se păstreze o minimă

informaţie cu ajutorul căreia să se recompună forma iniţială a semnalului audio (analog)
pentru că la redare, sunetul este transformat din nou în format analog.
Figura 3.2 Stabilirea parametrilor pentru digitizare
Calitatea sunetului obținut prin procesul de digitizare depinde de valorile parametrilor.

Astfel, cu cât frecvenţa de eşantionare este mai mare cu atât creşte calitatea semnalului audio
pentru că aproximează mai fidel forma iniţială a semnalului însă, dezavantajul constă în
50
creşterea numărului de valori ce trebuie stocate. In literatura de specialitate se recomandă a
se utiliza anumite frecvenţe de eşantionare în funcţie de tipul de semnal audio:
- 8 kHz pentru semnal telefonic;

- 11 kHz pentru semnal AM (Amplitude Modulation) Radio;
- 22 kHz pentru semnal FM (Frequency Modulation) Radio; - 44 kHz pentru a
obţine sunet de calitate CD – audio.
In general, valoarea ratei de eşantionare trebuie să fie egală cu dublul celei mai mari
frecvenţe a semnalului audio care urmează a fi numerizat. Astfel, un sunet având frecvenţa
de 8000 Hz trebuie să fie eşantionat la o frecvenţă de cel puţin 16000 Hz adică să se obţină
16000 de eşantioane pe secundă. Raportul dintre frecvenţa sunetului şi frecvenţa de

eşantionare a fost stabilit prin teorema lui Nyquist.
Figura 3-5. Sunet eșantionat utilizând rate diferite
Un alt parametru care influienţează calitatea semnalului audio este numărul de biţi pe
care se reprezintă valorile preluate din eşantionare. Prin intermediul acestor valori se
cuantifică amplitudinea sunetului adică diferenţa dintre sunetul având intensitatea cea mai
mare şi cel cu intensitatea cea mai mică. Spre exemplu dacă se utilizează 8 biţi pentru
cuantificarea valorilor atunci se pot reprezenta 256 niveluri distincte ale amplitudinii
semnalului. In caz că se reprezintă valorile pe 16 biţi atunci se poate cuantifica amplitudinea
sunetului prin 65536 niveluri distincte. In plan fonic amplitudinea se exprimă prin dB (decibeli)
iar corespondenţa între numărul de biţi şi numărul de dB este prezentată în tabelul 3.1.
Tabelul 3.1 Corespondenţa număr biţi – dB
51
Număr biţi Valori distincte Intensitatea sunetului (dB)
8 256 48
16 65536 96
3.3.3. Redarea audio digital

Este realizată reconstrucția semnalului audio analog prin folosirea unui convertor digital-
analog. Semnalul “în trepte” obținut este trecut printr-un filtru de nivel scăzut, pentru
reconstituirea semnalului original.
Figura 3.3. reconstrucția semnalului audio analog.
3.3.4. Formate audio

Fluxul numeric obținut prin procesul de eșantionare şi cuantificare trebuie stocat
conform unui format audio. Cele mai cunoscute şi utilizate formate audio sunt:
- WAVE – formatul standard de fişier audio pentru Microsoft şi IBM; conţine

sunet în reprezentare PCM necomprimat;
- AIFF (Audio Interchange File Format) – formatul standard pentru audio digital
utilizat pe platforma Apple Macintosh, există şi în variantă necomprimată cât şi
comprimată;
52
- AU (AUdio) este formatul standard al firmei Sun Microsystems, introdus iniţial
pentru telefonie digitală;
- VOC (VOiCe) este formatul pentru sunet digital lansat de firma Creative Voice
în mod deosebit pentru plăcile de sunet produse de această firmă; formatul a
fost limitat şi dezvoltat în funcţie de capabilităţile placilor de sunet produse de
această firmă;
- MPEG (Moving Picture Experts Group) Audio care s-a impus ca format
standard în ceea ce priveşte sunetul digital comprimat este parte a standardului
MPEG de codificare a semnalului audio-video; cea mai cunoscută variantă a lui
este MP3;
- AMR (AMR-NB) folosit iniţial pentru înregistrări;
- OGG - un format deschis şi liber, ca şi calitate este asemănător cu MPEG, dar
datorită popularității MPEG, OGG nu se poate impune ca utilizare;
3.3.5. Sunetul MIDI

MIDI (Musical Instrument Digital Interface) este un protocol ce permite calculatorului
să conecteze şi să comunice cu instrumente muzicale electrice (exemplu: sintetizator) şi cu
alte periferice muzicale.
Spre deosebire de sunetul digital propriu-zis, sunetul MIDI se reprezintă sub forma unei
descrieri muzicale. Protocolul conține comenzi, secvenţializate în timp, ce indică plăcii de
sunet nota pe care să o reproducă, prin prisma cărui instrument, canalul în care va fi difuzată,
durata de emitere a ei şi volumul.
Norma MIDI a evoluat în decursul timpului în prezent se lucrează cu norma GENERAL

MIDI care este capabilă de a sintetiza sunete produse de maxim 128 de instrumente distincte;
fiecare canal de emitere a sunetului (pe un canal se sintetizează sunetul unui instrument) este
codificat cu numere de la 0-127.
Deoarece sunetul MIDI nu este un sunet rezultat în urma unui proces de eşantionare şi
cuantificare, ci apare ca o descriere muzicală pe baza unui protocol, fișierele care conțin sunet
MIDI sunt semnificativ mai mici decât cele care conţin sunet digital propriu-zis. Dezavantajul
secvenţelor audio de tip MIDI constă în aceea că, nu orice sunet întâlnit în realitate poate fi
sintetizat prin prisma instrumentelor muzicale electrice (de exemplu, sunetele emise de vocea
umană).
53
Sunetul MIDI este redat de placa de sunet prin înţelegerea protocolului de descriere a
secvenţei muzicale. Pornind de aici, un alt dezavantaj al acestui tip de sunet se referă la faptul
că periferice diferite sintetizează diferit sunetele aceloraşi instrumente muzicale. De aceea
este posibil ca pe un calculator care are o placa de sunet diferită de a calculatorului pe care s-
a înregistrat secvenţa, aceeaşi melodie să se audă în mod diferit.
Se poate face o paralelă între cele două componente care formează tipul media
(imaginea şi sunetul) în sensul că, aşa după cum avem imaginea reprezentată punct cu punct
avem şi sunetul digital propriu-zis, în timp ce imaginea descrisă prin elemente geometrice are
corespondent în partea audio, sunetul MIDI.
3.3.6. Compresia sunetului

Algoritmii impusi ca standard (MPEG audio) comprima sunetul pornind de la
psihoperceptii (codificarea psihoperceptiilor). Sunt eliminate din coloana sonora sunetele pe
care noi nu le percepem. Sunetele pe care le elimina nu le sesizam datorita faptului ca sunt
mascate in doua moduri:
a) mascarea frecvențelor
b) mascarea temporală
a) mascarea frecventelor
− In primul rand, din coloana sonora sunt eliminate sunete care au frecventa mai mare de
1618 KHz (limita pana la care noi auzim: 18000 Hz).
− Mai sunt eliminate sunetele de intensitate scazuta, care apar concomitent cu sunete de
intensitate inalta, conditia fiind ca sunetele sa fie in benzi invecinate de frecventa. Cele cu
intensitate scazuta sunt mascate de cele cu intensitate inalta.
b) mascarea temporala
Se elimina sunetele de intensitate mica care urmeaza dupa sunete de intensitate
puternica (pe o durata foarte mica).
Sunetele de intensitate joasa nu mai pot fi percepute dupa ce am ascultat sunete de

intensitate puternica. Cele puternice imprima o vibratie mare a timpanului, care are o
inertie ce ramane ceva vreme.
Pasii algoritmului de compresie:

1) Trecerea semnalului sonor printr-un banc de filtre.
54
In paralel, se aleg si valorile de referinta pentru fiecare banda de semnal in parte.
2) Stabilirea numarului de biti disponibilizat, folosind un cuantificator de tip bit per zgomot
mp3: compresia, in plus, elimina zgomotul (sesizeaza valorile de referinta si tot ceea ce
iese in afara valorilor este eliminat, pentru a ajunge la o sinusoida regulata) (aplatizarea
neregularitatilor in cadrul fluxului audio).
3) Preluarea valorilor obtinute si constituirea unui flux unic de biti.
3.3.7. Sunetul în context Web

Elementul HTML este utilizat pentru a încorpora conținut sonor în aplicații web este
<audio>. Poate conține una sau mai multe surse audio, reprezentate folosind atributul ”src”
sau elementul <source>, dintre care browser-ul îl va alege pe cel mai potrivit.
<audio controls>
<source src="foo.wav" type="audio/wav">
Your browser does not support the <code>audio</code> element.
</audio>
Figura 3-6. Element de tip <audio>
Cele mai importante atribute ale elementului <audio> sunt:
▪ autoplay (bool) – redarea automată a sunetului

▪ controls (string) – controalele de redare sunt afișate dacă atributul este prezent
▪ loop (bool) – permite redarea continuă a sunetului
▪ src (string)– permite specificarea sursei fără utilizarea de tag-uri de tip source
Atributele elementului <source> sunt:
▪ src (string) – adresa (URL) fișierului audio

▪ type (string) – tipul MIME pentru fișierul audio
Proprietățile obiectului HTMLMediaElement sunt:
▪ currentSrc – URL-ul absolut al fișierului redat

▪ currentTime – poziția (în secunde) în cadrul fișierului (poate fi modificată)
▪ duration – durata totală a fișierului audio (în secunde)
▪ ended – boolean setat pe true la terminarea redării
▪ error – ultima eroare (obiect MediaError) sau null dacă nu a apărut nici o eroare
▪ paused – boolean setat pe false la oprirea redării
▪ readyState – indică starea curentă a elementului
▪ volume – permite citirea / modificarea volumului
Metodele obiectului HTMLMediaElement sunt:
55
▪ canPlayType(type) – permite aplicației să determine dacă browser-ul curent suportă
un anumit tip de fișier audio
▪ load() – pornește procesul de descărcare a fișierului audio de pe server; este
obligatoriu să fie apelat înainte de începerea redării folosind metoda play()
▪ pause() – oprește redarea (cu păstrarea poziției curente)
▪ play() – pornește redarea de la poziția curentă
Evenimentele obiectului HTMLMediaElement sunt:
▪ canplay – a fost încărcată o parte din fișier și poate fi pornită redarea

▪ ended – redarea s-a terminat
▪ pause – redarea a fost oprită
▪ play – redarea a început
▪ volumechange – modificare de volum
▪ waiting – operația curentă este suspendată pentru a încărca date de pe server

mecanice. Amplitudinea și frecvența sunt două dintre caracteristicile importante ale
sunetului. Sunetul digital se reprezintă printr-un flux de valori numerice care rezultă în urma
procesului de eșantionare şi cuantificare a semnalului analog. Compresia sunetului utilizează
tehnici precum mascarea frecvențelor și mascarea temporală. Sunetul poate fi utilizat în
context web cu ajutorul elementului de tip <audio>.

sunet sunet analogic
amplitudine sunet digital
frecvență compresia sunetului
eșantionare formate audio
sunet midi mascarea frecvențelor
mascarea temporală

Aplicația 1. Definiți conceptul de sunet.
Răspuns: Sunetul este o vibrație propagată printr-un mediu material sub forma unei unde
mecanice.
Aplicația 2. Cum pot fi incluse fișierele audio în aplicații web?
Răspuns: Cu ajutorul elementului <audio>
56
Aplicația 3. Care este intervalul de frecvențe perceput de urechea umană?
Răspuns: Urechea umană percepe vibrații în intervalul 20 -20000Hz.
Aplicația 4. Utilizați HTMLAudioElement pentru a crea o aplicație de tip player audio care să
includă și o listă de redare. Lista de redare poate fi definită local sau preluată prin
intermediul unui API (cum ar fi cel furnizat de Spotify). O captură de ecran cu interfața
utilizată de Spotify pentru redarea pieselor este inclusă în Figura 3-7.
Figura 3-7. Interfață Spotify
Figura 3-8. Aplicație redare fișiere audio
Răspuns: Regăsiți în cele ce urmează codul HTML aferent aplicației.
'use strict';
const app = {
audio: null,
tracks: [], //track list
currentUrl: null,
//UI
currentTime: null,
duration: null,
btnPlayPause: null
};
/** Plays a song

* @param {string} url - The url of the song
*/
app.play = function (url) {
const elements = document.querySelectorAll('#playlist li.active');
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('active');
}
57
const selectedElement = document.querySelector('#playlist li[data-
url="' + url + '"]');
selectedElement.classList.add('active');
app.currentUrl = url;
app.audio.src = app.currentUrl;
app.audio.load();
app.audio.play();
}
/** Changes the current song */

app.next = function () {
let index = app.tracks.indexOf(app.currentUrl) + 1;
if (index >= app.tracks.length) {
index = 0;
}
app.play(app.tracks[index]);
}
app.load = function () {
app.audio = document.getElementById('audio');
app.currentTime = document.querySelector('#currentTime');
app.duration = document.querySelector('#duration');
app.btnPlayPause = document.getElementById('btnPlayPause');
// Iterate over the playlist in order to associate events

const elements = document.querySelectorAll('#playlist li');
for (let i = 0; i < elements.length; i++) {
const url = elements[i].dataset.url;

app.tracks.push(url);
elements[i].addEventListener('click', function () {
app.play(this.dataset.url);
});
}
// Handle the timeupdate event

app.audio.addEventListener('durationchange', function(){
app.duration.textContent = app.secondsToString(app.audio.duration)
;
});
app.audio.addEventListener('timeupdate', function () {
const currentTime = app.audio.currentTime;
58
if (app.audio.duration) {
app.currentTime.textContent = app.secondsToString(currentTime)
;
}
else {
//innerText can also be used
//differences https://www.w3schools.com/jsref/prop_html_innerh
tml.asp
app.currentTime.textContent = '...';
};
});
// Handle the play event

app.audio.addEventListener('play', function () {
//alternative: app.btnPlayPause.children[0].classList.replace('fa-
play', 'fa-pause');
app.btnPlayPause.children[0].classList.remove('fa-play');
app.btnPlayPause.children[0].classList.add('fa-pause');
});
// Handle the pause event

app.audio.addEventListener('pause', function () {
app.btnPlayPause.children[0].classList.add('fa-play');
app.btnPlayPause.children[0].classList.remove('fa-pause');
});
// Handle the ended event

app.audio.addEventListener('ended', app.next);
// Handle the click event btnPlayPause

document.getElementById('btnPlayPause').addEventListener('click', func
tion () {
if (app.audio.src === "") {
app.play(app.tracks[0]);
} else {
if (app.audio.paused) {
app.audio.play();
}
else {
app.audio.pause();
}
}
});
// Handle the click event on btnForward
59
document.getElementById('btnForward').addEventListener('click', functi
on () {
app.audio.currentTime += 10;
});
// Handle the click event on btnNext

document.getElementById('btnNext').addEventListener('click', app.next)
;
};
/**
* A utility function for converting a time in miliseconds to a readable ti
me of minutes and seconds.
* @param {number} seconds The time in seconds.
* @return {string} The time in minutes and/or seconds.
**/
app.secondsToString = function (seconds) {
let min = Math.floor(seconds / 60);
let sec = Math.floor(seconds % 60);
min = min >= 10 ? min : '0' + min;

sec = sec >= 10 ? sec : '0' + sec;
const time = min + ':' + sec;
return time;
};
Regăsiți în cele ce urmează codul HTML aferent aplicației.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 - Audio Playlist</title>


<meta charset="utf-8">
scale=1, shrink-to-fit=no">


<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootst
rap.min.css"
60
integrity="sha384-
TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.1/css/all.min.css">
<style>
#audioTime {
min-width: 200px;
text-align: right;
color: #eeeedd;
background: #333;
}
</style>
</head>
<body class="container">
<div class="text-center" style="margin:20px;">

<audio id="audio">
Your browser does not support the <code>audio</code> element.
</audio>
<button id="btnPlayPause" class="btn btn-

primary"><i class="fas fa-play"></i></button>
<div id="controls" class="btn-group">
<div id="audioTime" class="btn">
<span id="currentTime">...</span> / <span id="duration">..
.</span>
</div>
<button id="btnForward" class="btn"><i class="fas fa-
forward"></i></button>
<button id="btnNext" class="btn"><i class="fas fa-step-
forward"></i></button>
</div>
</div>
<ul id="playlist">
<li data-url="media/Bolero.mp3" class="list-group-item">
Ravel - Bolero
</li>
<li data-url="media/Beethoven-MoonlightSonata.mp3" class="list-
group-item">
Beethoven - Moonlight Sonata
61
</li>
<li data-url="media/CanoninD.mp3" class="list-group-item">
Pachelbel - Canon in D
</li>
</ul>
<canvas id="canvas"></canvas>
<script src="audio-playlist.js"></script>
<script>
app.load();
</script>
</body>
</html>
Aplicația 5. Realizați o aplicație care să permită preluarea sunetului de la microfon și

reprezentarea acestuia cu ajutorul unui grafic cu bare.
Figura 3-9. Reprezentare sunet microfon prin intermediul unui grafic cu bare
Rezolvare:
<!DOCTYPE html>
<html lang="en-us">
62
<head>


<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.
min.css"
integrity="sha384-
<title>HTML5 Web Audio API</title>

</head>
<body>
<div class="container">
<h1>HMTL5 Web Audio API</h1>

The sample analyzes the audio input from the microphone of the laptop
/ smartphone .
<canvas id="canvas" style="width:100%"></canvas>
<form>
<div class="form-group">
<label for="visual">Visualizer setting</label>
<select id="visual" name="visual" class="form-control">
<option disabled selected>Choose</option>
<option value="sinewave">Sinewave</option>
<option value="frequencybars">Frequency bars</option>
</select>
</div>
</form>
</div>
<script src="sound-analyser-library.js"></script>
<script>
"use strict";
//Variables
const canvas = document.getElementById('canvas');
const visualSelect = document.getElementById("visual");
63
const soundAnalyser = new SoundAnalyser(canvas);
//Methods
function resizeCanvas() {
//reset canvas width and height to match the display values
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
//Subscribe to events
window.addEventListener("resize", resizeCanvas);
visualSelect.addEventListener("change", function () {
soundAnalyser.display(this.value);
});
//Start
resizeCanvas();
if (navigator.mediaDevices.getUserMedia) {
//The MediaDevices.getUserMedia() method prompts the user for permis
sion to use one video and/or one audio input device such as a camera or sc
reensharing and/or a microphone.
//Part of WebRTC API
//More details: https://developer.mozilla.org/en-
US/docs/Web/API/MediaDevices/getUserMedia
navigator.mediaDevices.getUserMedia(
{
audio: true // constraints - only audio needed for this app
})
.then((stream) => {
soundAnalyser.setStreamSource(stream);
})
.catch(function (err) {
alert(err.messsage);
});
}
</script>
</body>
</html>
Regăsiți în cele ce urmează codul JavaScript utilizat pentru analiza sunetului.
//Details regarding building Visualizations using Web Audio API
64
US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
class SoundAnalyser {
/**
*
* @param {HTMLCanvasElement} canvas
*/
constructor(canvas) {
this.canvas = canvas;
this.context = this.canvas.getContext("2d");
//The AudioContext interface represents an audio-

processing graph built from audio modules linked together, each represente
d by an AudioNode. An audio context controls both the creation of the node
s it contains and the execution of the audio processing, or decoding. You
need to create an AudioContext before you do anything else, as everything
happens inside a context.
this.audioCtx = new AudioContext();
//Creates an AnalyserNode, which can be used to expose audio time and

frequency data and for example to create data visualisations.
//More details: https://developer.mozilla.org/en-
US/docs/Web/API/AudioContext/createAnalyser
this.analyserNode = this.audioCtx.createAnalyser();
}
/**
*
* @param {string} visualSetting
*/
display(visualSetting) {
window.cancelAnimationFrame(this.drawVisual);
this.audioCtx.resume();
if (visualSetting == "frequencybars") {
//Is an unsigned long value representing the size of the FFT (Fast F
ourier Transform) to be used to determine the frequency domain.
//More info: https://developer.mozilla.org/en-
US/docs/Web/API/AnalyserNode/fftSize
this.analyserNode.fftSize = 256;
this.drawFrequencyBars();
} else if (visualSetting == "sinewave") {
this.analyserNode.fftSize = 1024;
this.drawSineWave();
}
}
65
/**
*
* @param {MediaStream} stream
*/
setStreamSource(stream) {
const sourceNode = this.audioCtx.createMediaStreamSource(stream);
// Connect the output of the source to the input of the analyser
sourceNode.connect(this.analyserNode);
}
/**
*
* @param {HTMLMediaElement} mediaElement
*/
setMediaElementSource(mediaElement){
const sourceNode = this.audioCtx.createMediaElementSource(mediaElement
);
// Connect the output of the source to the input of the analyser
sourceNode.connect(this.analyserNode)
// Connect the output of the analyser to the destination
this.analyserNode.connect(this.audioCtx.destination);
}
drawFrequencyBars() {
this.context.fillStyle = 'rgb(0, 0, 0)';
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
//Is an unsigned long value half that of the FFT size.

const bufferLength = this.analyserNode.frequencyBinCount;
//Copies the current frequency data into a Uint8Array array passed int
o it.
const dataArray = new Uint8Array(bufferLength);
this.analyserNode.getByteFrequencyData(dataArray); //Value btween 0 an
d 255
//http://stackoverflow.com/questions/14789283/what-does-the-fft-data-
in-the-web-audio-api-correspond-to/14789992#14789992
const barWidth = this.canvas.width / bufferLength;

//255 is the maximum possible value in a Uint8Array
let f = this.canvas.height / 255;
for (let i = 0; i < bufferLength; i++) {

const barHeight = f * dataArray[i];
const barX = barWidth * i;

const barY = this.canvas.height - barHeight;
66
this.context.fillStyle = 'rgb(' + dataArray[i] + ',50,50)';
this.context.fillRect(barX, barY, barWidth, barHeight);
}
//The window.requestAnimationFrame() method tells the browser that you

wish to perform an animation and requests that the browser call a specifi
ed function to update an animation before the next repaint. The method tak
es as an argument a callback to be invoked before the repaint.
//Return value: A long integer value, the request id, that uniquely id
entifies the entry in the callback list. This is a non-
zero value, but you may not make any other assumptions about its value. Yo
u can pass this value to window.cancelAnimationFrame() to cancel the refre
sh callback request.
//More info: https://developer.mozilla.org/en-
US/docs/Web/API/window/requestAnimationFrame
this.drawVisual = requestAnimationFrame(() => this.drawFrequencyBars()
);
}
drawSineWave() {
let bufferLength = this.analyserNode.fftSize;
let dataArray = new Float32Array(bufferLength);
this.analyserNode.getFloatTimeDomainData(dataArray);
this.context.fillStyle = 'rgb(200, 200, 200)';

this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
this.context.lineWidth = 2;
this.context.strokeStyle = 'rgb(0, 0, 0)';
this.context.beginPath();
let sliceWidth = this.canvas.width * 1.0 / bufferLength;

let x = 0;
for (let i = 0; i < bufferLength; i++) {
let v = dataArray[i] * 200.0;

let y = this.canvas.height / 2 + v;
if (i === 0) {
this.context.moveTo(x, y);
} else {
this.context.lineTo(x, y);
}
x += sliceWidth;
}
67
this.context.lineTo(this.canvas.width, this.canvas.height / 2);
this.context.stroke();
this.drawVisual = requestAnimationFrame(() => this.drawSineWave());

}
}
Aplicația 6. Realizați o aplicație care să permită preluarea sunetului de la microfon și

recunoaștere cuvintelor pronunțate de utilizator.
Figura 3-10. Preluarea sunetului de la microfon și recunoaștere cuvintelor pronunțate de utilizator
Rezolvare:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Speech API</title>

68
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4
.0.0-beta/css/bootstrap.min.css" integrity="sha384-
/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
<style type="text/css">
.btn-circle {
border-radius: 50%;
padding: 0.7em;
background-color: white;
}
button:focus {
outline: 0;
}
.bs-callout {
padding: 20px;
margin: 20px 0;
border: 1px solid #eee;
border-left-width: 5px;
border-radius: 3px;
}
.bs-callout-warning {
border-left-color: #f0ad4e;
}
</style>
<script src="https://code.jquery.com/jquery-
3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd
/popper.min.js" integrity="sha384-
b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/js/bootstrap.min.js" integrity="sha384-
h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
<script src="speech-api.js"></script>
</head>
<body class="container">
69
<div class="row justify-content-md-center align-items-
center" style="margin-top:10px">
<div class="col-md-1">
<button onclick="startButton(event)" class="btn-circle">
<img id="start_img" src="img/mic.gif">
</button>
</div>
<div class="col-md-11">
<div id="info" class="bs-callout bs-callout-warning">
<p id="info_start">Click on the microphone icon and begin speaking
for as long as you like.</p>
<p id="info_speak_now" style="display:none">Speak now.</p>
<p id="info_no_speech" style="display:none">
No speech was detected. You may need to adjust your
<a href="https://support.google.com/chrome/bin/answer.py?hl=en&a
mp;answer=1407892">microphone settings
</a>.
</p>
<p id="info_no_microphone" style="display:none">
No microphone was found. Ensure that a microphone is installed a
nd that
<a href="https://support.google.com/chrome/bin/answer.py?hl=en&a
mp;answer=1407892">
microphone settings</a> are configured correctly.
</p>
<p id="info_allow" style="display:none">
Click the "Allow" button above to enable your microphone.
</p>
<p id="info_denied" style="display:none">
Permission to use microphone was denied.
</p>
<p id="info_blocked" style="display:none">
Permission to use microphone is blocked. To change, go to chrome
://settings/contentExceptions#media-stream
</p>
<p id="info_upgrade" style="display:none">
Web Speech API is not supported by this browser. Upgrade to
<a href="https://www.google.com/chrome">Chrome</a> version 25 or
later.
</p>
</div>
</div>
</div>
<div id="results" style="margin-top:10px">

<div class="alert">
70
<span style="font-weight: bold">Recognized text:</span>
<span id="interim_span"></span>
</div>
<textarea class="form-control" rows="15" id="final_span"></textarea>

</div>
</body>
</html>
"use strict";
changeState('info_start');
var recognition; //webkitSpeechRecognition object
var recognizing = false;

var ignore_onend; // set to true when an error has been encountered
var start_timestamp; // used for detecting errors
$(document).ready(function () {
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function () {
recognizing = true;
changeState('info_speak_now');
};
recognition.onerror = function (event) {

if (event.error == 'no-speech') {
changeState('info_no_speech');
ignore_onend = true;
}
if (event.error == 'audio-capture') {
changeState('info_no_microphone');
}
71
if (event.error == 'not-allowed') {
if (event.timeStamp - start_timestamp < 100) {
changeState('info_blocked');
} else {
changeState('info_denied');
}
}
};
recognition.onend = function () {
recognizing = false;
if (ignore_onend) {
return;
}
changeState('info_start');
if (window.getSelection) {
window.getSelection().removeAllRanges();
var range = document.createRange();
range.selectNode(document.getElementById('final_span'));
window.getSelection().addRange(range);
}
};
recognition.onresult = function (event) {

var interim_transcript = '';
if (typeof (event.results) == 'undefined') {
recognition.onend = null;
recognition.stop();
return;
}
var final_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i)

{
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = capitalize(final_transcript);
72
$("#final_span").val($("#final_span").val() + final_transcript
);
interim_span.innerHTML = interim_transcript;
};
}
});
function startButton(event) {
if (recognizing) {
recognition.stop();
return;
}
interim_span.innerHTML = '';
recognition.lang = 'ro-ro';
recognition.start();
ignore_onend = false;
start_timestamp = event.timeStamp;
}
function changeState(s) {
$("#info").children().hide();
$("#" + s).show();
if(s === "info_speak_now"){

$("#start_img").attr("src",'img/mic-animate.gif');
} else{
$("#start_img").attr("src",'/img/mic.gif');
}
}
// Helper Methods
function capitalize(s) {
return s.replace( /\S/, function (m) { return m.toUpperCase(); });
}

1. Explicați mascarea frecvențelor în contextul compresiei audio.
2. Explicați mascarea temporală în contextul compresiei audio.
3. Salvați un sunet în mai multe formate diferite. Comparați dimensiunea fișierelor rezultate
și calitatea acestora.
73
Bucuresti 2008
74
4. UNITATEA DE STUDIU 4 - Video
Cuprins
4.1. Introducere................................................................................................................ 75
4.7. Întrebări de control și teme de dezbatere .............................................................. 100
4.8. Bibliografie obligatorie ............................................................................................ 100
4.1. Introducere
Video digital – cuprinde totalitatea tehnicilor de captură, procesare și stocare a imaginilor
în mișcare (precum și a sunetului asociat) prin intermediul unui dispozitiv de calcul. Avantajele
video digital includ posibilitatea de procesare prin intermediul calculatorului, păstrarea în
timp și rezistența la copieri repetate și posibilitatea de transmitere la distanță.

▪ cunoașterea tipurilor de semnal;

▪ înțelegerea conversiei analog-digital;
▪ înțelegerea modului de acces direct la secvențele video;
▪ înțelegerea compresiei video.
▪ studenții vor putea implementa aplicații web care să utilizeze fișiere video.
4.3.1. Tipuri de semnal și comparații între tehnica analogică și digitală

Odată cu apariția cinematografiei oamenii au fost fascinați de imaginile în mișcare. Video-
ul reprezintă elementul cel mai spectaculos al multimediei, prin care calculatorul se apropie
de lumea reală, dar care impune calități şi performanțe deosebite ale mașinii. Spre exemplu,
pentru o secvență video care deţine cadre de dimensiune 720*486 pixeli şi se derulează cu o
75
rată de transfer de 30 cadre pe secundă este nevoie să se proceseze 21 MB pe secundă, pentru
ca produsul video să se încadreze în timp real.
O posibilă sursă de obţinere a secvenţelor video într-o prezentare sau o producție

multimedia poate fi imaginea de televiziune. Folosirea acesteia ridică însă anumite probleme.
în cazul televiziunii, imaginile video sunt reprezentate în formă analogică reglementată prin
standarde internaționale pentru difuzare şi afişare, pe când video-ul pe calculator se bazează
pe tehnologia digitală. Cu toate că cele două tehnologii pe care se bazează video se combină
în televiziunea digitală de înaltă definiţie HDTV - High Definition Television, ele coexistă
deocamdată în mod separat.
Această legătură dintre calculator şi video a început mai demult, atunci când sistemele
de calcul au fost folosite pentru controlul imaginilor video analogice, stocate pe benzi şi care
apoi erau afişate pe ecranul televizorului. Apoi diferenţele dintre imaginea video pe calculator
şi imaginea video analogă au început treptat să se atenueze printr-o numerizare de calitate.
Nu a fost nevoie decât de o componentă hardware specializată, o placă overlay de
numerizare, pentru ca imaginile video de televiziune preluate sub formă analogă să fie
transformate în informaţii digitizate, apoi mixate cu informaţiile digitale ale calculatorului şi
vizualizate pe monitorul acestuia. Datorită sprijinului dat de hardware, imaginile video
digitizate pot fi afişate full-screen, full-motion, full-color şi în plus, de o bună calitate; pot fi
captate cadre video analogice, care apoi pot fi salvate ca imagini fixe digitizate, dar există şi
posibilitatea ca achiziţia şi stocarea video să se facă în întregime sub formă digitală. Pentru a
realiza o producţie multimedia este necesar deci să înţelegem aceste două tehnologii, în
special pentru că procesele de transformare a unui tip de semnal în celălalt presupun
performanţe deosebite ale calculatorului de procesare, algoritmi eficienţi de comprimare şi
un spaţiu de stocare considerabil, cerinţe care sunt încă departe de un nivel satisfăcător.
Având în vedere aceste considerente, putem spune că producţiile multimedia se vor
"liberaliza" abia atunci când captarea şi înregistrarea video vor deveni în totalitate procese
digitale.
Semnalele audio şi video de televiziune se regăsesc în formă analogică, în timp ce pe

calculator aceste informaţii sunt percepute în formă digitală. Pentru a reuni aceste două lumi
distincte, sistemele multimedia actuale manevrează informaţiile atât în formă analogică, cât
şi în formă digitală. Astfel pentru a putea fi înţelese de către calculator, semnalele video şi
audio captate sub formă analogă trebuie să fie convertite în semnale digitale; de asemenea
pentru a reda o aplicaţie, pentru a o pune pe o casetă video sau pe un alt suport de stocare
analog este necesară retransformarea semnalului în formă analogică. Reprezentarea digitală
a imaginilor în mişcare şi a sunetelor asociate lor are numeroase avantaje. Astfel putem
menţiona înalta fidelitate a acestora şi posibilităţile deosebite de prelucrare şi editare a lor.
Tehnologia digitală a semnalului video se bazează pe principiul eliminării zgomotelor, care
76
devin în acest caz insesizabile în raport cu semnalul util. însă cea mai mare parte a surselor
video furnizează încă semnalul în formă analogă.
Conversia dintre video analog şi video digital prezintă un număr de dificultăţi tehnice,
generate în principal de diferenţele dintre cele două sisteme. Acestea se referă la existenţa
unor standardele diferite, uneori incompatibile, care au fost dezvoltate de diferitele industrii
implicate.
O altă diferenţă de semnalat este modul de afişare şi de redare a culorilor pe monitorul

televizorului şi pe monitoarele calculatoarelor. După cum se ştie, majoritatea ecranelor
calculatoarelor şi câteva sisteme video utilizează un semnal video alcătuit din trei culori de
bază - roşu, verde, albastru (RGB), care sunt controlabile individual, iar banda TV şi
majoritatea sistemelor video utilizează un semnal compus, în care luminozitatea (strălucirea)
şi chrominanţa (culoarea), împreună cu informaţiile de sincronizare sunt combinate într-un
singur semnal. Pentru orice proiect multimedia trebuie să se ştie încă de la început tipul de
monitor pe care se va derula filmul video. Trecerea unei imagini în mişcare color de pe un tip
de monitor pe altul poate duce la deformarea culorilor şi la apariţia acestora cu umbre de
roşu. Acestea se pot corecta folosind filtre corespunzătoare. Dacă aceste filtre, necesare şi în
tehnologia analogică, erau iniţial foarte scumpe şi uneori dificil de realizat fizic, acum ele pot
fi implementate cu o relativă uşurinţă, atât hardware, cât şi software.
Afişarea semnalului perceput de către cele două sisteme se face diferit şi din punctul de
vedere al modului de baleiaj al ecranului. Pentru a reda imaginile de pe benzile video în
tehnologia analogică, ecranul este întreţesut, în sensul că două seturi de linii alternate
formează banda. Liniile cu număr de ordine par sunt trasate în primul pas, iar cele cu număr
impar în pasul al doilea, intercalându-se. Din acest motiv, acest baleiaj se mai numeşte şi
baleiaj întreţesut 2/1. Acest mod permite ca o imagine video să fie difuzată la o rată redusă a
cadrelor, sub 25-30 fps (frame per secundă), fără o pâlpâire sesizabilă ochiului. Pe ecranele
calculatoarelor însă, liniile video sunt prezentate secvenţial, una după cealaltă. Acest tip de
baleiaj este cunoscut sub numele de baleiaj progresiv. în compensaţie cu modul de baleiaj,
rata cadrelor în tehnologia digitală este mai rapidă, de exemplu 66.7 fps pentru monitorul
calculatorului Macintosh.
Astfel, modul de baleiaj progresiv presupune ca imaginea să apară de la început în

întregime, dar din ce în ce mai clară, până la forma ei finală, pe când modul de baleiaj
secvenţial presupune ca imaginea să apară linie după linie, de claritate maximă, dar abia în
final completă.
Legat de modul de baleiaj este şi spectrul de frecvenţă al unui semnal video, care se
referă la cantitatea de informaţie existentă, adică la numărul de cadre şi de linii cadru.
O diferenţă uşor de constatat între cele două sisteme este rezoluţia ecranului. Astfel
rezoluţia video diferă pentru sistemul analog în funcţie de standardul TV: 625 linii în cazul
77
standardului NTSC, respectiv 525 linii pentru standardele PAL şi SECAM. Pentru ecranul
calculatorului scanarea se face, de obicei, la numai 480 de linii, pentru aceeaşi dimensiune a
acestuia, în mod progresiv, iar rezoluţia lui este limitată în mod obişnuit la rezoluţia unui
monitor VGA, de 640*480 pixeli, cu o paletă de 256 culori.
4.3.2. Video digital

timp și rezistența la copieri repetate și posibilitatea de transmitere la distanță.
Principalele caracteristici ale fișierelor video digitale sunt: rezoluția, spațiul de culoare și
numărul de biți per pixel, numărul de cadre pe secundă, modul de afișare (întrețesut sau
progresiv) și calitatea compresiei
4.3.3. Conversia video analog - video digital

Pornind de la diferenţele amintite mai înainte, conversia din forma analogică în forma
digitală a semnalului video este asistată de un decodor, care transformă semnalul video
compus într-un semnal RGB şi de un scan convertor, care asigură accelerarea semnalului
video întreţesut, pentru ecranul calculatorului. în plus, dacă semnalul video digitizat va fi
combinat cu grafică pe calculator, va fi necesar şi un generator lock (genlock). Procedeul
genlock se foloseşte pentru sincronizarea semnalelor video şi VGA, imaginea obţinută putând
fi înregistrată fără dificultăţi pe o bandă video. Acest sistem face apel la un ceas ce indexează
fiecare imagine ce poate fi acordată pe semnalul timpilor externi de la a doua sursă video.
Componenta hardware care realizează această operaţie este o placă, ce poartă acelaşi nume,
genlock.
Obţinerea video-ului numeric presupune digitizarea semnalului video analog, codificat

fie pe componente, fie ca semnal compus. Această transformare presupune în ambele cazuri
procese de eşantionare şi de cuantificare.
Majoritatea maşinilor numerice ce tratează video numeric acceptă formatul de codificare

4-22. El se mai numeşte şi video în componente numerice şi se bazează pe numerizarea celor
trei componente Y, U, V. Semnalele analoge componente se eşantionează la frecvenţe
specifice fiecăruia şi cu o cuantificarepe 8 biţi, cu posibilitatea de extindere la 10 biţi. Pentru
numerizarea semnalului Y de luminanţă, se foloseşte o frecvenţă de eşantionaj de 13.5 Mhz,
pentru semnalele de chrominanţă U şi V frecvenţa fiind de 6.75 MHz. Conform normei CCIR-
601, debitul total obţinut prin numerizare este de la 216 la 270 Mbiţi pe secundă, în
conformitate cu fineţea cuantificării. Astfel o imagine video cu 625 de linii (rezoluţie PAL), se
memorează astfel încât fiecare cadru conţine 576 de linii active, fiecare cuprinzând 1440
eşantioane (720 pentru Y, 360 pentru U şi 360 pentu V, adică 720 de pixeli/linie pentru Y şi
78
câte 360 de pixeli/linie pentru componentele de culoare). Debitul obţinut în urma operaţiei
de numerizare este de 166 Mbiţi/s pentru video brut. Pentru o imagine video cu un baleiaj de
525 de linii (norma NTSC) numărul de linii active de eşantionat este de 486, cu acelaşi număr
de eşantioane. Se eşantionează un singur semnal de luminanţă la fiecare semnal de
chrominanţă, din cele două. Raportul 4:2:2 este bazat pe faptul că ochiul uman este mult mai
sensibil la luminanţă decât la chrominanţă, deci semnalul de chrominanţă se poate codifica
cu mai puţină precizie decât luminanţă. Acest format este considerat ca format principal pe
care se bazează toate echipamentele de producţie video numeric şi algoritmii de compresie
asociaţi. De la acest format se porneşte la determinarea blocurilor de frecvenţă, obţinute prin
transformarea cosinus discret, în operaţia de comprimare. De remarcat că la comprimarea
MPEG se folosesc numai 352 pixeli pe linie, în loc de 360 cât se obţin prin numerizarea video,
pe o componentă de culoare.
Un alt mod de codificare a semnalului video numeric este 4Fsc, sau video numeric
compus.
Acest format este varianta compusă a semnalului video analog şi constă în numerizarea
unui semnal NTSC sau PAL la o frecvenţă egală cu de 4 ori frecvenţa undei purtătoare, cu o
cuantificare pe 8 biţi.
Obţinerea unui rezultat bun pentru video numeric este condiţionată în principal de
următorii
factori:
- fluxul de imagini, care poate fi de la 25, la aproape 30 de cadre-pe secundă;
- rezoluţia spaţială, determinată de modul de baleiaj al liniilor din care se construieşte

imaginea;
- rezoluţia de chrominanţă, determinată de numărul de culori folosite simultan şi de

modul de codificare a lor;
- calitatea imaginii.
4.3.4. Accesul direct la secvențele video digital

Player-ele video pot ajunge la cadrele video printr-un acces aleator, permiţând
utilizatorului să selecteze într-un mod specific o anumită secvenţă video de executat, la un
anumit moment. Accesul direct la diferite cadre ale unui film presupune indexarea invariabilă
în timp, a imaginilor fixe ce compun mişcarea. Acest lucru se realizează cu ajutorul sistemelor
de reperaj cunoscute sub denumirea de Time Code şi de Frame Code.
79
Sistemul de indexare Time Code Input/Output este o metodă comercială, care foloseşte
pentru codificarea semnalului video, timpul. Metoda a fost stabilită de Society of Motion
Picture and Televisión Engineers (SMPTE) ca un standard de sincronizare universal, utilizat în
editarea video, audio şi a filmului. Conform acestei codificări, fiecărui cadru video individual i
se asociază câte un număr unic, ce permite controlul exact al benzii şi indexarea secvenţelor.
Prin aceste numere, platformele industriale de calitate pot adresa fiecare cadru prin codul
"timp" şi apoi pot să-1 acceseze direct în timpul procesului de editare. Numărul unic al fiecărei
imagini se codifică într-un bloc de 80 de biţi, ce reprezintă în fapt, momentul captării sau
înregistrării acesteia. în acest mod, Time Code indică prin codajul BCD (Binary Coded Decimal)
ora, minutul, secunda şi numărul imaginii. Semnalul este completat cu 16 biţi de control şi
depanare. Cei 96 de biţi care formează codul se transmit pe durata unei linii video.
Deoarece semnalul Time Code este înregistrat pe o pistă audio paralelă, codul s-a mai
numit şi Longitudinal Time Code sau LTC. Pentru a extrage şi decodifica semnalul Time
Code se folosesc un generator şi un lector de Time Code, care se regăsesc sub forma unor
plăci integrate sistemului. Acest mod de a ţine evidenţa cadrelor, poate pierde cu uşurinţă
sincronismul imagine - numărul unic Time Code, datorită paralelismului semnalului cu banda
video, la o simplă defazare a semnalului. Din această cauză, semnalul Time Code a fost
integrat semnalului video, în partea de sus a benzii şi a primit denumirea Vertical Time Code
sau VTC. Atât semnalul LTC, cât şi semnalul VTC folosesc codificarea BCD, pe 96 de biţi.
Un alt sistem de reperaj şi indexare a cadrelor video este Frame Code. Din punctul de
vedere al codificării, el este mult mai simplu şi se bazează pe numerotarea crescătoare a
imaginilor - cadru care compun mişcarea, începând cu 1, până la 300000. Acest sistem de
codificare este furnizat de Sony şi este în principiu acelaşi cu al video-discului interactiv
LaserVision.
Funcții multimedia ale produselor software video (Video Machine)
Animaţia şi filmele video digitale sunt considerate secvenţe de scene grafice bitmap,
redate rapid, la o anumită viteză impusă. Crearea mişcării se poate realiza cu anumite produse
software, cu funcţii dedicate, ce propun pentru aceasta un mod de lucru orientat pe cadre sau
un mod de lucru orientat pe obiecte. Cele două posibilităţi software pentru crearea mişcării,
în mod obişnuit se exclud.
Aplicarea tehnologiei QuickTime Macintosh sau a tehnologiei Microsoft Video for

Windows, cunoscută şi ca AVI sau Audio Video Interleaved, permite lucrul cu video sub
diferite unelte şi pe platforme variate. Ambele tehnologii propun soluţii software, chiar dacă
uneori sunt sprijinite şi de componente hardware, ce permit o modalitate de combinare şi
sincronizare a datelor audio cu datele video, într-un anumit proiect. Ambele tehnologii au ca
obiectiv organizarea şi încărcarea acestor date de pe suportul de stocare în memorie, într-o
manieră organizată şi buffer-izată.
80
Produsele software video sunt folosite pentru crearea componentelor dinamice, în
mişcare, ale multimediei, beneficiind de câteva caracteristici necesare acestora.
• Aplicaţiile obţinute cu aceste produse au avantajul de a putea fi redate şi executate

atât de pe un hard disc, cât şi de pe un CD-ROM, chiar dacă vitezele de accces la
date sunt diferite.
• Scopul acestor produse este de a asigura un ritm rapid de încărcare şi de acces la

secvenţe.
• Posibilităţile de captare a surselor, încorporate produselor software determină

lărgirea sferei lor de aplicare.
• Existenţa unor soluţii pentru compresia şi decompresia datelor video numerice,

indiferent de algoritmii şi de metodele folosite, reprezintă un avantaj deosebit al
produselor. Această capacitate este cu atât mai apreciată, cu cât modulele de
compresie referă posibilităţile standardizate, cum ar fi M-JPEG sau MPEG.
• Redarea proiectelor video, care sunt mari consumatoare de resurse, pe

calculatoare cu capacităţi de memorie limitate este posibilă datorită proceselor de
buffer-izare a datelor.
• Montajul video numeric reprezintă varianta cea mai utilizată de editare a datelor
video.
Editoarele video specializate deja existente, sunt proiectate în jurul celor două tehnologii
audiovideo, specifice platformelor Macintosh şi PC. Acestea permit mixarea clipurilor video,
înregistrărilor audio cu animaţia, cu imaginile fixe sau cu grafice, pentru a crea filme
QuickTime sau AVI. De asemenea, datorită acestor tehnologii, programele afişează timpul de
desfăşurare a proiectului, contorizează şi indexează cadrele componente, ca şi nivelele audio.
In acest fel, accesul şi lucrul pe un anumit cadru este facilitat de funcţii din interiorul
produsului.
Din categoria acestor produse produse face parte şi software-ul VideoMachine. Filmul
este văzut ca o succesiune de scene numerotate, ceea ce permite o rapidă căutare a acestora.
Video Machine dispune de o funcţie de căutare, care în baza unor criterii variate de căutare
permite selectarea clipurilor individuale. Editarea filmului se face cu desfăşurare pe axa
timpului, deci este de tip timeline.
Interfaţa utilizator a produsului este divizată în zone de lucru, în mod obişnuit afişate pe
ecran, zona timeline şi zona Project Manager. Componenta Project Manager este cea care
81
se ocupă de gestionarea obiectelor (clipuri, grafică, efecte speciale, texte) pe axa timpului, în
procesul de editare.
Ideea folosirii acestui produs este de a prelua materialul filmat de pe casete şi de a-1
edita prin metode numerice. Aplicaţia rezultată în urma prelucrării poate fi returnată unui
suport oarecare de stocare. O secvenţă video prelucrată cu acest produs poate fi încorporată
unui proiect multimedia datorită unor caracteristici de mare compatibilitate:
• imaginile pot fi supuse unor reglaje speciale, în ceea ce priveşte alegerea culorii şi
luminozităţii;
• sunetul asociat secvenţelor în mişcare poate fi supus decupării şi filtrării;
• în plus, produsul dispune de funcţii specifice bazelor de date, ceea ce simplifică to£-
urile la editare şi la arhivare;
• Alegerea anumitor cadre se face după criterii dorite, denumite şi condiţii de filtrare.
Selecţia se mai poate face însă şi prin cuvintele cheie existente sau alte funcţii
specifice.
Când se creează cadrele, trebuie să se specifice condiţiile care vor fi apoi luate în
considerare pentru funcţiile de filtrare. Ele pot fi legate prin operatori OR şi AND, ceea ce
uşurează formularea cererilor compuse. O altă posibilitate de selecţie a cadrelor este după
codul determinat pe axa timpului, timecode. Tot după această axă se realizează şi editarea
secvenţelor video, afişându-se în mod grafic toate etapele şi efectele obţinute în urma editării.
O funcţie deosebită furnizată de VideoMachine este combinarea graficii cu o secvenţă

video. Grafica este accesibilă sub forma unui fişier specific, care se poate importa. Video
Machine acceptă un domeniu larg de intrări prin filtrele de import, care asigură conversia
formatelor grafice individuale într-un format propriu produsului. De asemenea, pentru
elementele grafice, produsul deţine un editor grafic inclus. Imaginea realizată este afişată în
miniatură, într-o fereastră pe ecran. Editorul grafic poate înregistra imagini de la o anumită
sursă specifică şi le poate converti într-un format grafic ce poate fi citit de calculator. în mod
obişnuit, dacă sunt îndeplinite şi condiţiile hardware, cu produsul Video Machine se pot
înregistra imagini de la toate perifericele ce pot fi conectate la intrările video.
Un alt element care se poate combina cu secvenţele în mişcare este sunetul. întrucât şi
acesta este un mediu dependent de timp, afişarea lui se face pe axa timpului, pe o pistă
separată de cea a secvenţelor video. Această reprezentare poate asigura înregistrarea
sunetului pentru fiecare imagine în parte şi se poate asigura sincronizarea cu acestea. Editarea
audio este de asemenea posibilă şi în mod obişnuit este executată după editarea imaginii.
Pentru integrarea textului unei secvenţe video, există un modul special proiectat. Cazul
cel mai frecvent este inserarea textului pentru titluri şi se realizează cu un editor de text sau
82
cu o aplicaţie grafică. Prelucrarea titlului este condiţionată de modul în care acesta va apare
pe ecran, precum şi de dimensiunea imaginii video cu care se combină. Se poate lucra atât cu
titluri statice, cât şi cu elemente text animate. În legătură cu background-ul imaginilor în
mişcare, culoarea aleasă pentru text trebuie să evite obţinerea efectelor de transparenţă sau
acoperire a acestuia.
Editarea grafică directă, pe axa timpului, are numeroase avantaje determinate de

controlul uşor al cadrelor şi al obiectelor şi de posibilitatea folosirii elementelor de interfaţă
grafică.
Un alt avantaj apreciat pentru multimedia, este posibilitatea acestui produs de a accesa
instantaneu o sursă. Astfel se pot capta anumite cadre video, care apoi pot fi utilizate drept
clipuri grafice. Sursa de captare poate fi o cameră video sau imaginea de la televizor, după
care imaginea este convertită şi salvată într-un fişier de format grafic. Acest fişier poate fi
utilizat în orice altă aplicaţie, care îl poate importa.
Efectele speciale aplicate asupra imaginii din Video Machine sunt efecte video digitale.
Acestea se datorează unui editor special, inclus, denumit editorul DVE (Digital Video
Effect). El poate genera propriile efecte sau le manipulează pe cele deja existente, pentru
eventuale modificări.
Deoarece imaginea este tratată în formă digitală se pot genera efecte speciale prin
manipularea geometriei şi culorii informaţiei. Astfel de efecte pot fi: înclinarea (o nouă
imagine se pune peste original pe o anumită direcţie specificată), zoom-ul (modificarea
dimensiunii imaginii), rotaţia (conţinutul imaginii se deplasează în jurul unei axe imaginare,
care poate trece prin ecran; se admite numai rotaţia după o axă orizontală), cortina (o imagine
este pusă ca o cortină verticală sau orizontală peste o alta care se acoperă, total sau parţial),
îngheţarea imaginii la intervale de timp fixate, efectul mozaic (imaginea este împărţită în
pătrate de diferite dimensiuni, al căror conţinut a fost redus şi eventual colorat; acest efect
se foloseşte la emisiunile TV pentru a ascunde identitatea anumitor persoane), negativul,
solarizarea (răsturnarea valorilor tonale prin supraexpunerea zonelor de lumină, determinând
apariţia lor în negru), XY-List (dă o anumită traiectorie specifică zooOT-urilor şi efectelor,
creând impresia de zbor).
4.3.5. Formate video

Containerele specifică structura de stocare a componentelor video (imagine + audio) și a
datelor asociate (metadate, subtitrări, …). Unele dintre cele mai cunoscute containere sunt:
▪ Advanced Systems Format – ASF: container dezvoltat de Microsoft care poate

conține fluxuri codate cu orice codec (Extensii: .asf, .wma, .wmv)
83
▪ Audio Video Interleave – AVI: container mai vechi dezvoltat de Microsoft pe baza
Resource Interchange File Format – RIFF (stochează datele în secțiuni identificate
prin markere FourCC)
▪ MP4 – MPEG-4 Part 14: dezvoltat de către Motion Pictures Expert Group și utilizat
inițial de către QuickTime (video H.264, audio AAC)
▪ AVCHD – format utilizat în special de către camerele video (video H.264 AVC și sunet
AC3 sau PCM)
▪ Matroska / OGG: formate deschise; pot conține mai multe fluxuri audio / video
Codecul este cel care specifică modalitatea de compresie / decompresie pentru un flux
video / audio în cadrul unui container:
▪ H.264 / MPEG-4 AVC – cel mai popular (utilizat pentru Web, BluRay, camere video)
▪ H.262 / MPEG-2 – formatul standard pentru DVD
▪ Windows Media Video – format dezvoltat de către Microsoft
▪ MJPEG (Motion JPEG) – format mai vechi bazat pe compresia JPEG
4.3.6. Compresia video

Compresia imaginilor, ca şi cea a sunetelor este posibilă datorită existenţei unei
redundanţe sau prin specularea unei repetabilităţi. Algoritmii de compresie asigură
eliminarea acestei redundanţe, reţinând numai informaţiile absolut necesare pentru
reconstituirea imaginii sau sunetului. Din punct de vedere al decompresiei, se constată o
relaţie de inversă proporţionalitate între factorul de compresie obţinut şi calitatea imaginilor
(respectiv a sunetului).
Datorită complexităţii lor ridicate, compresia şi decompresia imaginilor sunt operaţii

extrem de costisitoare în ce priveşte resursele de calcul necesare. Din acest motiv, între
reducerea fluxului de date şi calitatea imaginilor se fac deseori compromisuri.
Micșorarea debitului informaţional precum şi a volumului de stocare se poate face atât

cu pierdere de informaţie, cât şi fără pierdere de informaţie. In general, pentru compresia
datelor ne interesează o soluţie fără pierdere de informaţii, ceea ce garantează reproducerea
calităţii imaginii originale, în schimb rata de compresie este în acest caz destul de scăzută.
Pentru audio şi video, o compresie cu pierdere de informaţii (lossy compression) este însă de
cele mai multe ori acceptabilă, deoarece ochiul şi urechea umană filtrând o bună parte a
informaţiei primite, transmite creierului numai trăsăturile esenţiale. O compresie cu pierdere
de informaţie neesenţială este deci "transparentă" ochiului şi urechii, astfel încât diferenţa
dintre informaţia originală şi informaţia prelucrată este uneori insesizabilă. Ea sacrifică
precizia în favoarea obţinerii unui fişier mult mai redus.
Întrucât pentru video se înregistrează o redundanţă mare, atât spaţială, adică a detaliilor
de conţinut a cadrelor, cât şi temporală, adică a diferenţelor constatate între cadrele
84
succesive, transparenţa nu se pierde la o compresie chiar de 20 de ori, deşi de multe ori este
posibilă o compresie mult mai mare. Redundanţa spaţială este exploatată de tehnicile de
compresie intra-cadre, care tratează imaginile una după alta, în mod individual. Acestea se
bazează fie pe eliminarea detaliilor nesemnificative, fie pe codificarea culorilor pe mai puţini
biţi sau pe considerarea culorilor vecine ca fiind identice. în schimb, la compresia bazată pe
redundanţă temporală, inter-cadre, sunt luate în considerare numai aspectele care ţin de
diferenţele semnalate într-o imagine în raport cu precedenta.
Algoritmii de compresie video real-time cunoscuţi sunt: JPEG, MPEG, P*64, DVI, M-JPEG;
ei se bazează pe cele două tipuri de redundanţă şi sunt disponibili pentru a comprima
informaţia video digitală, cu rate cuprinse de la 50:1 până la 200:1.
Dintre aceştia MPEG s-a impus ca normă oficială de compresie a imaginilor video. El
poartă numele grupului de lucru desemnat în 1988 să dezvolte standarde pentru
reprezentarea codificată a imaginii în mişcare, a sunetului asociat şi a combinaţiei lor. Acest
grup numit MPEG (Motion Picture
Experts Group) lucrează sub coordonarea ISO (International Standards Organization) şi a

IEC (International Electro-Technical Commission).
MPEG defineşte tehnicile standard pentru compresia şi decompresia semnalelor video

şi audio şi furnizează informaţii suplimentare pentru sincronizarea semnalelor.
Pentru a face faţă nevoilor crescânde de standarde pentru multimedia, grupul MPEG şi-
a orientat lucrările pe mai multe direcţii, existând deja numeroase specificaţii ale acestuia:
- MPEG1 - "Coding for Moving Pictures and Associated Audio for Digital Storage Media at up
to about 1,5 Mbps". Este un standard internaţional (IS-1172 / octombrie 1992) ce priveşte
numerizarea video cu sunet sincron, pentru aplicaţii pe CD-ROM, cu debite de până la 1,5
Mbits/s.
MPEG2 - "Generic Coding of Moving P(ictures and Associated Audio". Similar MPEG1,
acest standard internaţional (IS-13818 / noiembrie 1994) include extensii, ce pot acoperi
cerinţele unei game largi de aplicaţii video numerizat, de înaltă calitate, pentru publicul larg:
bănci de imagini, enciclopedii multimedia, etc. MPEG2 cere pentru video numerizat, de
calitatea emisiunii TV, un debit cuprins între 4 şi 9 Mbits/s. în plus, MPEG2 s-a dovedit eficient
şi pentru TV de înaltă definiţie şi s-a dezvoltat în ideea de a suporta formate de afişaj progresiv
şi intercalat. Ulterior, MPEG2 a evoluat pentru a suporta şi transmisii video, la o rată de
transfer de 2-15 Mbits/s prin cablu, prin satelit sau prin alte canale de comunicaţie. în forma
omologată la mijlocul anului 1994, standardul MPEG2 este definit ca un standard destinat
televiziunii, în principal prin satelit, pentru imagini de 724*480 pixeli (NTSC) şi de 720*576
pixeli (PAL) la debite de transfer mergând până la 40 Mbits/s.
85
MPEG1 şi MPEG2 au o structură constituită din 4 părţi principale, ce se referă una la
întregul sistem, prin descrierea sincronizării şi multiplexării semnalelor video şi audio, una la
componenta video, cuprinzând compresia semnalelor video, una la componenta audio,
insistând pe compresia semnalelor audio şi o alta privind testele de conformitate a operaţiilor,
descriind procedurile pentru determinarea caracteristicilor fluxurilor de date şi a procesului
de decodare, precum şi procedurile pentru testarea conformităţii cu cerinţele specificate în
primele trei părţi.
MPEG3 - este o specificaţie care nu există de sine stătător, ea fuzionând cu MPEG2 pe

măsura evoluţiei acesteia. Având ca obiectiv iniţial aplicaţiile televiziunii de înaltă definiţie
(TVHD), MPEG3 lucrează cu o eşantionare de până la 1920*1080*30Hz şi cu debite cuprinse
între 20 şi 40 Mbits/s. Mergându-se pe un compromis optim între frecvenţa de eşantionare şi
comprimarea fluxului de biţi s-a observat că standardul MPEG3 poate fi susţinut prin cerinţele
reformulate ale standardului
MPEG2.
MPEG4 - este denumită şi "Very Low Bit Rate Audio-Visual Coding". Pentru acest
standard prima listă de propuneri a fost deschisă la 1 octombrie 1995, el,fiind destinat
codificării video numeric la debite joase, cuprinse între 4800 şi 64000 bits/s pentru imagini de
170*144*10 Hz. Primele versiuni ale standardului au fost anunţate pentru sfârşitul anului
1996, dar definitivarea lui este prevăzută pentru anul 1998. Obiectivele acestui standard
vizează comunicaţiile multimedia interactive, videofonia, poşta electronică multimedia, ziare
interactive, bazele de date. Datorită acestor debite scăzute, se permite, spre exemplu,
videofonie digitală pe linii telefonice analogice. Ca suport software se mizează pe perfectarea
unor noi tehnici de comprimare ultraperformante, pe bază de fractali şi funcţii iterate.
MPEG7 şi MPED21 se folosesc pentru inserarea de adnotări şi alte metadate video.
Standardul de compresie video MPEG1 se încadrează în clasa generală a algoritmilor

hibrizi de tip predicţie-transformare, ceea ce înseamnă că mai multe tehnici de compresie
sunt angajate combinat, pentru creşterea performanţei globale a sistemului, şi anume:
• analiza spectrală ce utilizează Transformarea Cosinus Discretă - DCT, prin care

repetabilitatea este surprinsă printr-o suprapunere de funcţii periodice, de tip
sinusoidal. Prin transformări matematice, de tipul funcţiilor Fourier, Cosinus Discret,
Walsh-Hadamard, datele iniţiale ale unui bloc de 8 * 8 pixeli sunt asociate frecvenţelor
spaţiale. în acest fel, blocul de 8 * 8 pixeli se transformă într-un ansamblu de 64 de
valori discrete, coeficienţi DCT. Dintre aceştia se vor reţine numai aceia care sunt
semnificativi. Aceşti coeficienţi vor fi cuantificaţi cu valori cuprinse între 0 şi 255,
asigurându-se eliminarea informaţiei vizuale nepercepute.
86
• codajul de tip Huffman, pentru date; codajul predictiv, pentru mişcări înainte şi înapoi,
prin care anumite mişcări sunt reconstituite în totalitate prin interpolare, plecând de la
imaginile anterioare şi de la cele posterioare;
• codajul diferenţial, ce presupune reţinerea doar a diferenţelor faţă de o altă imagine.
Stocarea fără comprimare a cadrelor care se succed într-o secvenţă video, pe un anumit
suport de informaţie, conduce la depăşirea rapidă a spaţiul disponibil fără a mai lua în
considerare şi ritmul lent de redare. MPEG reuşeşte să rezolve problema limitării resurselor
prin operaţia de comprimare.
Compresia video MPEG este una de tip asimetric, în sensul că operaţia de codificare este
mult mai complexă şi cu timpi de desfăşurare mai mari decât cea de decodificare. Semnalul
video şi audio comprimat prin această operaţie trebuie să-şi păstreze sincronizarea iniţială.
Pentru a menţine informaţia de timp asociată acţiunii în mişcare, codorul foloseşte un ceas
intern, prin care se asigură integrarea şi vehicularea acesteia împreună cu semnalul digitizat.
Toţi algoritmii folosiţi de acest standard au ca scop fie reducerea informaţiilor

redundante sau care se repetă, fie aproximarea unora pornind de la cele existente şi care sunt
deja stocate.
Mai concret, pentru imaginile video, compresia MPEG acţioneză prin reducerea
caracteristicilor de luminanţă şi chrominanţă ale semnalului YUV. Aceste caracteristici sunt
gestionate în bloc, prin convertirea lor în frecvenţe, care sunt apoi cuantificate. Această
transformare produce o reducere a dimensiunii secvenţelor video. Astfel se foloseşte un
format SIF (Standard Image File) pentru comprimare, ce prevede o numerizare pe trei
componente YUV, de forma 4:2:0 şi nu 4:2:2, pentru a asigura reducerea debitelor de transfer.
Pentru acest format, atât pentru standardul PAL, adică 352 * 288 pixeli la 25 de cadre pe
secundă, cât şi pentru standardul NTSC, adică 352 * 240 pixeli la 30 de cadre pe secundă, se
obţine o reducere substanţială la 176 * 144 pixeli pentru semnalul PAL şi respectiv de 176 *
120 pixeli, pentru NTSC. Rezoluţiile admise pentru reducere pot fi de la cele prevăzute de
CCIR-601 (704 * 480), până la cele mai mari, de dimensiune 4095 * 4095.
4.3.7. Video în context Web

Elementul HTML este utilizat pentru a încorpora conținut sonor în aplicații web este
<video>. Poate conține una sau mai multe surse audio, reprezentate folosind atributul ”src”
sau elementul <source>, dintre care browser-ul îl va alege pe cel mai potrivit.
<video controls>
<source src="foo.webm" type="video/webm">
<source src="foo.ogg" type="video/ogg">
<source src="foo.mov" type="video/quicktime">
I'm sorry; your browser doesn't support HTML5 video.
</video>
87
Figura 4-1. Element de tip <video>
Cele mai importante atribute ale elementului <video> sunt:
▪ autoplay (bool) – redarea automată a sunetului

▪ controls (string) – controalele de redare sunt afișate dacă atributul este prezent
▪ loop (bool) – permite redarea continuă a sunetului
▪ src (string)– permite specificarea sursei fără utilizarea de tag-uri de tip source
Atributele elementului <source> sunt:
▪ src (string) – adresa (URL) fișierului audio

▪ type (string) – tipul MIME pentru fișierul audio
Proprietățile obiectului HTMLMediaElement sunt:
▪ currentSrc – URL-ul absolut al fișierului redat

▪ currentTime – poziția (în secunde) în cadrul fișierului (poate fi modificată)
▪ duration – durata totală a fișierului audio (în secunde)
▪ ended – boolean setat pe true la terminarea redării
▪ error – ultima eroare (obiect MediaError) sau null dacă nu a apărut nici o eroare
▪ paused – boolean setat pe false la oprirea redării
▪ readyState – indică starea curentă a elementului
▪ volume – permite citirea / modificarea volumului
Metodele obiectului HTMLMediaElement sunt:
▪ canPlayType(type) – permite aplicației să determine dacă browser-ul curent suportă

un anumit tip de fișier audio
▪ load() – pornește procesul de descărcare a fișierului audio de pe server; este
obligatoriu să fie apelat înainte de începerea redării folosind metoda play()
▪ pause() – oprește redarea (cu păstrarea poziției curente)
▪ play() – pornește redarea de la poziția curentă
Evenimentele obiectului HTMLMediaElement sunt:
▪ canplay – a fost încărcată o parte din fișier și poate fi pornită redarea

▪ ended – redarea s-a terminat
▪ pause – redarea a fost oprită
▪ play – redarea a început
▪ volumechange – modificare de volum
▪ waiting – operația curentă este suspendată pentru a încărca date de pe server
Procesarea cadrelor dintr-un fișier video se poate realiza cu ajutorul unui element de tip
canvas, așa cum se poate observa în Figura 4-2.
88
var W = canvas.width = video.clientWidth;
var H = canvas.height = video.clientHeight;
context.drawImage(video, 0, 0, W, H);
var imageData = context.getImageData(0, 0, W, H);
for (var y = 0; y < H; y++) {
for (var x = 0; x < W; x++) {
var i = (y * W * 4) + x * 4;
// change values in imageData.data[i+...]
}
}
}
context.putImageData(imageData, 0, 0);
// other canvas drawing operations
Figura 4-2. Procesare cadru video

timp și rezistența la copieri repetate și posibilitatea de transmitere la distanță. Principalele
caracteristici ale fișierelor video digitale sunt: rezoluția, spațiul de culoare și numărul de biți
per pixel, numărul de cadre pe secundă, modul de afișare (întrețesut sau progresiv) și calitatea
compresiei. Compresia video se bazează pe existența unei redundanțe sau pe specularea unei
repetabilități. Fișierele de tip video pot fi utilizat în context aplicațiilor web cu ajutorul
elementului de tip <video>.

video video analog
compresia video video digital
PAL NTSC
MPEG

Aplicația 1. Definiți conceptul de video digital.
Răspuns: Video digital – cuprinde totalitatea tehnicilor de captură, procesare și stocare a

imaginilor în mișcare (precum și a sunetului asociat) prin intermediul unui dispozitiv de calcul.
Aplicația 2. Cum pot fi utilizat fișierele video în contextul aplicațiilor web?
Răspuns: Fișierele de tip video pot fi utilizat în context web cu ajutorul elementului de tip
<video>.
89
Aplicația 3. Realizați o aplicație care să permită controlul secvențelor de tip <video>, similar
cu cea prezentată în Figura 4-3.
Figura 4-3. Control secvență video
Răspuns:
Regăsiți în cele ce urmează codul HTML și JavaScript aferent aplicației.
<!DOCTYPE html>
<html>
<head>
<title>Video - Simple Player</title>
</head>
<body>
<video id="video">
<source src="../media/tears-of-steel-battle-clip-
medium.mp4" type="video/mp4" />
medium.ogg" type="video/ogg" />
Your browser doesn't support HTML5 video.
</video>
<div class="controls">
<a id="btnStop" href="#">Pause</a>
<a id="btnControls" href="#">Hide Controls</a>
</div>
<script>
"use strict";
90
let video = document.getElementById("video");
let btnStop = document.getElementById("btnStop");
let btnControls = document.getElementById('btnControls');
//Play/Pause
btnStop.addEventListener('click', function (e) {
//prevent the browser from navigating to # (adding # to the ur

l)
//https://api.jquery.com/event.preventdefault/
//http://stackoverflow.com/questions/30473581/when-to-use-
preventdefault-vs-return-false
e.preventDefault();
if (video.paused) {
video.play();
btnStop.textContent = "Pause";
}
else {
video.pause();
btnStop.textContent = "Play";
}
});
//Show/Hide Controls
btnControls.addEventListener('click', function (e) {
e.preventDefault();
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
btnControls.textContent = "Show Controls";
} else {
video.setAttribute("controls", "")
//we put "" because the controls atribute has no value <vi
deo controls></video>
//https://developer.mozilla.org/en/docs/Web/API/Element/se
tAttribute
btnControls.textContent = "Hide Controls";

}
});
</script>
</body>
</html>
91
Aplicația 4. Realizați o aplicație care să permită aplicarea de efecte asupra fișierului rulat prin
intermediul elementului de tip <video>. Interfața aplicației va fi similară cu cea din Figura 4-4.
Figura 4-4. Aplicare de efecte pe video
Răspuns:
<!DOCTYPE html>
<html>
<head>

<link
rel="stylesheet"
rap.min.css"
integrity="sha384-
<title>HTML5 Video Effects (pixel manipulation)</title>

</head>
<body>
92
<div class="alert alert-info">

The video might not be processed correctly due to HTTP access
control (CORS). If this is the case, in Chrome Developer tools
(Console tab) the following error will be displayed: "Unable t
o get image data from canvas because the canvas
has been tainted by cross-
origin data". Learn more about HTTP access control (CORS) <a title="HTTP a
ccess control (CORS)"
href="https://developer.mozilla.org/en-
US/docs/Web/HTTP/Access_control_CORS" target="_blank">here</a>.
</div>
<div class="row">
<div class="col-sm-6"> 
<h2>Original</h2>
<div class="embed-responsive embed-responsive-16by9">
<video id="video" controls autoplay loop muted crossor
igin="anonymous" class="embed-responsive-item">
</video>
</div>
<br>
</div>
<div class="col-sm-6">
<h2>Transformed</h2>
<canvas id="canvasProcessed"></canvas>
</div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">

<div class="btn-group" role="group" aria-label="...">
<!-
- https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attribut
es -->
<button type="button" class="btn btn-
default effectType" data-effect="normal">Normal</button>
</div>
<div class="btn-group" role="group" aria-label="...">
93
default effectType" data-effect="rotation">Rotation</button>
default effectType" data-effect="emboss">Emboss</button>
default effectType" data-effect="blackWhite">Black & White</button>
default effectType" data-effect="threshold">Threshold</button>
default effectType" data-effect="sephia">Sephia</button>
default effectType" data-effect="invert">Invert Colors</button>
default effectType" data-effect="pixelate">Pixelate</button>
default effectType" data-effect="twoChannels">2 Channels</button>
default effectType" data-effect="red">Red</button>
default effectType" data-effect="green">Green</button>
default effectType" data-effect="blue">Blue</button>
</div>
</div>
</div>
<script src="js/video-effects.js"></script>
</body>
</html>
"use strict";
//Note: global letiables should be avoided. Learn more at: https://www.w3.

org/wiki/JavaScript_best_practices#Avoid_globals
let effect = "normal";
let video = document.getElementById('video');

let canvas = document.getElementById('canvasProcessed');
let context = canvas.getContext('2d');
let buttons = document.getElementsByClassName("effectType");

for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
94
//Restores the previously saved canvas state
context.restore();
//Saves the entire state of the canvas by pushing the current stat
e onto a stack
context.save();
//more about the data attribute: https://developer.mozilla.org/en/
docs/Web/Guide/HTML/Using_data_attributes
window.effect = this.dataset.effect;
});
}
video.addEventListener('play', function () {
draw(video, context);
//TODO add the code for resizing the canvas here
}, false);
function draw(video, context) {

if (video.paused || video.ended) {
return false;
}
switch (effect) {
case "normal":
context.drawImage(video, 0, 0, video.clientWidth, video.client
Height);
break;
case "rotation":
let unghi = 3 * Math.PI / 180;
let ct = Math.cos(unghi), st = Math.sin(unghi);
let x = video.clientWidth / 2, y = video.clientHeight / 2;
context.transform(ct, -st, st, ct, -
x * ct - y * st + x, x * st - y * ct + y);
Height);
context.fillText("Rotation Effect", 10, 10);
break;
case "emboss":
//further reading http://html5doctor.com/video-canvas-magic/
Height);
let imageData = context.getImageData(0, 0, video.clientWidth,
video.clientHeight);
let pixels = imageData.data;
let imgDataWidth = imageData.width;
for (let i = 0; i < pixels.length; i++) {

if (i % 4 != 3) {
95
pixels[i] = 127 + 2 * pixels[i] - pixels[i + 4] - pixe
ls[i + imgDataWidth * 4];
}
}
context.fillText("Emboss Effect", 10, 10);
break;
case "blackWhite":
//context.drawImage(video, 0, 0, video.clientWidth, video.clie
ntHeight);
//let imageData = context.getImageData(0, 0, video.clientWidth
, video.clientHeight);
//process the pixels
//context.putImageData(imageData, 0, 0);
break;
}
//The setTimeout() method calls a function or evaluates an expression

after a specified number of milliseconds.
//Tip: 1000 ms = 1 second.
//66ms ~= 15fps
setTimeout(draw, 66, video, context);
}
Aplicația 5. Realizați o aplicație care să implementeze prelucrarea ilustrată în Figura 4-5

asupra elementului de tip <video>
96
Figura 4-5. Afișare moment curent de timp pe video
Răspuns:
<!DOCTYPE html>
<html>
<head>

<link
rel="stylesheet"
rap.min.css"
integrity="sha384-
97
<title>Video - Processing</title>
</head>
<body>
<div class="alert alert-info">

The video might not be processed correctly due to HTTP access
control (CORS). If this is the case, in Chrome Developer
tools (Console tab) the following error will be displayed: "Un
able to get image data from canvas because the
canvas has been tainted by cross-
origin data". Learn more about HTTP access control (CORS) <a title="HTTP a
ccess control (CORS)"
href="https://developer.mozilla.org/en-
US/docs/Web/HTTP/Access_control_CORS" target="_blank">here</a>.
</div>
<video id="video" controls autoplay crossorigin="anonymous">

</video>
<br>
<canvas id="canvas"></canvas>
</div>
<script>
"use strict";
let video = document.getElementById("video");

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
//resize the video

video.addEventListener('canplay', function(){
canvas.width = video.clientWidth;
canvas.height = video.clientHeight;
});
//draw the video on the canvas

function draw () {
context.drawImage(video, 0, 0);
98
const imageData = context.getImageData(0, 0, canvas.width, canvas.
height);
const pixels = imageData.data;
for (let y = 0; y < imageData.height; y++) {

for (let x = 0; x < imageData.width; x++) {
// pixels[i] - Red
// pixels[i+1] - Green
// pixels[i+2] - Blue
// pixels[i+3] - Opacity
// pixel aflat la coordonatele (x, y)

const offset = (( imageData.width * y) + x) * 4;
//make the first 30 lines darker

if (y < 30) {
pixels[offset] /= 2;
pixels[offset + 1] /= 2;
pixels[offset + 2] /= 2;
}
}
}
context.font = 'bold 16px sans-serif';

context.fillStyle = "white";
context.fillText("Time: " + video.currentTime.toFixed(1) + "s", 10
, 22);
//The toFixed() method formats a number using fixed-point notation
//Number.prototype.toFixed(): https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
//An alternative approach would be to use setTimeout()

//The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
//Tip: 1000 ms = 1 second.
//33ms ~= 30fps
</script>
</body>
</html>
99
1. Salvați un fișier video în mai multe formate diferite, utilizând algoritmi și setări de
compresie diferite. Comparați dimensiunea fișierelor rezultate și calitatea acestora.
2. Analizați similaritățile între elementele HTML <audio> și <video>. Care considerați că este
motivul acestor similarități?

Bucuresti 2008
100
Bibliografie
Bucuresti 2008
▪ Vaughan, T., Multimedia – ghid practic, Teora, Bucuresti, 2004, România
▪ Ionita, C., Seminarii multimedia, 2020,
http://ase.softmentor.ro/Multimedia/multimedia.htm, România
101

Multimedia - Suport de Curs Pentru Autoinstruire

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Multimedia - Suport de Curs Pentru Autoinstruire

Încărcat de

Drepturi de autor:

Formate disponibile

ACADEMIA DE STUDII ECONOMICE BUCUREȘTI

FACULTATEA DE CIBERNETICĂ, STATIISTICĂ ȘI INFORMATICĂ

Suport de curs pentru autoinstruire

Titular disciplină: conf. univ. dr. Liviu-Adrian COTFAS

1.2. Obiectivele și competențele unității de studiu

▪ înțelegerea conceptului de multimedia;

Competențele unității de studiu:

▪ studenții vor putea să definească conceptul de multimedia;

Durata medie de studiu individual alocat unității: 2 ore

1.3. Conținutul unității de studiu

1.3.1. Evoluție și concepte generale

▪ Informatică (aplicatii multimedia, baze de date multimedia)

Procesul de compresie / decompresie a datelor nu este specific resurselor multimedia.

In general, algoritmii de compresie identifică o anumită redundanță în volumul de date

Tehnologii care au facilitat apariţia şi dezvoltarea multimediei ca tehnologie:

Tehnologii de stocare a informaţiilor – suportul optic de stocare a informaţiilor (CD, DVD),

Tehnologii de transfer la distanţă a datelor, materializate prin reţele de calculatoare

Tehnologii de compresie/decompresie a datelor, în sensul că, echipamente de procesare

Alte concepte cu care operează multimedia:

HYPERMEDIA – similar hypertext , este un element de legătură diferit de un

▪ Multimedia authoring – dezvoltă aplicaţii multimedia folosind produse software de

Ele includ o varietate de componenete preprogramate ce permit recunoaşterea mai

▪ Multimedia programming – foloseşte medii de programare (.NET, medii bazate pe

1.3.2. Clase de aplicații multimedia

o Medicină, sunt echipamentele periferice: ecograful, computer tomograf, etc.

o Comunicaţii prin aplicatiile de tip videoconferinţă sunt din ce in ce mai utilizate,

o Aplicaţii de interes public şi personal de exemplu: infochioscurile, jocurile pe

1.3.3. Condiții hardware și software pentru multimedia

scannere sunt Flatbed – paginile se aseaza pe o suprafata de

o Achiziţii de secvenţe VIDEO:

Condiţii SOFT, ne axam pe prezentarea componenetelor software:

✓ Achiziţie prelucrare imagini: in general au unelte pentru bitmap cit

CORELL IMAGINE CORELL TRACE

✓ Achiziţii prelucrare sunet:

Adobe Audition Sound Forge

✓ Achiziţii prelucrare / editare video

▪ Produse software pentru creație multimedia după filozofia de organizare a proiectului

✓ Soft de creaţie multimedia ce-şi dezvoltă aplicaţia pe baza unei

1.4. Dezvoltarea de aplicații multimedia cu ajutorul HTML5, CSS3, JavaScript

Dezvoltarea aplicațiilor web se realizează cu ajutorul limbajelor HTML, JavaScript și CSS.

1.4.1. Limbajul JavaScript

<script type="text/javascript" src="lib/test.js"></script>

1.5. Sinteza unității de studiu

Tehnologii care au facilitat apariția și dezvoltarea multimediei ca tehnologie sunt:

Aplicația 1.2. Explicați diferența dintre conceptele de hypertext și hypermedia.

HYPERTEXT – se folosesc pt parcurgerea non secventiala a unui document. In acest caz

1.8. Întrebări de control și teme de dezbatere

2. În ce context este recomandabilă utilizarea aplicațiilor de creație multimedia care

3. În ce context este recomandabilă utilizarea aplicațiilor de creație multimedia care

4. În ce context este recomandabilă utilizarea aplicațiilor de creație multimedia care

1.9. Bibliografie obligatorie

2.2. Obiectivele și competențele unității de studiu

▪ cunoașterea formatelor de reprezentare a imaginilor;

Competențele unității de studiu:

▪ studenții vor cunoaște avantajele și dezavantajele imaginilor raster;

Durata medie de studiu individual alocat unității: 2 ore

2.3. Conținutul unității de studiu

1. Model aditiv de culoare (reprezentativ RGB). In modelul aditiv se porneste de la

Figura 2.1. Reprezentarea imaginilor color în spaţiul RGB

2. modelul substractiv (reprezentativ CMYK) se mai numeste si modelul bazat pe

Diferenta intre RGB si CMYK

In orice prezentare multimedia, elementul imagine este aproape nelipsit, întrucât

Există două tipuri principale de imagini grafice:

▪ vectorială - utilizat pentru desene grafice, de la desene și logo-uri simple la creații