1. 1
Sommaire
Liste des figures..........................................................................................................................3
Liste des tableaux.......................................................................................................................5
Liste des abréviations.................................................................................................................6
Introduction Générale................................................................................................................7
CHAPITRE 1 : Contexte du projet..............................................................................................10
I. Présentation de l’organisme d’accueil..........................................................................10
A. Présentation ...........................................................................................................10
B. Mission...................................................................................................................11
C. Objectifs:................................................................................................................11
II. Présentation du projet ..................................................................................................11
III. Méthodologie de travail ............................................................................................13
A. La méthode XP :......................................................................................................13
B. Mise en œuvre de la méthode XP :........................................................................15
CHAPITRE 2 : Etat de l’art.........................................................................................................19
I. La télévision sur internet...............................................................................................19
A. IP TV :......................................................................................................................19
B. Internet TV :............................................................................................................20
C. Web TV :.................................................................................................................20
II. Le streaming vidéo ........................................................................................................21
A. Fonctionnement :...................................................................................................21
B. Les différents types de streaming..........................................................................22
C. Les protocoles de streaming :................................................................................24
D. Inventaires des solutions de diffusion vidéo..........................................................26
III. Le cloud computing....................................................................................................28
A. Les services du cloud :............................................................................................28
B. Cloud computing et clusters : ................................................................................29
C. Avantages et inconvénients du cloud computing:.................................................30
D. Types de Cloud Computing : ..................................................................................31
E. La diffusion des vidéos à partir du cloud :.................................................................32
IV. Windows Azure..........................................................................................................33

2. 2
V. Windows Azure Media Services ....................................................................................35
CHAPITRE 3 : Analyse et spécification des besoins..................................................................42
I. Etude de l’existant.........................................................................................................42
II. Spécification des besoins...............................................................................................42
A. Les besoins fonctionnels :......................................................................................42
III. Diagramme de cas d’utilisation.................................................................................43
A. Cas d’utilisation global :.........................................................................................43
B. Description textuelle des cas d’utilisation.............................................................44
IV. Technologies utilisées :..............................................................................................46
CHAPITRE 4 : Conception de l’application................................................................................51
I. Diagramme d’activité : ..................................................................................................51
II. Diagrammes de séquences :..........................................................................................52
A. Administrateur : .....................................................................................................52
B. Utilisateurs :...........................................................................................................53
III. Diagramme de classes :.............................................................................................54
IV. Modèle de données :.................................................................................................55
CHAPITRE 5 : Réalisation ..........................................................................................................60
I. Environnement de développement : ............................................................................60
A. Environnement matériel : ......................................................................................60
B. Environnement logiciel :.........................................................................................60
C. Environnement de programmation : .....................................................................60
II. Architecture du système : .............................................................................................63
III. Test :...........................................................................................................................63
IV. Les IHM de l’application : ..........................................................................................63
A. Front office:............................................................................................................63
B. Back office :............................................................................................................66
Conclusion générale.................................................................................................................70
Annexe A : Développement des applications Windows Azure Media Services.......................72
Annexe B : Présentation W3C ..................................................................................................76
Bibliographie.............................................................................................................................77

3. 3
Liste des figures
Figure 1 : Les piliers stratégiques de CIC .................................................................................11
Figure 2 : Cycle de vie d'un projet XP .......................................................................................14
Figure 3 : Pseudo Streaming .....................................................................................................22
Figure 4 : La lecture en continu ................................................................................................23
Figure 5 : Les service du cloud .................................................................................................29
Figure 6 : Composition du cloud ..............................................................................................30
Figure 7 : Les types du cloud....................................................................................................31
Figure 8 : Les scénarios d’utilisation du cloud .........................................................................33
Figure 9 : Architecture Windows Azure Media Services ........................................................35
Figure 10 : Création de compte de stockage............................................................................37
Figure 11 : Création service média...........................................................................................37
Figure 12 : Réservation des capacités......................................................................................38
Figure 13 : Téléchargement des vidéos....................................................................................38
Figure 14 : Les opérations à effectuer sur une vidéo...............................................................39
Figure 15 : Encodage ................................................................................................................39
Figure 16 : Tableau de bord du service média .........................................................................40
Figure 17 : Cas d'utilisation global ...........................................................................................44
Figure 18 : Diagramme d'activité..............................................................................................51
Figure 19 : Diagramme de séquences (Authentification) .........................................................52
Figure 20 : Diagramme de séquences (Création programme) ..................................................53
Figure 21 : Diagramme de séquences (Visualiser programme) ................................................53
Figure 22 : Diagramme de classes ............................................................................................54
Figure 23 : Modèle de données.................................................................................................55
Figure 24 : data_base.xml.........................................................................................................56
Figure 25 : playlist.xml.............................................................................................................56
Figure 26 : montage.xml...........................................................................................................57
Figure 27 : programme.xml ......................................................................................................58
Figure 28 : Architecture WAMP Server ...................................................................................61
Figure 29 : Architecture du système ........................................................................................63
Figure 30 : Composition de la page publique ..........................................................................64
Figure 31 : En-tête ....................................................................................................................64
Figure 32 : Lecteur HTML5 .....................................................................................................64
Figure 33 : Playlist....................................................................................................................65
Figure 34 : Bonnes nouvelles....................................................................................................65
Figure 35 : Vidéothèque ...........................................................................................................65
Figure 36 : Composition de la page d'administration ...............................................................66
Figure 37 : Bibliothèque ...........................................................................................................66
Figure 38 : Partie montage........................................................................................................67

4. 4
Figure 39 : Insertion news ........................................................................................................67
Figure 40 : Formulaire ajout texte animé..................................................................................67
Figure 41 : Les couches de développement sur Windows Azure.............................................74

5. 5
Liste des tableaux
Tableau 1 : Estimation des tâches............................................................................................16
Tableau 2 : Comparaison TV sur internet.................................................................................21
Tableau 3 : Les protocoles standards........................................................................................25
Tableau 4 : Les protocoles propriétaires..................................................................................26
Tableau 5 : Avantages/Inconvénients des services du cloud ....................................................29
Tableau 6 : Description de cas d'utilisation "Athentification" .................................................44
Tableau 7 : Description de cas d'utilisation "Créer programme" .............................................45
Tableau 8 : Description de cas d'utilisation "Insérer animation"..............................................45
Tableau 9 : Description de cas d'utilisation "Découper video" ................................................46
Tableau 10 : Les en-têtes de requête http standard................................................................72
Tableau 11 : Les fonctions http standards ...............................................................................73
Tableau 12 : Les principales entités du service média.............................................................73

6. 6
Liste des abréviations
LSE: Local Software Economy
IT: Information Technology
TV: Television
XP: eXtreme Programming
XML: eXtensible Markup Language
HTML: HyperText Markup Language
HTML5: HyperTextMarkupLanguage V5
VoD: Video on Demand
P2P: Peer to Peer
HTTP: HyperText Transfer Protocol
RTMP: Rea-lTime Messaging Protocol
RTSP: Real-Time Streaming Protocol
RTP: Real-Time Protocol
RTCP: Real-Time Control Protocol
MMS: Microsoft Media Service
MMSH: MicrosoftMediaSrvice overHTTP
RTMFP: Real-Time Media Flow Protocol
RDT: Real Data Transport
FMSS: Flash Media Streaming Server
FMES: Flash Media Encoding Server
IaaS: Infrastructure as a Service
PaaS: Platform as a Service
SaaS: Software as a Service
CPU: Central Processing Unit
EC2: Elastic Compute Cloud
FTP: File Transfer Protocol
CSS: Cascading Style Sheets
AJAX: Asynchronous Javascript and XML
PHP: HyperText Processor
OSM Player: Open Standards Media Player
SQL: Simple Query Language
WYSIWYG: What You See Is What You Get
W3C: World Wide Web Consortium
IHM: Interface Homme-Machine
SDK: Software Development Kit
DRM: Digital Rights Management

7. 7
Introduction Générale
La vidéo a connu au fil des temps des révolutions successives allant de sa capture et sa
transmission sous forme analogique jusqu’à sa numérisation et sa compression, ce qui a créé
des nouvelles possibilités y compris le stockage de la vidéo sur des CD et des DVD, la
diffusion de la vidéo sur le câble numérique et la télévision numérique.
L’évolution d’internet au milieu des années 90 a provoqué une nouvelle définition des
communications médias classiques donnant ainsi naissance à des nouveaux services tels que
les vidéoconférences et les télévisions sur Internet. Ces services ne cessaient d’évoluer grâce
aux changements tant sur le plan technologique qu’au chapitre des comportements des
consommateurs qui s’orientaient de plus en plus vers tout ce qui est plus facile à utiliser et qui
répond mieux à leurs besoins en terme d’accessibilité, de rapidité et surtout de qualité du
contenu.
D’un point de vue industriel, Le contenu vidéo est devenu un complément de communication
pour les entreprises. Le partage des vidéos avec l’audience peut se révéler être une excellente
idée pour augmenter la visibilité de leur business et cela ne constitue plus l’apanage
d’entreprises fortement capitalisées, capables de mettre en place des structures technologiques
spécialisées, même des petits diffuseurs peuvent tout à fait fonctionner et aspirer à la
rentabilité, sans posséder un réseau d’antennes, de câblodistribution ou satellitaire.
La tendance était donc la mise en place d’espaces dédiés aux programmes vidéo, de véritables
sites qui viennent en parallèle des sites traditionnels et qui permettent une diffusion optimisée
et personnalisée.
C’est dans ce cadre que s’inscrit ce projet de fin d’étude qui a pour objectif la contribution à
la mise en place d’une plateforme Web TV qui permet la diffusion des contenus vidéos sous
forme de programmes journaliers créés en ligne à travers une interface de montage simple et
conviviale. La diffusion des vidéos se fait à partir du cloud pour une meilleure qualité.
Ce présent rapport comprend cinq chapitres. Dans le premier chapitre, nous présenterons
l’organisme d’accueil et le sujet ainsi que la méthodologie adoptée pour sa mise en place.
Nous consacrerons le deuxième chapitre à l’analyse et la spécification des besoins dans lequel
nous détaillerons les besoins fonctionnels et non fonctionnels en faisant recours aux
diagrammes de cas d'utilisation. Dans le troisième chapitre, nous présenterons les concepts et

8. 8
les technologies rencontrés lors de la réalisation du projet tels que le streaming vidéo et le
cloud computing. L’architecture de notre solution et la conception générale feront l’objet du
quatrième chapitre dans lequel nous présenterons les diagrammes de conceptions nécessaires.
Et, dans un dernier chapitre, nous détaillerons le travail réalisé ainsi que la présentation des
résultats des tests. Enfin, nous clôturerons ce rapport par une conclusion et quelques
perspectives de notre travail.

9. CHAPITRE1 : Contexte du
projet

10. 10
CHAPITRE 1 : Contexte du projet
Ce premier chapitre sera consacré pour l’introduction de projet et sa mise dans son contexte.
Nous présentons tout d’abord l’entreprise d’accueil. Ensuite, nous décrivons brièvement le
sujet de notre projet de fin d’étude. Nous allons, enfin, dévoiler la méthodologie que nous
allons suivre le long de projet.
I. Présentationde l’organisme d’accueil
A. Présentation
Le centre d'innovation et de collaboration est un centre d'innovation technologique créé en
2012 pour répondre aux nouveaux changements stratégiques et aux besoins du secteur des
TIC en Tunisie. CIC est un centre d'excellence qui permet de connecter les développeurs, les
partenaires et les citoyens autour d'un ensemble de programmes novateurs offrants un accès
aux ressources, aux experts, pour dynamiser l'innovation locale et le développement des
compétences.
CIC inspire ses programmes des concepts LSE (Local Software Economy) internationales
avec une nouvelle vision d'ouverture et de partenariats pour favoriser le développement des
compétences, le capital intellectuel, le partenariat de l'industrie et de l'innovation. L’initiative
CIC appelle à un véritable engagement de partenariat public-privé pour répondre aux besoins
immédiats des collectivités locales, les organisations et les partenaires afin de favoriser
l'économie locale du logiciel avec plus des programmes et des stages dans les région sous-
développées ou gouvernorats du pays.
CIC offre un package innovant de services et de programmes pour la communauté locale IT
(étudiants, développeurs, les startups, les professionnels, etc ...) avec un objectif de :
 Combler l'écart perçu entre l'université et l'industrie.
 Le renforcement des capacités pour les étudiants pour créer des emplois.
 Favoriser le système d'éducation en offrant des programmes standards (Certifications,
IT Academy, etc ...).
 Inciter les industriels et les institutions financières à jouer efficacement leur rôle.
 Investir dans l'innovation grâce à l'incubation de start-up.

11. 11
 Renforcer l'esprit d'entreprise et l'esprit de créativité parmi la population des jeunes.
 Soutenir les VCs avec des startups à fort potentiel.
B. Mission
La mission de l'innovation collaborative centre est de conduire avec excellence une
exécution d'un cadre novateur d'activités et de services (développement Citoyenneté et IT)
pour le bénéfice des étudiants, des start-up et les professionnels de l'informatique. Le cadre de
CIC contribuera à favoriser l'entrepreneuriat, le développement des compétences et
l'innovation dans la technologie. Le CIC fournira des services au gouvernement, aux
entreprises et aux citoyens à travers trois piliers stratégiques:
Figure 1 : Les piliers stratégiques de CIC
C. Objectifs:
CIC vise à promouvoir l'informatique comme vecteur de croissance économique et sociale par
les points suivants :
 Le développement de l'économie locale du logiciel.
 Soutenir l'initiative de développement régional afin de permettre l'accessibilité globale
de l'information pour tous les citoyens tunisiens.
 Jouer un rôle majeur dans la réforme du système éducatif local.
 Être un conseiller de confiance sur le tableau de bord de ses partenaires
(développement de la citoyenneté et de l'informatique) la performance et l'exécution.
 Création d'un environnement plus approprié pour le savoir-faire pour ses partenaires.
II. Présentationdu projet
Supportde Startups
tirer parti des nouvelles
competences
technologiques et
entrepreneuriales pour
améliorer l'efficacitédes
startups et la prestation
de services
innover dans un
environementouvert
Fournir une plate-forme
innovante pour le
développement
d'entreprises
technologiques locales
pertinentes au niveau
mondial
democratiser
l'education avec les TIC
Améliorer l'accès aux
technologies de
l'éducation et intégrer
les citoyens avec la
«connaissanceIT”

12. 12
Ce projet intitulé « Conception et développement d’une plateforme web TV » consiste à
mettre en place une plateforme pour le montage et la diffusion vidéo en ligne en se basant
sur les services de cloud computing. Elle présente les fonctionnalités principales suivantes :
 Création d’un programme journalier de diffusion en se basant sur le contenu
multimédia stocké sur le cloud et son enrichissement par des textes et des images
animés à travers un studio de montage simple à exploiter.
 La personnalisation d’un lecteur vidéo basé sur HTML5 et son adaptation aux besoins
de diffusion.
En effet, notre application est basée entièrement sur les standards du web permettant ainsi une
meilleure interopérabilité et compatibilité avec les différents navigateurs et systèmes. Elle
utilise plusieurs documents XML pour la manipulation et le montage des fichiers multimédias
ce qui permet d’assurer la lisibilité des données et des traitements et donc pas d’obligation
d’avoir des connaissances pour comprendre le fonctionnement de l’application et c’est un
avantage par rapport aux sites communautaires (Youtube, Dailymotion…) puisque la mise en
ligne des vidéos et leur montage pour la création des programmes de diffusion à partir d’une
interface simple à exploiter et en se basant sur des fichiers XML s’avère moins commode et
ne nécessite pas la prestation d’un webmaster. L’utilisation de XML permet aussi
l’intégrabilité et la réutilisation des traitements essentiels par toute application pourvue d’un
parser c’est-à-dire qu’on peut facilement réimplanter les fonctionnalités de montage et de
création de bibliothèques sur d’autres applications et avec d’autres langages de
programmation.
L’objectif de notre plateforme est la création des programmes de diffusion journaliers diffusés
sur un lecteur vidéo HTML5 en utilisant un moteur de montage intelligent qui se base sur
plusieurs scripts. Ce moteur de montage permet ainsi de trancher un morceau de la vidéo ou
lui ajouter des évènements qui peuvent être des textes ou des images. Il est également possible
de préciser comment ces évènements vont interagir en déterminant les dates de début et de fin
et les types d’animations. Tout se fait sur le lecteur HTML 5 et sans toucher aux fichiers
vidéo, et c’est l’intérêt de notre application puisque pas besoin de créer de nouvelles vidéos
ou modifier celles qui existent et pas besoin d’un nouveau encodage. Le programme ainsi créé
et validé par l’administrateur et démarré par l’utilisateur déclenche le travail du moteur de
montage qui accède à l’ensemble des vidéos de la playlist et leurs contenus et n’affiche sur le
lecteur vidéo que les résultats des traitements.

13. 13
Afin d’améliorer la qualité de diffusion et surpasser les problèmes de bande passante, nous
avons utilisé la technologie du cloud computing pour le stockage et la diffusion de nos vidéos.
De plus, notre application présente d’autres fonctionnalités comme la consultation des vidéos
classées par thèmes à partir d’une vidéothèque en ligne et l’affichage des NEWS directement
sur le lecteur ce qui présente un avantage indéniable par rapport aux sites communautaires
puisque nos vidéos sont positionnées dans notre environnement à proximité de nos
informations et sans invitation directe à regarder d’autre vidéos en provenance d’autres
utilisateurs.
III. Méthodologie de travail
Lorsque nous sommes arrivés au CIC, nous avions à créer une plateforme Web TV permettant
le montage et la diffusion des vidéos à travers un lecteur personnalisé. Cette plateforme de
Web TV était à l’état de « draft » pendant la durée de notre projet. Nous avons donc concentré
nos efforts plutôt dans le cœur de la mission qui nous avait été confiée, c’est-à-dire
l’implémentation de la plateforme et ses différentes fonctionnalités. Il était ainsi nécessaire de
fixer une méthodologie de travail afin d’aboutir à une solution de qualité. Dans cette partie,
nous présentons la méthodologie Agile XP (eXtreme Programming) qui a été adoptée dans
notre projet.
A. La méthode XP :
Une méthode agile est une approche itérative et incrémentale qui est menée dans un esprit
collaboratif avec juste ce qu’il faut de formalisme. Elle génère un produit de haute qualité tout
en tenant compte de l’évolution des besoins client. Parmi les méthodes et techniques dites
agiles, on distingue XP qui présente une discipline de développement orientée sur l'aspect
réalisation d'une application, sans pour autant négliger l'aspect gestion de projet.
L'Extreme Programming repose sur des cycles rapides de développement (des itérations de
quelques semaines) dont les étapes sont les suivantes :
 une phase d'exploration détermine les scénarios client qui seront fournis pendant cette
itération
 l'équipe transforme les scénarios en tâches à réaliser et en tests fonctionnels
 chaque développeur s'attribue des tâches et les réalise

14. 14
 lorsque tous les tests fonctionnels passent, le produit est livré
Le cycle se répète tant que le client peut fournir des scénarios à livrer. Généralement le cycle
de la première livraison se caractérise par sa durée et le volume important de fonctionnalités
embarquées. Après la première mise en production, les itérations peuvent devenir plus courtes
(une semaine par exemple).
Figure 2 : Cycle de vie d'un projet XP
L'eXtreme Programming repose sur quatre valeurs fondamentales :
 La communication : C'est le moyen fondamental pour éviter les problèmes. Les
pratiques que préconise l'XP imposent une communication intense et si un manque
apparaît malgré tout, un coach se charge de l'identifier et de remettre ces personnes en
contact.
 La simplicité : Cette valeur de simplicité repose sur le pari qu’il coute moins cher de
développer un système simple aujourd’hui quitte à devoir engager de nouveaux frais
plus tard pour rajouter des fonctionnalités supplémentaires plutôt que de concevoir dès
le départ un système très compliqué dont on risque de n’avoir plus besoin dans un
avenir proche.
 Le feed-back : Le retour d'information est primordial pour le programmeur et le client.
Les tests unitaires indiquent si le code fonctionne. Les tests fonctionnels donnent
l'avancement du projet. Les livraisons fréquentes permettent de tester les
fonctionnalités rapidement.
 Le courage : Certains changements demandent beaucoup de courage. Il faut parfois
changer l'architecture d'un projet, jeter du code pour en produire un meilleur ou
essayer une nouvelle technique. Le courage permet de sortir d'une situation inadaptée.
C'est difficile, mais la simplicité, le feedback et la communication rendent ces tâches
accessibles.

15. 15
B. Mise en œuvre de la méthode XP :
Le choix est porté sur la méthode Agile XP qui est bien adaptée lors du travail en équipe
réduite, où la communication entre tous les membres peut se faire de manière directe.
L’eXtreme Programming propose de nombreux principes qu’il convient de suivre pour
optimiser son développement. Cependant, et cela fait partie des avantages de cette méthode,
XP n’est pas rigide. On peut adapter son utilisation afin qu’il réponde aux besoins spécifique
de l’environnement dans lequel il est sollicité. En particulier pour notre projet, où le nombre
de développeurs est réduit et plusieurs rôles sont absents, certains points de la méthode ne
seront pas utilisés.
La phase initiale d’exploration :
Cette phase s’est déroulée entre le 15 février et le 30 Mars et elle avait pour objectifs de
définir le contenu fonctionnel de l’application c’est-à-dire la liste des user stories, d’effectuer
les recherches autour de notre projet, d’assister à des conférences en rapport avec les
technologies utilisées et de se familiariser avec les outils et les environnements de
développement.
Ainsi, nous avons pu identifier les premières fonctionnalités de notre application à partir des
user stories suivants qui présentent les besoin du client de façon informelle:
 En tant qu’administrateur, je dois m’authentifier pour accéder à la plateforme
 En tant qu’administrateur authentifié, je retrouve un espace correspondant à mes
attentes en termes de création d’un programme de diffusion journalier avec une
interface simple à exploiter
 En tant qu’utilisateur, je peux regarder le nouveau programme ou accéder aux anciens
programmes
Nous avons ensuite étudié les différentes architectures possibles par des prototypes pour avoir
une vue globale sur ce que nous allons faire.
La phase de planification
Durant cette phase, nous avons présenté les user stories de façon formelle et nous avons
donné un ordre de priorité et une première estimation du temps de réalisation pour chaque

16. 16
fonctionnalité. Il était nécessaire de définir d’autres taches à réaliser pour aboutir à certaines
fonctionnalités.
L’estimation est affecté selon une suite de Fibonacci (1, 2, 3, 5, 8, 13…) car c’est plus aisé de
dire qu’une user story est deux fois plus grosse qu’une autre en passant de 1 à 2. Ainsi, nous
nous accordons sur une user storie d’importance moyenne « En tant qu’administrateur, je dois
m’authentifier pour accéder à la plateforme » que nous imaginons parfaitement le contenu,
nous entendons pour lui attribuer 2 points et ainsi de suite pour toutes les autres.
Fonctionnalité Priorité Estimation
Authentification 1 2
Personnalisation du lecteur 2 8
Création du programme 3 13
Consultation de l’historique 4 5
Tableau 1 : Estimation des tâches
Itérations jusqu’à la première release
Après la validation de la planification par notre encadreur, nous avons commencé le
développement. Nous avons planifié deux itérations :
 L’objectif de la première itération est la création de l’architecture globale de la
plateforme et l’intégration du lecteur vidéo personnalisé. Cette itération a duré deux
semaines.
 La deuxième itération est consacrée au développement de l’interface de montage et
pendant trois semaines, nous avons essayé de mettre en œuvre les principales
fonctionnalités correspondantes à cette interface.
Durant ces itérations, des réunions quotidiennes avec notre encadreur nous ont permis de faire
le point sur l’avancement et la présentation des objectifs ainsi que la résolution des difficultés
éventuelles. Le codage est réparti entre nous deux de la façon suivante : Le pilote code et le
copilote prépare les tests unitaires avec une intégration en continu.
Cette phase s’est déroulée entre le premier Avril et le 6 Mai et à la fin nous avons terminé la
première livraison.
Les autres itérations

17. 17
L’intervention de monsieur Walid NEFFATI, un journaliste/manager à thd.tn (Tunisie Haut
Débit) un site spécialisé dans l'actualité TIC nationale, nous a permis d’identifier d’autres
besoins utilisateurs. Nous avons donc commencé à planifier d’autres itérations pour mettre en
œuvre les nouvelles fonctionnalités et améliorer notre application.
Les nouvelles itérations sont plus courtes et nous sommes concentrés sur l’amélioration du
code et les tests fonctionnels. Elles se sont déroulées comme suit :
 Une itération de deux semaines pour l’ajout des news et des publicités en directe sur
le site publique et sur le lecteur au cours de la diffusion.
 Une itération d’une semaine pour l’organisation automatique des médias selon leurs
thèmes
 Une itération de deux semaines pour l’hébergement de notre plateforme et des
différents médias sur le cloud.
Après avoir présenté le projet et préciser la méthodologie à suivre, nous consacrons le
prochain chapitre pour la définition de nouveaux concepts et technologies qui vont nous aider
à mieux développer l’application.

18. CHAPITRE2 : Etat de l’art

19. 19
CHAPITRE 2 : Etat de l’art
Dans ce chapitre, nous commençons par étudier les différents types de télévisions sur internet
et faire une comparaison entre elles, ensuite, nous allons présenter la technologie de streaming
qui est utilisée dans celles-ci et nous allons introduire la notion du Cloud computing en
général ainsi que ses services de médias qui représente la solution utilisée dans notre projet.
I. La télévisionsur internet
Plusieurs termes sont employés pour désigner la télévision sur Internet. On parle souvent de :
Web TV, TV sur IP, Internet streaming, vidéo streaming, streaming media (également
employé comme terme générique) etc.
Malgré leur différence, ces termes désignent une même réalité: la diffusion des programmes
TV et des vidéos sur un réseau de données numérique au moyen du protocole Internet (IP).
A. IP TV :
IPTV est l'abréviation d’Internet Protocol Television. C’est une forme de télévision diffusée
sur un réseau utilisant le protocole IP qui regroupe plusieurs types de services et méthodes de
communication.
L'IPTV utilise la même infrastructure que l'accès Internet, mais avec une bande passante
réservée et est souvent fournie avec l'offre d'abonnement Internet haut débit mais peut aussi
être déployé dans les collectivités privées, en effet, cela permet à un hôtelier, hôpital, ou une
résidence de vacances de pouvoir proposer un bouquet de chaînes en IPTV ainsi qu'un panel
de service facturable et à la demande. L'établissement proposant ce réseau est considéré
comme opérateur télécom.
On distingue 3 types de services offerts :
 La télévision en direct qui utilise une solution IP multicast, ce qui permet d'envoyer
les informations une seule fois pour plusieurs personnes
 la vidéo à la demande (en anglais Video on Demand ou VoD) qui utilise une
solution IP unicast (une seule destination pour ces flux)

20. 20
 les séances de rattrapage (en anglais catch-up TV) qui utilisent aussi la solution IP
unicast
B. Internet TV :
Distribution numérique du contenue de la télévision sur internet.
Permet aux utilisateurs de choisir les programmes tv qu’ils veulent regarder.
La plupart des fournisseurs du service internet tv offrent des différents formats et contrôle de
qualité le web TV peut être visualisé sur des appareils différents.
Avant 2006, la majorité de catch-up tv ont utilisé la technologie P2P(les utilisateurs
téléchargent une application et les données seront partagées entre eux). Maintenant les
fournisseurs utilisent le téléchargement en continue.
Ils ont utilisé P2P parce que l’infrastructure existante ne peut pas supporter la bande passante
nécessaire pour une distribution d’un streaming centralisé.
C. Web TV :
Les web TVs sont des sites web dont les contenus sont à dominante vidéo qui sont
cataloguées et diffusées en streaming.
Les fournisseurs de web TV ne garantissent pas une qualité d’image similaire ou meilleure
que la télévision traditionnelle puisqu’il est un modèle best effort dans lequel il est difficile
pour le fournisseur d’influencer sur la qualité de service.
Bande passante plus élevé meilleure qualité.
En général le web TV vise l’utilisation sur les ordinateurs.
En terme de contenu, il y a une confusion sur quel service en ligne doit être appelé Web TV :
 VOD Vs. Chaines linéaires
 Gratuit Vs. Payant
 Basé sur un lecteur intégré Vs. un client desktop
 Clips vidéo courts Vs. Clips vidéo longs

21. 21
IP TV Internet TV Web TV
Infrastructure Réseau utilisant le
protocole IP
Internet internet
Réception La boxe qui sert à
décoder et décrypter les
contenus TV et VOD
pour les diffuser sur
l’écran TV
Navigateur
Application desktop
Smart phone
Tv supporte internet
Site web
(navigateur)
QoS Garantie Non garantie Non garantie
Tableau 2 : Comparaison TV sur internet
Ces différents types de télévisions sur Internet ont un point commun qui est l’utilisation de la
technologie de streaming pour diffuser leurs programmes. Dans la partie suivante, nous allons
présenter cette technologie.
II. Le streaming vidéo
Le streaming est une technique qui permet de transférer des données audio et vidéo grâce à un
flux permanent. Il permet d'exploiter l'information reçue au fur et à mesure de sa transmission
du serveur au client sans attendre d’en avoir reçu la totalité. Bien qu’existant depuis plusieurs
années, son véritable essor suit l’air du temps, puisqu’il a profité du développement du parc
des ordinateurs portables, de la démocratisation de l’accès à Internet et surtout de celle de la
diffusion du haut débit dans les foyers.
Nous allons étudier son fonctionnement, les technologies associées et nous allons présenter
les inventaires des solutions de streaming les plus connus.
A. Fonctionnement :
Techniquement, le streaming fonctionne selon le protocole client-serveur. Le contenu est ainsi
mis à disposition sur un serveur. L’internaute (client) qui veut visionner une vidéo clique sur
une icône ou un lien dans une page web : il envoie alors une requête depuis son propre
ordinateur vers un serveur sur lequel est stocké le fichier sélectionné.

22. 22
Le serveur (ou plate-forme de diffusion) expédie en retour le fichier en paquets, via Internet.
Le lecteur de contenu streaming va récupérer une partie du contenu qu’il met dans une
mémoire tampon (dite "buffer"). Lorsque le lecteur estime qu’il a suffisamment de données
dans sa mémoire tampon pour lui permettre de lire le contenu audio ou vidéo sans accroche, la
lecture démarre. Le contenu est décodé par le lecteur, tandis que les nouveaux paquets sont
stockés dans le tampon. Selon la vitesse à laquelle se remplit le tampon, le serveur détermine
la qualité de la connexion, et envoi plus ou moins de données. Quand l’envoi est terminé, la
vidéo s’arrête. Il est important de préciser que le fichier n’est pas stocké sur l’ordinateur de
l’internaute après son visionnage. Les données sont détruites au fur et à mesure.
B. Les différents types de streaming
Deux sortes de lecture existent, l'une est dite « en progressif », l'autre « en continu ».
 La lecture en progressif (pseudo-streaming) :
La lecture en progressif, quant à elle, est la solution la plus couramment utilisée par les plates-
formes de partage de vidéos, car elle ne nécessite pas de serveur spécialisé, un serveur HTTP
« standard » étant suffisant. Le fichier vidéo est simplement proposé à la lecture, de la même
manière que tout autre type de fichier, et c'est le navigateur qui se charge d'effectuer la
lecture de la vidéo. L'inconvénient de cette solution est l'impossibilité de s'adapter à la qualité
de connexion de l'utilisateur. Pour le diffuseur, il devient ainsi souvent nécessaire de proposer
plusieurs fichiers avec des résolutions différentes pour permettre à l'internaute de choisir en
fonction des capacités de sa connexion. Il convient de noter que si le fichier est de taille
importante, elle induit une certaine attente avant la diffusion des premières images. La mise
en ligne de longs métrages sur les plates-formes de partage de vidéos n’est donc pas
impossible, mais est ainsi généralement effectuée par parties.
Figure 3 : Pseudo Streaming

23. 23
 La lecture en continu :
Dans le cas de la lecture en continu, il n'y a qu'un seul fichier diffusé contenant plusieurs fois
les mêmes informations à différents niveaux de qualité, et c'est le serveur de lecture en
continu spécialisé qui se charge de diffuser l'information adaptée.
En fonction du débit de la connexion de l'internaute, le serveur sélectionne le niveau de
qualité maximal pour une diffusion en temps réel. Le serveur est également capable de
s'adapter automatiquement aux variations de la bande passante : si la connexion se détériore et
que le taux de transfert baisse, le contenu est livré avec une moindre qualité afin d'éviter les
interruptions de diffusion. Si en revanche la connexion devient plus fluide, la qualité
s'améliore. Le contenu démarre dès que l'utilisateur demande à y accéder sans délais.
L'inconvénient de cette solution est de devoir utiliser un serveur spécialisé (Xiph Icecast, Real
Helix Streaming Server, Windows Media Services, Adobe Flash Media Server, Quicktime
Streaming Server, etc.) et que l'internaute doit avoir une bande passante adaptée au contenu
envoyé. Le contenu étant diffusé au même rythme que la lecture de l'internaute.
Figure 4 : La lecture en continu
 Le broadcast :
Probablement, la forme la plus populaire de la diffusion des vidéos ou l’exemple le plus
connu est la diffusion télé. Le broadcaste se montre très efficace pour les contenus publics vue
qu’il peut souvent diffuser à tous les récepteurs en même temps.
Un aspect très important des communications en broadcast est que le système doit être conçu
pour fournir à chaque récepteur le signal requis en tenant compte de la différence des
caractéristiques des canaux de diffusion et par conséquent le système est souvent jugé pour
le cas le plus pessimiste (worst-case).

24. 24
 L’unicast :
C’est une forme de communication point-à-point entre deux ordinateurs dans un réseau, par
exemple visiophonie. La propriété la plus importante pour ce type de communications est
l’existence ou non d’une voie de retour entre le récepteur et l'émetteur.
Si elle existe, le récepteur peut fournir un feedback à l'expéditeur qui peut l’utiliser ensuite
pour adapter son traitement aux besoins du récepteur. Par contre, sans cette voie de retour,
l'expéditeur a une connaissance limitée du canal.
 Le multicast :
C’est une autre forme de communication avec des propriétés qui se trouvent entre l’unicast et
le broadcast. Il s’agit d’une communication point à multipoints. Un exemple de ce type de
diffusion est le multicast IP sur Internet.
Pour faire communiquer plusieurs récepteurs, le multicast est plus efficace que de multiples
connexions unicast (une connexion dédiée unicast pour chaque client), et la multidiffusion
globale fournit bon nombre des mêmes avantages et des inconvénients que la radiodiffusion.
C. Les protocoles de streaming :
Pour résoudre le problème du retard dû à la bufferisation lors du streaming et adapter le
réseau Internet pour la transmission des flux multimédias, on utilise les protocoles du
streaming.

25. 25
 Protocoles standards
Protocole Description
http (Hyper Text Transfert
Protocol)
n'est pas à vrais dire un protocole de streaming. Comme il
traverse généralement les routeurs, il est utilisé pour
encapsuler de nombreux protocoles comme MMS ou
RTMP. C'est un protocole sans état.
RTSP (Real Time Streaming
Protocol)
est proche de HTTP et dispose de fonctions de contrôle
des flux : lecture, pause, avance rapide, retour rapide.
Unicast ou multicast, c'est un protocole à état.
RTP (Real-time Transport
Protocol)
est un protocole de transport en
temps réel.
Ces deux protocoles
sont indépendants
des couches réseau
et transport. En
pratique, ils sont
principalement
utilisés avec UDP,
en unicast et
multicast.
RTCP (RTP Control Protocol) se charge du contrôle de RTP
Tableau 3 : Les protocoles standards
 Protocoles Propriétaires
Protocole Description
MMS (Microsoft Media
Service)
est un flux unicast sur les ports
1755 de TCP ou UDP
toujours utilisés
dans Windows
Media Services
2008
MMSH (Microsoft Media
Service over HTTP)
une version encapsulée de MMS
RTMP (Real-Time Messaging
Protocol)
est un protocole client-serveur unicast, sur le port 1935 de
la couche TCP. Il existe en version encapsulée dans
HTTP, ou cryptée, ou encore les deux à la fois. Il est
principalement utilisé avec FlashPlayer.
RTMFP (Real-Time Media
Flow Protocol)
est un protocole récent, apparu dans les applications
FlashPlayer10 et Air 1.5. Il fonctionne sur UDP, en
unicast. Le système pair-à-pair entre clients a été ajouté

26. 26
pour diminuer la bande-passante du serveur. Ce protocole
supporte la mobilité, c'est-à-dire le changement à la volée
d'adresse IP.
RDT (Real Data Transport) est un protocole développé par Real Networks. Il
fonctionne sur la couche UDP et les ports 34445 à 34459.
Il en est actuellement à la version 3.
Tableau 4 : Les protocoles propriétaires
Comme on peut le remarquer, la majorité des protocoles de streaming sont propriétaires. Dans
le paragraphe suivant nous allons essayer de présenter les inventaires des solutions de
streaming qui implémentent ces protocoles ainsi que les différentes solutions et infrastructures
qu’ils utilisent.
D. Inventaires des solutions de diffusion vidéo
L'éventail d'applications proposées pour capturer et diffuser des vidéos est aujourd'hui assez
vaste. Nous avons évalué des solutions phares du marché, en distinguant d'une part les
solutions de diffusion vidéo et de VOD proposées et d'autre part la solution de capture vidéo
associée, tout en écartant les logiciels tiers qui les intègrent.
Adobe - Flash Media Suite
La gamme Flash Media propose une suite de logiciels destinés à la diffusion. Elle se compose
à minima de deux logiciels simples d'utilisation :
 Flash Media Streaming Server (FMSS):
Flash Media Streaming Server est un serveur de diffusion disponible sous Windows et Linux.
Il propose des fonctionnalités particulières telles que le cryptage, la gestion des droits de
lecture et de copie, une gestion automatique des débits. Il diffuse les formats F4V (Flash
Vidéo avec codec H264), FLV (Flash Video), MPEG-4, et 3GPP sur des protocoles
développés par Adobe, par exemple FLV sur RTMP, mais aussi des protocoles plus communs
tels que HTTP. Le Streaming Server implique l'installation d'un client Flash dans le
navigateur.

27. 27
 Flash Media Encoding Server (FMES):
Flash Media Encoding Server est une application disponible sous Windows destinée au ré-
encodage et au montage d'un ensemble de vidéos existantes vers les formats streamés par le
serveur de diffusion de la suite Flash Media. Il importe un grand nombre de conteneurs tels
que le FLV, le F4V, l'AVI, le WMV, l'ASF, le MPEG et le MOV. Il existe une
implémentation open-source de Flash Media Streaming Server : Red5.
QuickTime Streaming Server (QTSS) et Darwin Streaming Server (DSS)
Darwin Streaming Server est la version open-source du logiciel Quicktime Streaming Server
diffusé par Apple. QTSS est livré uniquement dans MacOS X serveur, tandis que DSS est
multi-plateforme (Linux, MacOS, Solaris, Windows). Ils diffusent les conteneurs suivants,
seulement s'ils sont optimisés (hinting) : QuickTime Movie (MOV), MPEG-4, et le 3GPP.
Les fonctionnalités sont nombreuses : diffusion, VOD unicast et multicast, IPv4 et IPv6.
RealProducer – Helix server
La société RealNetworks, pionnière dans la diffusion et la vidéo à la demande, propose des
solutions multiplateformes (Linux, Solaris, Windows) payantes ou gratuites, dont certaines
sont partiellement open source. Elles s'articulent autour des logiciels Helix DNA Producer
(Open source) et Real Producer pour la capture vidéo, puis Helix DNA Server (Open source)
et Helix Server pour la diffusion et la vidéo à la demande.
Windows Media Services
A l'instar de ses concurrents, la suite est composée de deux produits, Windows Media
Encoder, qui capture les sources audio et vidéo et Windows Media Services. Il s'installe en
tant que rôle sur les systèmes d'exploitation Windows Server. Seules les versions Entreprise
Server bénéficient de l'intégralité des fonctionnalités du produit, comme le multicast. Les
protocoles possibles sont RTSP, HTTP et IPv6 et les seules contraintes sont les formats
disponibles très réduits et majoritairement limités à ceux de Microsoft, tels que wmv, wma,
mp3 et le conteneur asf.
VLC
VideoLAN est un logiciel open-source multiplateformes de lecture, d'encodage, d'acquisition,
de diffusion en direct et à la demande. Il lit la plupart des formats, à l'exception notable de

28. 28
Real Media, partiellement lu. Il implémente les protocoles standards de diffusion ainsi que le
multicast et IPv6. En plus de l'interface graphique, il est paramétrable via la ligne de
commande, une interface web ou telnet. VLC est « le couteau suisse » du multimédia.
III. Le cloud computing
Le Cloud computing se traduit littéralement par "informatique dans les nuages", faisant
référence aux technologies d'internet qui est souvent représenté schématiquement par un
nuage. C'est un concept abstrait qui regroupe plusieurs technologies servant à délivrer des
services. Son but est de pousser les entreprises à externaliser les ressources numériques
qu'elles stockent. Ces ressources offrant des capacités de stockage et de calcul, des logiciels
de gestion de messagerie, et d'autres services sont mises à disposition par des sociétés tierces
et accessibles, grâce à un système d'identification, via un PC et une connexion à Internet.
A. Les services du cloud :
Selon le NIST (National Institute of Standards and Technology), il existe trois catégories de
services qui peuvent être offerts en cloud computing qui sont IaaS, PaaS et SaaS
 IaaS (Infrastructure as a service): Il s’agit de la mise à disposition, à la
demande, de ressources d’infrastructures dont la plus grande partie est localisée
à distance dans des Datacenters. L’IaaS permet l’accès aux serveurs et à leurs
configurations pour les administrateurs de l’entreprise et donne au client la
possibilité de louer des clusters, de la mémoire ou du stockage de données.
 PaaS (Platform as a service) : Dans ce type de service, situé juste au-dessus
du précédent, le système d'exploitation et les outils d'infrastructure sont sous la
responsabilité du fournisseur. Le consommateur a le contrôle sur les
applications et peut ajouter ses propres outils. En plus de pouvoir délivrer des
logiciels en mode SaaS, le PaaS dispose d'environnements spécialisés au
développement comprenant les langages, les outils et les modules nécessaires.
 SaaS (Software as a service): Concept consistant à proposer un abonnement à
un logiciel plutôt que l'achat d'une licence. On oublie donc le modèle
client/serveur et aucune application n'est installée sur l'ordinateur, elles sont
directement utilisables via le navigateur Web. L’utilisation reste transparente

29. 29
pour les utilisateurs, qui ne se soucient ni de la plateforme, ni du matériel, qui
sont mutualisés avec d’autres entreprises.
Avantages Inconvénient
SaaS  Pas d’installation
 Plus besoin de licence
 Migration
 Nombre logiciel limité
 Sécurité
 Dépendance des prestataires
Paas  Pas d’infrastructures nécessaires
 Pas d’installation
 Environnement hétérogène
 Limitation des langages
 Pas de personnalisation dans
la configuration des machines
virtuelles
IaaS  Administration
 Personnalisation
 Flexibilité d’utilisation
 Sécurité
 Besoin d’un administrateur
système
Tableau 5 : Avantages/Inconvénients des services du cloud
Figure 5 : Les service du cloud
B. Cloud computing et clusters :
Le principe du cloud computing est de construire un nuage de clusters, c'est à dire
d'interconnecter un ensemble de machines sur un réseau défini. Les utilisateurs peuvent
ensuite déployer des machines virtuelles dans ce nuage, ce qui leur permet d'utiliser un certain
nombre de ressources (espace disque, mémoire vive, ou encore du CPU).

30. 30
Figure 6 : Composition du cloud
C. Avantages et inconvénients du cloud computing:
1. Avantage :
 Un démarrage rapide : Le cloud computing permet de tester le business plan
rapidement, à couts réduits et avec facilité.
 L’agilité pour l’entreprise : Résolution des problèmes de gestion informatique
simplement sans avoir à être engager à long terme.
 Un développement plus rapide des produits : Permettant de réduire le temps de
recherche pour les développeurs sur le paramétrage des applications.
 Absence de dépense de capital : Plus besoin des locaux pour élargir les infrastructures
informatiques.
2. Inconvénients :
 La bande passante peut faire exploser votre budget : La bande passante qui serait
nécessaire pour mettre cela dans le Cloud est gigantesque, et les coûts seraient
tellement importants qu'il est plus avantageux d'acheter le stockage nous-mêmes plutôt
que de payer quelqu'un d'autre pour s'en charger.
 Les performances des applications peuvent être amoindries : Un Cloud public
n'améliorera définitivement pas les performances des applications.
 La fiabilité du Cloud : Un grand risque lorsqu'on met une application qui donne des
avantages compétitifs ou qui contient des informations clients dans le Cloud.
 Taille de l’entreprise : Si votre entreprise est grande alors vos ressources sont grandes,
ce qui inclut une grande consommation du Cloud. Vous trouverez peut-être plus

31. 31
d'intérêt à mettre au point votre propre Cloud plutôt que d'en utiliser un externalisé.
Les gains sont bien plus importants quand on passe d'une petite consommation de
ressources à une consommation plus importante.
D. Types de Cloud Computing :
Le concept de Cloud Computing est encore en évolution. On peut toutefois dénombrer trois
types de Cloud Computing :
 Le Cloud privé (interne) : réseau informatique propriétaire ou un centre de données qui
fournit des services hébergés pour un nombre limité d’utilisateurs.
 Le Cloud public (externe) : prestataire de services qui propose des services de stockage
et d’applications Web pour le grand public. Ces services peuvent être gratuits ou payants.
Exemples de clouds publics: Amazon Elastic Compute Cloud (EC2), Sun Cloud, IBM’s
Blue Cloud, Google AppEngine And Windows Azure Services Platform.
 Le Cloud hybride (interne et externe) : un environnement composé de multiples
prestataires internes et externes. Ainsi les entreprises qui utilisent ce service peuvent faire
basculer, par un simple glisser-déposer, des applications hébergées dans un nuage privé
interne vers un nuage public sécurisé.
Figure 7 : Les types du cloud

32. 32
E. La diffusion des vidéos à partir du cloud :
Pour comprendre l’utilité du cloud dans la diffusion des vidéos et audio, on doit mentionner
les 4 grands types de scénarios d’utilisation du cloud:
 Actif puis Inactif : Quand on a un service qui doit être actif pendant une durée
précise et inactif pour le reste du temps, l’investissement dans des infrastructures
physiques personnelles dans ce cas ne fait plus sens et le cloud intervient par la
location des ressources nécessaires pour la diffusion d’un évènement par
exemple mais après son achèvement, on va juste mettre en veille ces ressource
pour pouvoir les utiliser plus tard ;
 Croissance rapide : Si ce service peut avoir une croissance rapide importante et
dans le cas de l’infrastructure classique, il doit falloir racheter du matériel et être
capable de prévoir cette croissance pour pouvoir la gérer. Avec le cloud, si cette
croissance en terme de traitement de vidéos, on peut commencer doucement avec
un système capable d’encoder quelques vidéos par jour et augmenter sa capacité
de traitement progressivement au fur et à mesure que la charge augmente.
D’autre part, la croissance peut concerner le nombre d’utilisateur et dans ce cas
on peut facilement aligner le serveur de streaming.
 Le débordement non prévisible : Lorsqu’un grand nombre d’internautes se
connectent en même temps, on est devant un pic de consommation important et il
s’agit d’un phénomène qui n’était pas prévu. Avec le cloud, on peut facilement
gérer cette situation en rajoutant les ressources nécessaires pour retourner
rapidement à l’état de stabilité.
 Les débordements prévisibles : C’est plutôt d’un point de vue économique que
l’investissement dans une infrastructure qui va gérer uniquement les pics de
charges n’est pas une bonne idée. Avec le cloud, on peut louer les ressources
nécessaires pour essayer de lisser la courbe et ne payer qu’à l’usage ce qui
présente une solution beaucoup plus rentable.

33. 33
Figure 8 : Les scénarios d’utilisation du cloud
Ainsi, plusieurs propriétaires ont proposé des services de médias et des solutions de diffusion
des vidéos à partir du cloud. Dans la partie qui suit nous détaillerons l’architecture et les
fonctionnalités de la plateforme Windows Azure qui est la solution choisie dans notre projet.
IV. Windows Azure
Windows Azure est le nom de la plateforme applicative en nuage de Microsoft. Il s'agit d'une
offre d'hébergement (applications et données) et de services (workflow, stockage et
synchronisation des données, bus de messages, contacts…). Un ensemble d'API permet
d'utiliser et d'accéder à cette plateforme et aux services associés.
La plateforme Windows Azure correspond aux offres d'informatique en cloud publics de
type PaaS et IaaS de Microsoft. Elle est composée de plusieurs éléments dont voici les plus
importants:
 Compute :
C’est la partie de la plateforme qui est en charge de l'exécution du code. Pour cela, le
développeur doit créer un ou plusieurs rôles, qui vont, selon les besoins, se comporter comme
un serveur IIS (Web Role), ou comme un service Windows (Worker Role).
 Les sites web : C’est une reprise de l’infrastructure existante pour
l’hébergement des sites, mais élargie à d’autres solutions. On peut y déployer
(via FTP, WebDeploy, Git ou Team Foundation Services) des applications
Web en différents langages.
 Les services de cloud computing : permettent de déployer et gérer rapidement
des applications et des services

34. 34
 Les machines virtuelles : elles présentent une offre Infrastructure as a Service
(IaaS) de Microsoft pour leur cloud public. Les clients peuvent créer des
machines virtuelles, dont ils ont le contrôle total, pour exécuter les Data
Centers Microsoft.
 Les services mobiles: Ce service rationalise le processus de développement en
permettant d’exploiter le Cloud pour des scénarios courants d’applications
mobiles tels que le stockage structuré, l’authentification des utilisateurs et les
notifications push.
 Data Services :
Les data services offrent la possibilité de stocker, modifier et communiquer les données dans
Windows Azure.
 Blobs: Les objets Blob constituent la manière la plus simple de stocker
d'importants volumes de données binaires ou de texte non structuré tels que des
fichiers vidéo ou audio et des images.
 Tables: Les tables sont des conteneurs simples d’Azure qui, à l’instar d’un
tableau, permettent de stocker des informations structurées mais non
relationnelles.
 SQL Database: c’est une base de données relationnelle complète en tant que
service qui offre un niveau d'interopérabilité élevé en permettant aux clients de
créer des applications à l'aide des principales infrastructures de développement.
 Networking
 Windows Azure Virtual Network: cette capacité permet aux développeurs de
gérer les réseaux privés virtuels (VPN). Ils pourront donc contrôler la topologie du
réseau, la configuration des adresses IP, les tables de routage, les politiques de
sécurité ou encore utiliser IPSEC.
 App Services
 Windows Azure Active Directory : annuaire pour la gestion des identités qui
peut être optionnellement lié à Windows Active Directory par réplication des
comptes utilisateurs. Il s'agit d'un service commun avec Office 365.
 Access Control Services (ACS) : Cela permet typiquement à une application de
recevoir des authentifications venant de services comme Facebook, Google,
Windows Live, Yahoo ou tout autre service OpenID ou encore WS-Federation tel
qu'Active Directory (via Active Directory Federation Services ADFS V2).

35. 35
 Windows Azure Caching : cache distribué en mémoire vive, utilisable pour
stocker des objets sérialisables. Le cache distribué existe en tant que service prêt à
l'emploi, mais également depuis juin 2012 en tant que service que l'on peut
directement héberger dans les machines virtuelles (instances) des web roles et
worker roles.
 Content Delivery Network (CDN) : permet aux clients de délivrer du contenu
plus proche de leurs utilisateurs finaux.
 Storage Queues : qui sont une forme de MOM (Middleware Oriented Messages)
 Service Bus: connectivité vers des Web Services qui ont une connexion sortante
vers Internet (et non entrante).
 Media Services : Ces services permettent de Créer des workflows pour la
création, la gestion et la distribution des données multimédias.
V. Windows Azure Media Services
Service de média de Windows Azure offre une plateforme multimédia de cloud extensible qui
permet aux développeurs de créer des solutions pour la réception, le traitement, la gestion et la
transmission des contenus multimédias. Service de média est basé sur l’infrastructure de
Windows Azure (pour fournir le traitement multimédia et le stockage des éléments
multimédias) et IIS Media Services (pour assurer la transmission du contenu)
 Architecture
L’architecture de Service de média inclut plusieurs composants clés dans la perspective du
développement d’applications. Le diagramme suivant illustre les couches de Service de média.
Figure 9 : Architecture Windows Azure Media Services

36. 36
 Flux de travail d’une application Media Services
Il existe quatre types basiques d’opérations pour l’utilisation des éléments multimédia. Celles-
ci constituent le flux de travail d’application. Service de média fournit une prise en charge
complète pour chaque opération dans ce flux de travail.
 Réception: Les opérations de réception transfèrent les éléments multimédias
au système. Cela inclut le chargement du contenu multimédia et le chiffrement
des éléments multimédias pour protéger leur contenu.
 Traitement: Les opérations de traitement impliquent l’encodage, la
conversion et la génération des éléments multimédias.
 Gestion: Les opérations de gestion impliquent l’utilisation des éléments
multimédias déjà inclus dans Service de média. Cela inclut le listing et le
balisage, la suppression et la modification des éléments multimédias, la gestion
des clés DRM et la vérification des rapports d’utilisation des comptes.
 Transmission: Les opérations de transmission permettent de diffuser le
contenu multimédia à partir de Service de média. Cela comprend la diffusion
en continu de contenu en direct ou à la demande auprès des clients et la
récupération ou le téléchargement des fichiers multimédias spécifiques à partir
du Cloud.
 Les étapes de création d’un service média sur Windows Azure
 Création d’un service de stockage : Le service de stockage sera utilisé pour stocker
les fichiers qui vont être utilisés par le service media. Windows Azure nous donne
la possibilité de choisir le groupe d’emplacement, il est recommandé de choisir
celui le plus proche de la majorité des utilisateurs.

37. 37
Figure 10 : Création de compte de stockage
 Création service média : Lors de la création de ce service, il faut choisir le compte
de stockage à lier et la région où nous voulons l’installer, de préférence il faut
choisir la même région du service de stockage pour minimiser le trafic et le temps
de transfert entre les deux services.
Figure 11 : Création service média

38. 38
 Quelques captures :
Après la création du service média, en entrant à la page «mettre à l’échelle », on peut
réserver des capacités (Streaming en-demande et Encodage).
Figure 12 : Réservation des capacités
Le téléchargement des vidéos à utiliser par le service média peut s’effectuer de deux
manières, à partir du système local (ordinateur personnel) ou à partir d’un autre compte de
stockage.
Figure 13 : Téléchargement des vidéos

39. 39
La figure suivante montre les opérations qu’on peut effectuer sur une vidéo.
Figure 14 : Les opérations à effectuer sur une vidéo
Afin d’adapter une vidéo à un type de streaming spécifique, nous pouvons l’encoder en
choisissant un des plusieurs préréglages disponibles.
Figure 15 : Encodage

40. 40
Le service média de Windows azure offre des graphes pour les statistiques de l’utilisation du
service ainsi que l’historique d’occupation de la bande passante.
Figure 16 : Tableau de bord du service média
Ce chapitre nous a permis de mieux comprendre plusieurs notions et concepts dont on aura
besoin pour la réalisation de notre projet. Dans ce qui suit nous irons plus loin, par une
description détaillée de l’application par l’analyse et la spécification des besoins.

41. CHAPITRE3 : Analyse et
spécification des besoins

42. 42
CHAPITRE 3 : Analyse et spécification des besoins
Dans tout système, les fonctionnalités doivent être mises en relation avec un ensemble de
besoins utilisateurs. Ces besoins définissent les services que les utilisateurs s’attendent à voir
fournis par le système. Nous allons commencer dans ce chapitre par la définition des besoins
fonctionnels et non fonctionnels. Puis, à partir de cette spécification, nous allons identifier les
acteurs ainsi que les cas d’utilisations de notre application.
I. Etude de l’existant
Partant du cas de projet Malisseonline, un portail d'informations tunisien spécialisé dans
l'actualité High Tech aussi bien nationale qu’internationale lancé par le journaliste de la radio
Mosaïque FM Mohamed Ali Souissi en partenariat avec THD (Tunisie Haut débit), et après
une réunion avec Welid Neffeti, Journaliste/Manager à THD, nous avons su tirer profit de leur
expérience pour analyser l’existant en terme de la création des plateformes de diffusion vidéo
en Tunisie.
Le processus de la création commence toujours par le choix de la solution la plus simple et
qui offre le maximum d’avantages tout en minimisant le coût. Ainsi, on se penche vers les
sites communautaires comme Youtube pour créer ses propres programmes de diffusion. Cette
solution apporte plusieurs avantages pour les entreprises qui décident de communiquer
dessus. Les entreprises peuvent y adapter leur stratégie de communication et profitent de son
audience évaluée à plus 150 millions de visiteurs par mois. Cependant, ce type de solutions
présente des inconvénients en termes de personnalisation du lecteur pour gérer leurs propres
annonces et break news, ainsi que des problèmes d’intégration du lecteur dans leurs propres
environnements pour éviter les suggestions en provenance de l’extérieur.
II. Spécificationdes besoins
A. Les besoins fonctionnels :
La capture des besoins fonctionnels est une étape importante du projet. Cette étape produit le
dossier des spécifications fonctionnelles et c’est au cours de cette étape qu’on procède à la
formalisation des fonctionnalités attendues de notre système ainsi que toutes les règles de
gestion qui les régissent.

43. 43
Dans cette partie, nous identifions les besoins fonctionnels qui expriment les actions que le
système doit effectuer.
Notre système réalise les tâches suivantes :
 Montage des vidéos :
L’administrateur doit avoir la possibilité de monter une liste de vidéos afin de créer un
programme de diffusion spécifique. Ce besoin englobe un ensemble de tâches lui permettant
de choisir une liste de vidéos à partir de la bibliothèque et modifier chaque vidéo à part en
coupant des morceaux et en ajoutant des textes ou des images animées à différents instants.
 Consultation de l’historique :
Afin de pouvoir consulter les programmes déjà créés, notre application permet
l’enregistrement dans l’espace de stockage du serveur web des fichiers xml qui contiennent
les listes de diffusion. L’utilisateur peut ainsi voir l’historique à partir de l’interface publique.
III. Diagramme de cas d’utilisation
A. Cas d’utilisationglobal :
Les cas d’utilisation permettent de décrire sous forme d’actions et de réactions le système du
point de vue utilisateur. Ils donnent l’image d’une fonctionnalité du système déclenchée par
une simulation d’acteur externe. Ils permettent de spécifier clairement et exhaustivement les
besoins relatives à chaque type d’utilisateur.
Pour cela, on a utilisé les diagrammes des « cas d’utilisation » pour illustrer les
fonctionnalités du système.

44. 44
Figure 17 : Cas d'utilisation global
B. Descriptiontextuelle des cas d’utilisation
 Cas d’utilisation « Authentification »
Titre Authentification
But S’authentifier pour accéder à la partie d’administration de
l’application
Séquences
principales
L’administrateur demande à s’authentifier,
Le système affiche la page d’authentification,
L’administrateur saisit son nom d’utilisateur et son mot de passe et
valide,
Le système valide les informations d’authentification par rapport à
celles qu’il a mémorisées,
Le système ramène l’administrateur à la page d’administration.
Séquences
alternatives
Lorsque l’administrateur fournit un nom d’utilisateur ou un mot de
passe inconnu, le système affiche un message d’erreur et propose à
l’utilisateur de s’authentifier une autre fois.
Tableau 6 : Description de cas d'utilisation "Athentification"

45. 45
 Cas d’utilisation « Créer programme»
Titre Créer programme
But Faire le montage d’une liste de vidéos afin de créer un programme
Pré condition Une authentification réussie en tant qu’administrateur
Séquences
principales
L’administrateur sélectionne une liste de vidéos ou audios à partir de
la bibliothèque,
Le système affiche la liste choisie,
L’administrateur peut ainsi choisir d’éditer chaque vidéo de la liste à
part en ajoutant du texte animé ce qui provoque le déclenchement de
l’UC « Insérer animation » ou en tranchant un morceau de la vidéo
ce qui fait appel à l’UC «Découper vidéo »,
L’administrateur confirme son programme,
Le système génère les fichiers nécessaires et déclenche l’UC
« Regarder le programme ».
Séquences
alternatives
A tout moment, l’administrateur peut annuler les modifications
apportées à la liste des vidéos.
Tableau 7 : Description de cas d'utilisation "Créer programme"
 Cas d’utilisation «Insérer animation »
Titre Insérer animation
But Ajouter un texte animé à des instants précis de la vidéo
Pré condition Vidéo déjà ajoutée à la playlist
Séquences
principales
L’administrateur demande l’ajout des textes animés à une vidéo,
Le système affiche un formulaire pour l’ajout des textes ,
L’administrateur saisit le texte à animer, précise les instants de début
et de fin, choisit une animation spécifique et valide ses
modifications,
Le système cache le formulaire et enregistre les modifications.
Tableau 8 : Description de cas d'utilisation "Insérer animation"
 Cas d’utilisation «Découper Vidéo»

46. 46
Titre Découper vidéo
But Trancher un morceau de la vidéo
Pré condition Vidéo déjà ajoutée à la playlist
Séquences
principales
L’administrateur demande le découpage d’une partie de la vidéo,
Le système affiche un formulaire pour le découpage,
L’administrateur précise les instants de début et de fin et valide,
Le système cache le formulaire et enregistre les modifications.
Tableau 9 : Description de cas d'utilisation "Découper video"
IV. Technologies utilisées :
 HTML5 :
Est la dernière version en date du langage de développement web HTML. Les
spécifications définitives du HTML5 n’étaient pas encore fixées, il comprend
de nouvelles balises et de nouveaux attributs pour les pages web et ouvre
surtout de nouvelles possibilités de développement pour les sites mobiles.
Ce que nous a attirer vers HTML5 c’est qu’il offre un moyen standard de lecture du média,
une clé tirent profit car il n'a pas de norme pour la lecture du média dans une page Web sans
un plug-in de navigateur et aucune garantie que chaque navigateur prendrait en charge le
plug-in.
 CSS 3 :
CSS se traduit en français « feuilles de style en cascade ». On l’utilise le langage
pour décrire la présentation d’un document écrit HTML ou XML. La CSS décrit
les couleurs, la police…
La CSS permet de rendre un document plus agréable à lire, mieux présenté… La CSS a donc
pour rôle d’améliorer la mise en page, de séparer la structure de sa présentation et d’améliorer
l’accessibilité des pages web.
Le troisième niveau des feuilles de style en cascade CSS3 comporte plusieurs nouvelles
propriétés graphiques (nouveau support des polices, saturation, luminosité, opacité, ombres,
bordures arrondis, transition, animations…)

47. 47
 JavaScript :
JavaScript est un langage de programmation de scripts principalement utilisé pour les pages
web interactives. C'est une extension du langage HTML qui est incluse dans le code. Ce
langage est un langage de programmation qui permet d'apporter des améliorations au langage
HTML en permettant d'exécuter des commandes.
Ce code est directement écrit dans la page HTML, c'est un langage peu évolué qui ne permet
aucune confidentialité au niveau des codes.
 AJAX :
AJAX est une maniére de construire des applications Web et des sites dynamiques basés sur
diverses technologies Web ajoutées aux navigateurs dans les années 1990. AJAX est la
combinaison de technologies telles que Javascript, CSS, XML, le DOM et le
XMLHttpRequest dans le but de réaliser des applications Web qui offrent une maniabilité et
un confort d’utilisation supérieur à ce qui se fait jusqu’alors.
Les applications AJAX fonctionnent sur tous les navigateurs Web qui mettent en œuvre les
technologies décrites précédemment, parmi lesquels Mozilla Firefox, Internet Explorer,
Konqueror, Google Chrome, Safari et Opera.
 XML :
XML (entendez eXtensible Markup Language et traduisez Langage à balises étendu, ou
Langage à balises extensible) est en quelque sorte un langage HTML amélioré permettant de
définir de nouvelles balises. Il s'agit effectivement d'un langage permettant de mettre en forme
des documents grâce à des balises (markup).
Contrairement à HTML, qui est à considérer comme un langage défini et figé (avec un
nombre de balises limité), XML peut être considéré comme un métalangage permettant de
définir d'autres langages.
La force de XML réside dans sa capacité à pouvoir décrire n'importe quel domaine de
données grâce à son extensibilité. Il va permettre de structurer, poser le vocabulaire et la

48. 48
syntaxe des données qu'il va contenir. XML a été mis au point par le XML Working Group
sous l'égide du World Wide Web Consortium (W3C) dès 1996.
 PHP5 :
PHP est un langage de scripts libre principalement utilisé pour produire des
pages Web dynamiques via un serveur http, mais pouvant également fonctionner comme
n’importe quel langage interprété de façon locale, en exécutant les programmes en ligne de
commande. En raison de la richesse de sa bibliothèque, on désigne parfois PHP comme une
plate-forme plus qu’un simple langage.
 jQuery :
jQuery est une bibliothèque JavaScript libre qui porte sur l’interaction
entre JavaScript(comprenant AJAX) et HTML, et a pour but de simplifier des commandes
communes de JavaScript. La première version date de janvier 2006.
 Popcorn :
Popcorn.js est un Framework HTML5 de media écrit en JavaScript pour les
créateurs des vidéos animés, les développeurs Web et n’importe qui veut créer
des medias interactives sur le Web basée sur le temps. Popcorn.js fait partie du projet Popcorn
de Mozilla.
 Textillate :
Textillate.js est une bibliothèque riche écrite en JavaScript qui donne la possibilité d’effectuer
des animations sur les textes, elle est basée sur « animate.css » qui définie jusqu’à 50
animations différentes et « lettering.js » qui permet de découper le texte en lettre et animer
chacune à part.
 OSM Player :
« Open Standard Media Player » est un lecteur multimédia HTML5 pour le Web, open source
(GPL), il est cent pour cent basé sur les standards Web et complètement personnalisable.
 SGBD : MySQL
MySQL est un système de gestion de base de données de type SQL. Il est

49. 49
devenu le SGBD open source le plus populaire au monde grâce à sa performance, sa haute
fiabilité et sa simplicité d’utilisation.
Au cours de ce chapitre, nous avons détaillé l’analyse de notre projet. Elle est composée de
deux parties parallèles : l’étude fonctionnelle et l’étude technique du projet. Dans l’étude
fonctionnelle du projet consiste à capturer les besoins fonctionnels en termes d’acteurs et de
fonctionnalités principales, raffinée ensuite en des spécifications fonctionnelles et modélisée
en diagrammes de cas d’utilisation. L’étude technique du projet a présenté l’architecture
logicielle et les technologies utilisées durant la réalisation de notre projet. Dans le chapitre qui
suit, nous présentant l’étape de conception du système.

50. CHAPITRE4 : Conception
de l’application

51. 51
CHAPITRE 4 : Conception de l’application
La conception est la phase la plus importante dans le cycle de développement d’un projet. Elle
permet de mettre en place un modèle sur lequel nous allons nous appuyer pour
l’implémentation du système. Nous allons suivre une démarche centré sur les cas d’utilisation
déjà présentés dans le chapitre analyse et spécification des besoins. Cette démarche consiste à
identifier les objets du système. Ces objets nécessitent la définition des classent. Ainsi nous
allons élaborer le diagramme de classe du système pour décrire sa vue statique. Puis nous
allons décrire la vue dynamique par les diagrammes de séquences.
I. Diagramme d’activité :
Les diagrammes d’activités sont la représentation proche de l’organigramme ; la description
d’un cas d’utilisation par un diagramme d’activités correspond à sa traduction algorithmique.
Une activité est l’exécution d’une partie du cas d’utilisation. Dans la suite nous présentons le
diagramme d’activité d’administration.
Figure 18 : Diagramme d'activité

52. 52
II. Diagrammes de séquences :
Les diagrammes de séquences sont la présentation graphique des interactions entre les acteurs
et le système selon un ordre chronologique dans la formulation UML. Dans la suite, nous
présentons quelques diagrammes de séquence de notre système.
A. Administrateur :
 Scénario d’authentification :
L’authentification doit être effectuée avant chaque création du programme de diffusion ou
ajout des news. L’administrateur fournit au système son identifiant et son mot de passe, le
système consulte la base de données pour s’assurer de l’identité de la personne et ouvre une
session, une fois que l’authentification est réussie.
Figure 19 : Diagramme de séquences (Authentification)
 Scénario de création d’un programme de diffusion :
Après son authentification, l’administrateur sélectionne une liste de vidéos à partir de la
bibliothèque afin de créer son programme en les plaçant dans un ordre chronologique, puis
pour chacune, il peut la découper ou insérer des textes animés à des temps bien précis et
pendant des durées bien déterminées. Et enfin, l’administrateur visualise le programme créé.

53. 53
Figure 20 : Diagramme de séquences (Création programme)
B. Utilisateurs :
 Scénario de visualisation du programme:
Après son accès au site, lorsque l’utilisateur choisis de regarder le programme courant, il
envoie une requête au service streaming et ce dernier demande les fichiers de service
stockage, et enfin il envoie le flux des vidéos à l’écran de l’utilisateur.
Figure 21 : Diagramme de séquences (Visualiser programme)

54. 54
III. Diagramme de classes :
Les diagrammes de classes expriment de manière générale la structure statique d’un système
en termes de classes et de relations entre ces classes. Une classe permet de décrire un
ensemble d’objets (attributs et comportements), tandis qu’une relation permet de faire
apparaître des liens entre ces objets. La classe peut être vue comme la factorisation des
éléments communs à un ensemble d’objets.
En se basant sur ce qui précède, une solution conforme aux besoins exprimés et aux objectifs
déjà fixés se résume dans un diagramme composé des classes suivantes :
Figure 22 : Diagramme de classes
Dans ce que suit, nous procédons à la description de ces différentes classes :
Administrateur : Cette classe contient les informations d’authentification des administrateurs
ainsi que les opérations qu’ils peuvent effectuer.

55. 55
Programme : C’est une classe qui contient les programmes créés et leurs informations et elle
est composée des montages et des playlists.
Utilisateur : Représente les opérations que les utilisateurs du site peuvent effectuer. Il regarde
des programmes et des vidéos.
Media : Une classe regroupant les audio et les vidéos, ajouté par un administrateur et peut
être partie d’un programme.
IV. Modèle de données :
Figure 23 : Modèle de données
Dans notre plateforme, on utilise quatre fichiers XML : un pour stocker les informations des
médias, deux pour le montage des vidéos et la création des programmes de diffusion et un
autre pour sauvegarder l’historique des programmes :
 data_base.xml : présente l’ensemble des médias dans notre espace de stockage et
permet de les organiser selon leurs types. Sous la balise <library> qui est la balise root
on trouve 3 types de balises <mp4>, <mp3> ou <img> présentant le type du média et
comportant plusieurs éléments pour sa description. <mp4> caractérisé par un attribut
id <mp4 id= ‘’ ‘’>et constitué de 5 balises : <titre>, <duree>, <description>, <path> et

56. 56
<poster> alors que <mp3> comporte 4 balises : <titre>, <duree>, <path> et <poster>
et pour la balise <img> on trouve les balises <titre>, <description> et <path> ;
Figure 24 : data_base.xml
 playlist.xml : ce fichier permet de créer une liste de médias spécifique pour un
programme de diffusion. Il est composé d’un ensemble de balises permettant
l’identification des différents médias constitutifs du programme et la description de
leur enchainement au cours du temps. On distingue ainsi la balise root <playlist> avec
<trackList> qui décrit un programme. <trackList> contient plusieurs balises de type
<track>, chacune de ses balises présente un média de type vidéo ou audio caractérisé
par un titre <title>, un path <location> qui présente le chemin pour y accéder et une
image<image> qui s’affiche sur le lecteur avant que la lecture commence ;
Figure 25 : playlist.xml
 montage.xml : permet de décrire un ensemble d’animations de textes et d’images
associées aux vidéos du programme de diffusion. L’ensemble des éléments peut être

57. 57
organisé comme suit : La balise <montage> est la balise root, elle est constituée d’un
ensemble de balises <video> chacune doit comporter une balise <id> permettant de
l’identifier et peut avoir soit la balise <texte> qui présente une animation du texte sur
la vidéo soit la balise <image> avec laquelle on peut animer une image. La balise
<texte> elle-même est définie par un instant de départ en secondes <start>, un instant
de fin <end>, un contenu texte <contenu> animé avec un type d’animation spécifique
<animation_txt> et une couleur <couleur>. L’image aussi est identifiée par un temps
de départ et de fin <start> et <end> ainsi qu’un emplacement <path> et une animation
<animation_img> ;
Figure 26 : montage.xml
 programme.xml : Permet de stocker les programmes déjà réalisé par l’administrateur,
pour chaque programme il existe une balise <programme></programme> qui a un
attribut « titre » et contient la date de création <date></date>, la liste des vidéos
<playlist></playlist> et le montage <montage></montaget>.

58. 58
Figure 27 : programme.xml
Dans ce chapitre, nous avons conçu notre application en utilisant le diagramme de classes et
le diagramme de séquences de langage UML. Ainsi nous avons passé d’un modèle métier (cas
d’utilisation), décrivant d’une maniére générale les fonctionnalités du systéme, à un modèle
de classe feront l’objet des tables de base de données ou les fichiers XML selon l’utilisation.

59. CHAPITRE5 : Réalisation

60. Chapitre5 : Réalisation
60
CHAPITRE 5 : Réalisation
Une des étapes de la vie d’un projet, aussi importante que la conception, est l’implémentation.
Cette étape constitue la phase d’achèvement et d’aboutissement du projet. Pour remplir cette
tâche avec succès il fut savoir utiliser les outils adéquats et nécessaires. Ce choix d’outils peut
influencer sur la qualité du produit obtenu et donc nécessite une attention particulière et doit
se baser sur les besoin du projet et le résultat escompté. Ce chapitre présente alors
l’environnement technique du travail ainsi que le choix pris en matière d’environnement
logiciel. Par la suite nous présentons les interfaces de notre solution.
I. Environnement de développement :
Dans cette partie nous nous intéressons à l’étude de l’environnement technique disponible
pour la réalisation de notre projet ensuite nous justifions les choix pris en matière
d’environnement logiciel pour mener à terme la partie applicative.
A. Environnement matériel :
Nous disposons de deux ordinateurs portables :
 Intel Pentium, 2.2GHz avec 2Go de RAM (OS : Windows 7)
 Intel Core2 Duo 2GHz avec 2Go de RAM (OS : Windows 7)
B. Environnement logiciel :
 Entreprise Architect Enterprise Architect est un outil
d'analyse et de création UML, couvrant le développement de
logiciels du rassemblement d'exigences, en passant par les étapes d'analyse, les
modèles de conception et les étapes de test et d'entretien. Cet outil graphique basé sur
Windows, peut être utilisé par plusieurs personnes et conçu pour vous aider à
construire des logiciels faciles à mettre à jour. Il comprend un outil de production de
documentation souple et de haute qualité.
C. Environnement de programmation :
Les différents outils utilisés dans cette phase de réalisation sont les suivants :

61. Chapitre5 : Réalisation
61
 Dreamweaver est un éditeur WYSIWYG destiné à la conception, au
codage et au développement de sites, de page et d’application Web.
Dreamweaver propose des outils qui vous aideront à créer des
applications Web. Ce logiciel est édité par Adobe Systems. Les fonctions d’édition
visuelle de Dreamweaver vous permettent de créer rapidement des pages sans rédiger
un seule ligne de code. Si vous préférez faire appel au codage manuel, Dreamweaver
intègre également de nombreux outils et fonctions de codage. Avec Dreamweaver,
vous pouvez créer des applications Web dynamiques reposant sur des bases de
données à l’aide de language serveur tels qu’ASP, JSP et PHP.
 WampServer est une plateforme de développement Web de type
WAMP, permettant de faire fonctionner localement (sans se connecter à
un serveur externe) des scripts PHP. WampServer n’est en soi un
logiciel, mais un environnement comprenant deux serveurs (Apache et MySQL), un
interpréteur de script(PHP), ainsi que phpMyAdmin pour l’administration Web des
bases MySQL.
Il dispose d’une interface d’administration permettant de gérer et d’administrer ses
serveurs au travers d’un tray icon(icône près de l’horloge windows).
La grande nouveauté de WampServer 2 réside dans la possibilité d’y installer et
d’utiliser n’importe quelle version de PHP, Apache ou MySQLen un clic. Ainsi,
chaque développeur peut reproduire fidèlement son serveur de production sur sa
machine locale.
Figure 28 : Architecture WAMP Server

62. Chapitre5 : Réalisation
62
 W3C markup validation service : est le seul outil véritablement
fiable pour vérifier la syntaxe du code HTML est le service de
validation du W3C accessible à l’adresse : http://validator.w3.org/
Pour utiliser ce service, il suffit :
 de saisir l’adresse de la page à contrôler
 d’envoyer le fichier
 ou bien de copier directement le code HTML à valider dans le champ prévu à
cet effet.
En déroulant les options, il est possible de préciser le type du document, et d’en
afficher le code source. Cette dernière option est notamment très utile pour savoir où
se situe l’erreur à corriger.
Lors de la correction, “commencez par le début” et pensez à revalider régulièrement le
document car certaines erreurs en cachent d’autres et à l’inverse certaines erreurs
entraînent de faux positifs.
 CSS Validation Service : est l’outil de validation des feuilles de
style CSS de W3C accessible à l’adresse : http://jigsaw.w3.org/
Tout comme pour le validateur HTML, pour utiliser ce service, il suffit :
 de saisir l’adresse de la page à contrôler
 d’envoyer le fichier
 ou bien de copier directement le code CSS à valider dans le champ prévu à cet
effet.

63. Chapitre5 : Réalisation
63
II. Architecture du système :
Figure 29 : Architecture du système
III. Test :
Afin d’assurer la qualité de notre travail, on a élaboré une suite de test unitaires et
d’intégration. Ceci dans le but d’assurer le bon fonctionnement de l’application et isoler les
dysfonctionnements pour les corriger tôt dans le processus de réalisation.
Afin de réaliser les tests unitaires d’une façon efficace et industrialisée, on a utilisé les outils
de validation de W3C. Les test d’intégration sont des test qui simulent l’interaction avec un
environnement physique réel. Ils veillent à l’exécution d’un scénario, ce qui garantit que
l’interaction avec l’application se fait comme prévu.
IV. Les IHM de l’application :
A. Front office:

64. Chapitre5 : Réalisation
64
Figure 30 : Composition de la page publique
 En-tête : est l’en-tête de notre site, elle contient le logo et le nom de la
société.
Figure 31 : En-tête
 Lecteur HTML5 : est l’emplacement où les internautes vont regarder le
programme et les vidéos sélectionnés de la vidéothèque.
Figure 32 : Lecteur HTML5
 Playlist : Contient la liste des vidéos du programme en cours.

65. Chapitre5 : Réalisation
65
Figure 33 : Playlist
 Bonnes nouvelle : Cette partie de la page contient des infos roulantes
verticalement et mise à jour régulièrement par l’administrateur.
Figure 34 : Bonnes nouvelles
 Vidéothèque : Toutes les vidéos que l’administrateur a déjà utilisées dans
les programmes sont chargés automatiquement dans cette partie en les
classant par thèmes (Nouvelles Technologies, formations et vidéos divers).
Figure 35 : Vidéothèque

66. Chapitre5 : Réalisation
66
 Historique programmes : Tous les programmes déjà créé par
l’administrateur se trouvent dans ce block, il suffit de cliquer sur un pour le
regarder.
B. Back office :
Figure 36 : Composition de la page d'administration
 Bibliothèque des medias : Contient tout les fichiers multimédia que
l’administrateur à téléchargé sur le site, ils sont classés par types (Vidéos,
musique, images, PDFs). Ils sont utilisés pour créer des nouveaux
programmes.
Figure 37 : Bibliothèque
 Montage & News : Cette partie contient deux onglets chacun contenant une
interface, une pour la création du playlist et l’autre pour l’insertion des
breaking news.

67. Chapitre5 : Réalisation
67
Figure 38 : Partie montage
Figure 39 : Insertion news
 Ajout texte animé : formulaire pour l’ajout d’un texte animé à un instant et
une durée bien déterminés.
Figure 40 : Formulaire ajout texte animé

68. Chapitre5 : Réalisation
68
Dans ce chapitre nous avons présenté l’environnement de développement (matériel et logiciel)
ainsi que les Framework utilisés pour le développement de notre application. Nous avons
ensuite décrit le travail réalisé, et enfin, nous avons présenté quelques interfaces de
l’application.

69. 69
Conclusion générale

70. 70
Conclusion générale
Au terme de ce modeste projet de fin d’études consacré à la mise en place d’une application
Web TV pour la société CIC en se basant sur les standards du Web. Nous espérons avoir
apporté les éléments qui répondent aux attentes de l’entreprise d’accueil et lui avoir fourni
une solution convenable et adéquate qui va lui permettre de bénéficier d’une rapidité et
efficacité de création des programmes et leur diffusion.
Nous commençons notre mémoire par une présentation générale du projet et de son cadre.
Ensuite, nous raffinons cette présentation par une analyse et spécification détaillées. Puis par
le moyen des diagrammes UML, nous concevons les composants de l’application. Enfin, en
se basant sur les éléments définis auparavant et leurs description, nous réalisons notre
application Web, qui repose sur un ensemble de nouveaux concepts (HTML5, CSS3, Cloud
Computing) et différents Framework (textillate, popcorn) qui nous ont facilité le
développement. Cependant ces nouveaux concepts et ces Frameworks ont nécessité un temps
et un effort importants pour les comprendre et pour apprendre à les utiliser.
Ce projet nous était une expérience humaine et professionnelle enrichissante dans le domaine
de développement qui nous a permis de voir de plus prés le domaine de travail et de bien
utiliser les connaissances requises à l’ISI.
L’application que nous développons satisfait les besoins actuels de CIC, mais elle est ouverte
aux améliorations et enrichissements tel que l’utilisation du SDK de Windows azure ce qui
permet à l’administrateur de l’application de configurer et gérer les ressources du Cloud sans
avoir recours à l’espace d’administration Windows azure, et d’autre part, on peut ajouter

71. Annexes

72. 72
Annexe A : Développement des applications
Windows Azure Media Services
Pour le développement des applications basées sur Service de média de Windows Azure, deux
approches principales peuvent être appliquées :
 Utiliser un Kit de développement logiciel (SDK) de Service de média de Windows
Azure pour .NET, PHP ou Java.
 Effectuer des appels directs de l’API REST en utilisant OData et l’API REST de
Service de média, plutôt qu’un Kit de développement logiciel (SDK) ou des langages
de programmation en dehors de .NET Framework.
Dans cette partie, nous allons essayer de présenter les bases du développement des
applications basées sur les services médias de Windows azure par l’API REST en premier lieu
et par le SDK pour PHP en deuxième lieu.
API REST
Construction des requêtes
Le service de média de Windows Azure accepte les requêtes HTTP OData et peut répondre au
format JSON détaillé ou atom+pub. Chaque client doit utiliser un ensemble d’en-têtes HTTP
requis dans le cadre de la connexion à Service de média, ainsi qu’un ensemble d’en-têtes
facultatifs.
En-têtes de requête HTTP standard
En-tête Type Valeur
Autorisation Support Le support est le seul mécanisme d’autorisation
accepté. La valeur doit également inclure le jeton
d’accès fourni par les services de contrôle d’accès.
x-ms-version Décimal 2.1
DataServiceVersion Décimal 3.0
MaxDataServiceVersion Décimal 3.0
Tableau 10 : Les en-têtes de requête http standard
Fonctions HTTP standards
Verbe Description
GET Renvoie la valeur actuelle d’un objet.
POST Crée un objet sur la base des données fournies ou envoie une commande.
PUT Remplace un objet ou crée un objet nommé (le cas échéant).