Le multimédia.

Présentation au sujet: "Le multimédia."— Transcription de la présentation:

1 Le multimédia

2 Le multimédia Comprend le texte, l'image, le son et la vidéo.
Sur le web, les documents multimédia peuvent être embarqués dans les pages Un support de plus en plus grand dans les navigateurs et HTML (notamment HTML 5).

3 Formats du multimédia Les données multimédia sont stockées ans des fichier dits fichiers média En fonction du type du document et la technique de codage/décodage, les documents sont stockés dans des fichiers qui ont différentes extensions: .html, .gif, .jpg. wma, .mov, .mpg, .mp3, .ogg,…

4 Images vectorielles Représentées par des objets géométriques:
Polygones, segments, vecteurs, arcs de cercles, etc. Chaque objet a des attributs: couleur, coordonnées, forme, etc. Il ne sont pas formés de pixels comme dans le cas des bitmaps. Exemples : Vizio, SVG,…

5 Propriétés des images Résolution: nombre de pixels dans une image
Plus haute résolution = meilleure image. Exemple: Haute résolution : x 1200 = Mpixel Basse résolution : x = Mpixel Taille de l'image: Exemple: si chaque pixel occupe un octet (8 bits), une image de 640 x 480 occupe 300 kilo-octets. Profondeur des couleurs Nombre de bits pour stocker une couleur. 1 bit, 8 bits, 16 bits, 24 bits, Plus on a de bits, plus on peut stocker de couleurs différentes Plus le fichier image est gros Nécessité de compression

6 Tailles des images et transferts
Une image plus grande prend plus de temps de téléchargement Techniques: Augmenter le taux de compression Réduire la profondeur des couleurs Une image de 16 ou 256 couleurs pourrait faire l'affaire Utiliser des petites images (icônes) comme pointeurs vers les vraies images … <ul> <li><A href="lama.jpg"> <img src="petite_lama.jpg" border=0> </a> <li><A href="vache.jpg"><img src="petite_vache.jpg" border=0> </a> </ul> images.html

7 Les couleurs Noir et blanc (monochrome) : 1bit/pixel
Chaque pixel est stocké dans un bit (0 ou 1) Niveaux de gris : 4 bits/pixel typiquement Chaque pixel est représenté sur 4 bits. La valeur exprime le niveau (0 – 15) Du plus sombre (0) au plus clair (15) Couleurs : 8, 16 ou 24 bits/pixel. 8 bits/pixel : possibilité de 256 couleurs. 16 bits/pixel: possibilité de 65,536 couleurs. 24 bits/pixel: possibilité de 16,777, 216 couleurs.

8 Le images couleur 8 à 24 bits par pixel pour stocker l'information de couleur. Les images à 24 bits occupent un espace disque plus grand Un fichier image de 640 x 480 à 24 bits/pixel occupe bits = /8 = octets= 921,6 Ko La plupart des formats d'images sur le web incorporent des algorithmes de compression pour réduire la taille de l'image.

9 Compression d'images Les techniques de compression partent d'un bitmap: Tableau 2D formé de pixels représentant l'image. Techniques sans pertes (Lossless): La compression garde l'image intacte On peut la restituer avec la décompression Exemple: GIF Techniques avec pertes (lossy): Certaines informations sont supprimées La compression est plus importante (dépendamment de l'image). La taille du fichier est plus petite Exemple: JPEG Image Compression compressée Décompression Image compressée Image Compression Image' Décompression

10 Les images couleur 24 bits
Chaque pixel est représenté par 3 octets Exemple: RGB représenté avec trois nombres hexa-décimaux (ex. #77AA2C) Composantes RGB (Red-Green-Blue), chacune codée sur 8 bits. R: 256 niveaux - de 0 à 255 (0x00-0xFF) G: 256 niveaux - de 0 à 255 (0x00-0xFF) B: 256 niveaux - de 0 à 255 (0x00-0xFF) Le codage RGB donne: 256x256x256 = 16,777,216 couleurs: Qui ne sont pas toutes présentes dans une même image ! On peut réduire la taille du fichier en travaillant sur 8 bits uniquement.

11 Codes HTML de couleurs couleurs.html
Nom HTML Code RG Red #FF0000 Green #00FF00 Blue #0000FF White #FFFFFF Turquoise #00FFFF Light Grey #C0C0C0 Dark Grey # Dark Blue #0000A0 Black # Light Purple #FF0080 Orange #FF8040 Dark Purple # Brown # Yellow #FFFF00 Burgundy # Forest Green # Pink #FF00FF Grass Green # … couleurs.html

12 Palette des couleurs Extraire des éléments 8 bits à partir de 24 bits.
Chaque octet est un pointeur vers une table (appelée Palette de couleurs) contenant des éléments de 24 bits Les couleurs de la palette: Offertes par le système Obtenues à partir des couleurs les plus fréquentes de l'image.

13 Palette de couleurs 24 bits
BBE0E3 BBE0E3 000000 FF3300 808080 1 1 2 3 4 000000 2 FF3300 FF3300 FFFFFF BBE0E3 FFFFFF 3 5 1 5 3 808080 4 FFFFFF 99CC00 333399 0099FF 5 FFFFFF 5 6 7 8 6 99CC00 663300 0099FF 333399 0000FF 9 8 7 10 7 333399 8 0099FF 9 Fichier 663300 10 0000FF Palette

14 Standard GIF Graphics Interchange Format Compression sans parte
Standard populaire sur le web Produit des couleurs de qualité acceptable Mieux adapté aux images avec peu de couleurs distinctes (i.e. graphiques, dessins, etc.) Supporte l'entrelacement, l'animation et la transparence des couleurs.

15 Processus GIF On réduit les couleurs de 24 bits à 8 bits
On code les répétitions par un algorithme (LZW) de codage des séquences qui se répètent: On code les couleurs les plus fréquentes par des chaines plus courtes 1:8b ( 8 bleus) 2;1b-7v (1 bleu, 7 verts) 3:1b-7v 4:1b-7v 5:1b-3r-4v 6:1b-3r-4v 7:1b-3r -4v 8:1b-1r-1v-1r-1v-1b-1v-1r

16 Entrelacement Interlacing: Affichage progressif par entrelacement
Permet de télécharger et afficher les images de manière graduelle en plusieurs passes Permet de prendre une décision avant le téléchargement complet de l'image: Plus adapté pour les connexions à débit faible.

17 Transparence Permet de rendre transparentes des portions d'une image
Ces portions sont définies par une couleur que l'on sélectionne ! Tout ce qui est sous ces portions (en général l'arrière-plan) paraitra

18 Standard JPEG Joint Photographic Experts Group. Standard pour le web
Compression avec perte Prend avantage de certaines limitations du système de vision humaine pour effectuer la compression On ne peut pas toujours distinguer les différences subtiles de couleurs Permet de choisir un taux de compression Haut taux = image de moindre qualité Donne des images de bonne qualité sur diverses tailles d'écran

19 Processus JPEG On transforme l'image par petits blocs
On applique une transformation mathématique (DCT) qui fait que les valeurs les plus fortes sont au début d'une matrice On applique une numérisation pour enlever les valeurs faibles (perte) On balaie la matrice résultante et applique un algorithme de compression semblable à LZW

20 Processus JPEG

21 Format TIFF Tagged Image File Format
Format développé par Adobe et utilisé sur les plateformes Apple. Peut stocker plusieurs types de profondeurs : 1-bit, 8-bit, 24-bit, etc. Il est sans perte mais on peut le faire fonctionner comme JPEG grâce à un tag interne

22 Format PNG Portable Network Graphics
Conçu comme amélioration (Logiciel libre) de GIF Offre jusqu'à 48 bits /pixel pour les coleurs Offre des fonctions de : Correction des images pour un meilleur affichage Contrôle de la transparence Entrelacement De plus en plus reconnu par les fureteurs

23 Images sur le web Une image sur le Web est de qualité réduite Raisons:
Minimiser l'usage de la bande passante. Diminuer les stockages La qualité de l'image est aussi exprimée en PPI (Pixel Per Inch) ou DPI (Dot Per Inch) Comparaison: Résolution d'une image sur le web: 70 PPI. Résolution d'une photo : 300 PPI !

24 L'audio sur le web La voix est stockée sous forme numérique grâce à un mécanisme d'échantillonnage (numérisation). Taux d'échantillonnage: Nombre d'échantillons par seconde (exprimé en Hertz) 8 KHz : Qualité téléphone 44.1 KHz: Qualité CD Nouveaux standards: 96 KHz (DVD) … non web.

25 Numérisation du son Le signal analogique est échantillonné et la valeur du niveau du signal est stockée sous forme binaire. Taille de l’échantillon Qualité téléphone: 8 bits. Débit 64 Kbps. Niveau (0-255) Numérisation Un son

26 L'audio sur le web Résolution: Canaux: Débit (en bps)
Nombre de bits par échantillon Plus de bits donne une meilleure qualité de son. Exemples: 8 bits (téléphone), 16 bits (CD), … Canaux: Un canal pour les sons mono. 2 canaux pour les sons stéréo Même plus (ex. 5 canaux pour Surrond sound) Débit (en bps) Dépend de la résolution, de la fréquence d'échantillonnage et du nombre de canaux. Exemple: Fréquence : 8000 Hz. Résolution: 8 bits => Débit: 64 Kbps.

27 Streaming Évite de télécharger le document au complet avant de le jouer: Trop lent et demande trop d'espace disque Streaming: Jouer en continue à partir d'un serveur Exemple: Youtube Avantages: Jouer juste après le début du streaming Un meilleur contrôle sur la distribution des documents - Droit d'auteur !

28 Streaming Mémoriser des données dans une mémoire tampon du récepteur pendant une période de temps avant de les jouer Télécharger de nouvelles données dans le buffer pour le garder suffisamment plein Adapter le flot de données qui arrive à un certain débit (Débit Réseau) au flot d’affichage (Débit d’affichage) Débit Réseau Application Média Débit d'affichage Serveur Média Buffer

29 Protocoles de streaming
RTP et UDP Protocoles rapide pour le transport des données Utilisés par les produit Microsoft et QuikTime RTSP: Protocole de contrôle de l'affichage des fonction VCR. Inclus dans les contrôles ActiveX

30 Audio WAF/AIFF Extensions: .wav,.aif, .aiff .wav - Microsoft
.aiff : Audio Interchage Aile Format – Apple Très bonne qualité de son: Plusieurs canaux. Échantillonnage à 8 KHz et 11 KHz Pauvres taux de compression Moins adaptés pour le streaming .wav est supporté par Windows et tous les navigateurs (excepté Google Chrome)

31 Audio MP-3 Extension: .mp3
Motion Picture Expert Group - Layer III (Audio) Standard originalement conçu pour la vidéo Très bonne qualité Utilise très peu d'espace disque Jusqu'à 10% de la taille originale Compression (avec perte) basée sur la perception des sons par les humains Famille de standards : MPEG-1 : vidéo VHS MPEG-2: vidéo pour la télé

32 Audio MIDI Extension: .mid Musical Instrument Digital Interface
Développé pour les instruments électroniques La musique est stockée sous forme de commandes qui produisent des notes Les documents MIDI occupent très peu d'espace Bons pour les sons de background : Parfois ennuyeux ! Non utilisé pour le streaming

33 Audio RealMedia RealMedia ou RealAudio Extensions: .rm .ra, .ram
Pionnier pour le streaming et les diffusions en direct Exige un serveur : RealServer Technologie ajustable aux débits des usagers Disponibilité du plugin RealPlayer sur différentes plateformes (Windows, Mac, Unix) et navigateurs Offre la possibilité de pseudo-streaming

34 Audio Windows Media Extensions: .wma, .asf Un système de streaming
Les paramètres du média (Métafichier) sont stockés dans un fichier .asf (Active Streaming File) Serveur disponible sur Windows Le codec utilise plusieurs débits (16 Kbps – 192 Kbps)

35 Audio QuickTime Extension: .mov Introduit par Apple
Streaming utilisant RTP et RTSP Container pour plusieurs types de média : Images (JPEG, GIF,…), Audio (MP3, …) et vidéo (MPEG-1,Flash, …) Disponible sur différentes plateformes et navigateurs Intégré dans iTune de Apple

36 L'audio sur une page Web On a plusieurs façons d'inclure des documents audio dans une page On peut utiliser un hyperlien vers un document Dans HTML4, on peut embarquer un document dans la page avec <embed> ou <object> Plutôt compliqué de les utiliser! HTML5 a ajouté une balise spéciale <audio> plus simple d'utilisation <a href="musique/chanson.wav"> Ecouter ! (3.4 MB) </a> <a href="musique/chant.wav"> <img src="jouemoi.gif"> </a> <embed SRC="chanson.wav" align="center" >

37 La vidéo sur le web Une vidéo consiste en des images (frames) qui s'affichent à un certain débit (frames/seconde ou fps) Nombre d' images par seconde (frame rate): Standard TV: 30 images/seconde (fps) Sur le web: 10 ou 15 fps , très acceptable. Taille de chaque frame Impact sur la taille du document Exemples: 640 px x 480 px, 160 px x 120 px

38 La vidéo sur le web Taille du document: Résolution : Qualité:
Un gros handicap (1 min = n x10 Mo) Considérer le streaming Résolution : Nombre de bits/couleur dans chaque pixel Ex: 8, 24 bits/pixel Réduire ce nombre, réduit la taille du document Qualité: Dépend essentiellement de la compression

39 La vidéo sur le web Débit en bits/seconde
Débit requis : dépend du fps et de la taille de chaque image Débit offert: plus c'est haut, plus on peut jouer le document de manière continue: Haute vitesse pour une meilleure Qualité de Service

40 Compression de la vidéo
Avec ou sans perte Souvent avec pertes: On se débarrasse des informations superflues On réutilise les informations statiques Exemple: MPEG Spatiale ou temporelle; Spatiale: compression appliquée à chaque frame Temporelle: ne pas répéter les informations qui n'ont pas changé durant les frames précédentes On garde des frames de référence (ex. 1 frame sur 15)

41 Processus MPEG

42 Processus MPEG On part de petit blocs qu'on représente par un format plus maniable que RGB (Y Cr Cb) Y = 0.299R G B Cr = R G B = 0.492(B - Y) Cb = 0.615R G B = 0.877(R-Y) On applique le codage JPEG On ne garde que des frames significatives: On déduit les autres du changement d'une frame à une autre par compensation

43 Les codecs De nouveaux standards: ogg,..
Outils de Compressions/Décompression (Codecs) permettant de coder et de restituer le document multimédia pour l'afficher Il y en existe un grand nombre. Voir: Plusieurs sont disponibles sous forme de plug-in. Plugin: "Un logiciel qui complète un logiciel hôte pour lui apporter de nouvelles fonctionnalités" De nouveaux standards: ogg,..

44 Vidéo QuickTime Extension: .mov Extension: .rm Extensions : .wmv, .asf
Format introduit par Apple Existe aussi pour l'Audio Disponible en tant que plugin dans divers navigateurs Extension: .rm Standard industriel pour le streaming Son lecteur, RealPlayer, gratuit et très populaire Bon pour les longs clips et la diffusions à un grand nombre de clients Streaming via RTSP Extensions : .wmv, .asf Crée par Microsoft. Disponible dans l'environnement Windows. Joue les fichiers Windows Media Video (.wmv) et autres formats comme AVI, MPEG et QuickTime. Utilise le métafile (Advanced Streaming Format -.asf)

45 Vidéo QuickTime Extension: .avi Extensions: .mpg ou .mpeg
Produit de Microsoft. xRemplacé par .wmv L'audio et la vidéo sont entrelacés. Ce qui donne de documents de bonne qualité Extensions: .mpg ou .mpeg Moving Picture Expert Group Introduit d'abord dans l'environnement Unix. Désormais disponible sur toutes plateformes Donne des vidéos de qualité avec un bon taux de compression

46 Fichiers de description
Requête HTTP Navigateur Serveur web Réponse HTTP Fichier de description Serveur média Document multimédia

47 Veut etre le standard pour les vidéo dans HTML5.
Extension: .ogg  Format Open Source, basé sur Vorbis (Audio) et Theora (Video). Alternative à MP3 et WMA qui exigent une license. Qualité supérieurede compression. Extension: .webm Veut etre le standard pour les vidéo dans HTML5.

48 Le multimédia dans HTML5
De nouvelles balise ont été introduites: <audio> : pour inclure des documents audio <video> : pour inclure des documents vdiéo Une meilleure intégration avec JavaScript Voir plus loin ! <video src="movie.ogg" width="320" height="240" controls="controls"> Votre fureteur ne supporte pas l'affichage video ! </video> <audio>    <source src="chanson.ogg" type="audio/ogg">     <a href=" <cite>SI j'etais chanteur </cite></a>  de Boby Lapointe (format Ogg Vorbis)  </audio>