INF2005– Programmation web– A. Obaid Le multimédia.

Présentation au sujet: "INF2005– Programmation web– A. Obaid Le multimédia."— Transcription de la présentation:

1 INF2005– Programmation web– A. Obaid Le multimédia

2 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid Propriétés des images Résolution: nombre de pixels dans une image – Plus haute résolution = meilleure image. – Exemple: Haute résolution : 1600 x 1200 = 1.83 Mpixel Basse résolution : 640 x 480 = 0.29 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 INF2005– Programmation web– A. Obaid 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 … … images.html

7 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid 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 900 7372800 bits = 7372800 /8 = 921600 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 INF2005– Programmation web– A. Obaid 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 ImageCompression Image compressée Décompression Image Compression Image compressée Décompression Image'

10 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid Codes HTML de couleurs Nom HTMLCode RG Red #FF0000 Green#00FF00 Blue#0000FF White#FFFFFF Turquoise#00FFFF Light Grey#C0C0C0 Dark Grey#808080 Dark Blue #0000A0 Black#000000 Light Purple #FF0080 Orange#FF8040 Dark Purple #800080 Brown#804000 Yellow #FFFF00 Burgundy#800000 Forest Green#808000 Pink#FF00FF Grass Green#408080 … couleurs.html

12 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid BBE0E3000000 FF3300 808080 FF3300FFFFFF BBE0E3 FFFFFF 99CC003333990099FF 663300 0099FF3333990000FF 12 3 4 35 1 5 5678 9 8710 BBE0E3 000000 808080 FF3300 FFFFFF 99CC00 663300 0099FF 333399 0000FF 1 2 3 4 5 6 8 9 7 10 Palette Fichier Palette de couleurs 24 bits 24 bits 8 bits

14 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid Processus JPEG http://img.tomshardware.com/us/1999/09/24/video_guide_part_3/dct.gif

21 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid 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 INF2005– Programmation web– A. Obaid Inclusion des images On peut inclure une image avec On peut également utiliser l'élément

25 INF2005– Programmation web– A. Obaid L'élément Une alternative pour inclure des images des cartes: Soleil Mercure Venus

26 INF2005– Programmation web– A. Obaid 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.

27 INF2005– Programmation web– A. Obaid 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. Numérisation Niveau (0-255) 10110001 Un son

28 INF2005– Programmation web– A. Obaid L'audio sur le web Résolution: – 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.

29 INF2005– Programmation web– A. Obaid 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 !

30 INF2005– Programmation web– A. Obaid 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) Application Média Débit d'affichage Débit Réseau Serveur Média Buffer

31 INF2005– Programmation web– A. Obaid 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

32 INF2005– Programmation web– A. Obaid 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)

33 INF2005– Programmation web– A. Obaid 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é

34 INF2005– Programmation web– A. Obaid 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

35 INF2005– Programmation web– A. Obaid 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

36 INF2005– Programmation web– A. Obaid 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)

37 INF2005– Programmation web– A. Obaid 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

38 INF2005– Programmation web– A. Obaid 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 ou – Plutôt compliqué de les utiliser! HTML5 a ajouté une balise spéciale plus simple d'utilisation Ecouter ! (3.4 MB)

39 INF2005– Programmation web– A. Obaid 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

40 INF2005– Programmation web– A. Obaid La vidéo sur le web Taille du document: – 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

41 INF2005– Programmation web– A. Obaid 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

42 INF2005– Programmation web– A. Obaid 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) – Exemple: MPEG

43 INF2005– Programmation web– A. Obaid Processus MPEG http://www.backupdvd.info/Members/video/MPEG_explained.shtml

44 INF2005– Programmation web– A. Obaid Processus MPEG On part de petit blocs qu'on représente par un format plus maniable que RGB (Y Cr Cb) – Y = 0.299R + 0.587 G + 0.114 B – Cr = -0.147R - 0.289 G + 0.436B = 0.492(B - Y) – Cb = 0.615R -0.515G -0.100B = 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

45 INF2005– Programmation web– A. Obaid Les codecs 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: – http://en.wikipedia.org/wiki/Comparison_of_audio_codecs http://en.wikipedia.org/wiki/Comparison_of_audio_codecs 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,..

46 INF2005– Programmation web– A. Obaid Vidéo QuickTime Extension:.mov Format introduit par Apple Existe aussi pour l'Audio Très disponible Devenu un container pour d'autres types de média Disponible en tant que plugin dans divers navigateurs Supporte le streaming

47 INF2005– Programmation web– A. Obaid Vidéo RealMedia Extension:.rm Standard industriel pour le streaming Son lecteur, RealPlayer, gratuit et très populaire Mêmes serveurs performants que RealAudio Bon pour les longs clips et la diffusions à un grand nombre de clients Streaming via RTSP Pseudo-streaming via HTTP

48 INF2005– Programmation web– A. Obaid Vidéo Windows Media 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) Possède un serveur (Windows Media Server) et des outils de production de vidéos Bon pour la diffusion de longs documents.

49 INF2005– Programmation web– A. Obaid Vidéo Audio Video Interleave Extension:.avi Produit de Microsoft Remplacé par.wmv On peut toujours les visionner avec QuickTime L'audio et la vidéo sont entrelacés. Ce qui donne de documents de bonne qualité Bon pour les vidéos de courte durée (vidéoclips) sur le web

50 INF2005– Programmation web– A. Obaid Vidéo MPEG Extensions:.mpg ou.mpeg Moving Picture Expert Group Introduit d'abord dans l'environnement Unix. Désormais disponible sur toutes plateformes Supporte trois types d'informations : Audio, Vidéo et Streaming Donne des vidéos de qualité avec un bon taux de compression Consiste en plusieurs standards: MPEG-I, MPG-2 (DVS), …

51 INF2005– Programmation web– A. Obaid Ajout de documents multimédia On peut utiliser des documents multimédia sur le web de différentes façons: – En ligne – Embarqué – Par Streaming

52 INF2005– Programmation web– A. Obaid Multimédia en ligne On peut utiliser un hyperlien: Musique (1.2 Mo) Le document est affiché par le navigateur à l'aide d'une application d'appoint (Helper application) à l'extérieur ou un plugin dans la fenêtre du navigateur.. Musique … mm1.html

53 INF2005– Programmation web– A. Obaid L'élément Permet d'intégrer le document multimédia directement dans une page web Invoque un plugin installé sur la machine de l'utilisateur qui sera lancé et "jouera" le document Spécifie des paramètres Solution offerte dans HTML4 - Trop compliqué ! Un balise plus simple est introduite dans HTML5. … <embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-183.swf width="200" height="200" wmode="transparent" type="application/x-shockwave-flash"> … embed.html

54 INF2005– Programmation web– A. Obaid Fichiers de description À partir d'un lien qui correspond à un document multimédia, le navigateur émet une requête de téléchargement à un serveur Web Le serveur répond avec un fichier de description (Metafile) que le navigateur passe à une Application Média (ex. RealPlayer) Cette application contacte un serveur média (ex. RealNetwork) Les données sont émises à partir du serveur média

55 INF2005– Programmation web– A. Obaid Fichiers de description 55 Navigateur Serveur web Serveur média Serveur média Document multimédia Fichier de description Requête HTTP Réponse HTTP

56 INF2005– Programmation web– A. Obaid Le multimédia dans HTML5 De nouvelles balise ont été introduites: – : pour inclure des documents audio – : pour inclure des documents vdiéo Une meilleure intégration avec JavaScript – Voir plus loin ! 56 Votre fureteur ne supporte pas l'affichage video ! Téléchargez SI j'etais chanteur de Boby Lapointe (format Ogg Vorbis)