Projet fin d'étude _ Conception et réalisation d'un WebPhone à base de Webrtc

1. Ministère de l’enseignement supérieur et de la recherche scientifique
Ecole national Supérieure d’Informatique (ESI)
Oued-Smar, Alger
Conception et Réalisation
d’un WebPhone
Option : SIT
Réalisé par :
- BOULFRAKH Houssam Eddine
Encadré par :
- Mr AMROUCHE Hakim
- Septembre 2014 -

2. ESI 20142
Introduction
Domination
par les coûts
Concentration Différentiation
M. Porter

3. ESI 20143
Introduction
Circuit pour la transmission de voix
Réseau à base de paquets pour la transmission de données
Réseau convergent
Contexte Objectifs DémarcheProblématique

4. Opérateur
téléphonique
salesforce.com
ESI 20144
Introduction
Contexte ObjectifsProblématiqueContexte Problématique
CRM
+
Open CTI
Client
Agent
HardPhone
Mobile
Démarche
IPBX
OVH

5. ESI 20145
Introduction
Objectifs
Problème d’intégration
Contexte Problématique
Problème de
commercialisation
Démarche

6. ESI 20146
Introduction
ObjectifsContexte Problématique DémarcheObjectifsProblématique
Réalisation d’une solution call center.
Application Web (WebPhone ) marche sur n’importe quelle plate-
forme.
Réduction du temps Augmentation de la Productivité
IP-PBX
Minimum de coût et maximum de fonctionnalités ,
Simple à gérer et fiable ,
Efficace et sécurisée.

7. ESI 20147
Introduction
DémarcheProblématiqueContexte ObjectifsObjectifs Démarche
Réalisation &
Tests
Etude
Conceptuelle
Etude
bibliographique
Connaissance Planification Action

8. ESI 20148
Etude bibliographique

9. ESI 20149
Etude Bibliographique VoIP (Voice Over IP)
Définitions Architecture
Analyse des
risques
Protocoles & Codes
Technologies de transport de la voix en mode paquet
via le protocole IP .
VoIP (Voice Over IP)
ToIP (Telephony Over IP)
Application et offre de services de téléphonie englobant
la VoIP et tous les services associés à la messagerie .

10. Transport
Etude Bibliographique VoIP (Voice Over IP)
Définitions Architecture
Analyse des
risques
Protocoles & CodesDéfinitions Protocoles utilisés
ESI 201410
Signalisation
1
Protocoles VoIP
SIP (Session Initiation Protocol)
Couche 5 : session
Port : 5060 (UDP)
Etablir une session
RTP (Real-time Transport Protocol)
Transport de données
RTCP (Real-time Transport Control
Protocol)
Contrôle pour un flux RTP
2

11. ESI 201411
Analyse des
risques
Définitions Protocoles utilisésProtocoles utilisés
Etude Bibliographique VoIP (Voice Over IP)
 PC au PC
3 Façons d’utiliser VoIP
Internet
• Besoin d'un PC avec carte son
• Un logiciel de téléphonie sur IP
 PC au téléphone
internet Gateway PSTN
 Téléphone
ArchitectureArchitecture
Full IPHybride
« Centrex »

12. ESI 201412
Analyse des
risques
Définitions Protocoles utilisésProtocoles utilisés Architecture Analyse des
risques
Architecture
Etude Bibliographique VoIP (Voice Over IP)
 Réduction de coût
 Solution sur mesure
 Productivité
 Flexibilité

13. ESI 201413
Analyse des
risques
Définitions Protocoles utilisésProtocoles utilisés Architecture
Analyse des
risques
Architecture
Etude Bibliographique VoIP (Voice Over IP)
« Une infrastructure de téléphonie sur IP est un système d’information
particulier; il est dédié à un usage spécifique. A ce titre il est soumis
aux besoins de sécurité habituels d’un système d’information auxquels
s’ajoutent des besoins spécifiques de la téléphonie fixe. »
[souligne l'Agence française Nationale de la Sécurité des
Systèmes d'Information (ANSSI)]
Site Central
WAN
Site distant, agence
SiSi
Niveaux d’inteventions

14. ESI 201414
Etude Bibliographique Technologies
Définitions WebPhone BenchmarkOutils
Centre d’appel
SVIACD
CTI

15. ESI 201415
Etude Bibliographique Technologies
Définitions WebPhone BenchmarkOutilsDéfinitions Outils
WebPhones

16. ESI 201416
Etude Bibliographique Technologies
Définitions WebPhone BenchmarkDéfinitions WebPhoneOutilsOutils
Définition
 Un téléphone web (application web) ,
 s'exécute dans le navigateur ,
 intégrable dans les page Web ,
 Basé sur le protocole SIP et compatible avec les appareils et
les services VoIP,
 Appel vers n’importe quels Softphone / HardPhone ou téléphone
fixe ou téléphone mobile (via un provider).

17. ESI 201417
Etude Bibliographique Technologies
Définitions WebPhone BenchmarkDéfinitions WebPhoneOutilsOutils
Définition
 API Javascript développée au sein du W3C et de l'IETF,
 Apparu en mai 2011 et il nécessite aucune installation,
 Intégré dans les navigateurs (chrome, firefox , opéra…),
 Permet la communication (vidéo et/ou audio)en temps réel,
directement via le navigateur.

18. ESI 201418
Etude Bibliographique Technologies
Définitions WebPhone BenchmarkDéfinitions WebPhoneOutilsOutils
Architecture Serveurs web
Flux médias
Flux de données

19. ESI 201419
Etude Bibliographique Technologies
Définitions WebPhone BenchmarkDéfinitions WebPhoneOutilsOutils
Les 3 API de WebRtc
 Peerconection
 Datachannel
 MediaStream
Serveur Web
d’application
Navigateur A Navigateur B
1
4
6
5
2
3
 SDP  Echange de données l'accès aux ressources multimédia

20. ESI 201420
Etude Bibliographique Technologies
Définitions BenchmarkDéfinitions OutilsOutils BenchmarkWebPhoneWebPhone
Solutions WebPhones
SIPML5

21. ESI 201421
Etude Conceptuelle

22. Analyse & Conception
ESI 201422
Etude Conceptuelle
Introduction
Capture des
besoins
Modèles d’analyseEtude préliminaire
UML (Unified Modeling Language)
 Langage de modélisation graphique et textuelle.
 Comprendre et décrire des besoins, spécifier et
documenter des systèmes, concevoir des solutions et
communiquer des points de vue.

23. Analyse de besoins
ESI 201423
Etude Conceptuelle
Introduction
Capture des
besoins
Modèles d’analyseEtude préliminaire
Processus 2TUP (2 Track Unified Process)
 Itératif et incrémental,
centré sur l’architecture,
conduit par les cas
d’utilisation et piloté par les
risques.

24. Analyse de besoins
ESI 201424
Etude Conceptuelle
Introduction
Capture des
besoins
Modèles d’analyseEtude préliminaire
Acteurs du système
Introduction Etude préliminaire
ClientAgent Administrateur
Diagramme de contexte
Système

25. Analyse de besoins
ESI 201425
Etude Conceptuelle
Introduction
Capture des
besoins
Modèles d’analyseEtude préliminaire
Besoins fonctionnels
Introduction Etude préliminaire
Capture des
besoins
Etude préliminaire
Module d’administration
WebPhone
Gestion du centre d’appel
(Espace Agent)
Système

26. Analyse de besoins
ESI 201426
Etude Conceptuelle
Introduction
Capture des
besoins
Modèles d’analyseEtude préliminaireIntroduction Etude préliminaire
Capture des
besoins
Etude préliminaire
Cas d’utilisation (Module administration)

27. Analyse de besoins
ESI 201427
Etude Conceptuelle
Introduction
Capture des
besoins
Modèles d’analyseEtude préliminaireIntroduction Etude préliminaire
Capture des
besoins
Etude préliminaire
Cas d’utilisation (Espace Agent)

28. Analyse de besoins
ESI 201428
Etude Conceptuelle
Introduction
Capture des
besoins
Modèles d’analyseEtude préliminaireIntroduction Etude préliminaire
Capture des
besoins
Etude préliminaire
Cas d’utilisation (WebPhone)

29. Analyse de besoins
ESI 201429
Etude Conceptuelle
Introduction
Capture des
besoins
Modèles d’analyseEtude préliminaireIntroduction Etude préliminaire
Capture des
besoins
Etude préliminaire
Capture des
besoins
Modèles d’analyse
Fonctionnement du WebPhone

30. Analyse de besoins
ESI 201430
Etude Conceptuelle
Introduction
Capture des
besoins
Modèles d’analyseEtude préliminaireIntroduction Etude préliminaire
Capture des
besoins
Etude préliminaire
Déroulement d’un appel
Capture des
besoins
Modèles d’analyse

31. Analyse & Conception
ESI 201431
Etude Conceptuelle
Schéma global
de la Solution
Architecture
logicielle
Architecture
matérielle
Opérateur
téléphonique
Multi-OS
Application
(CRM Cloud,
centre d’appel
sur un portail
web ou
autres)
Client
Agent
IPBX
OVH

32. Analyse & Conception
ESI 201432
Etude Conceptuelle
Schéma global
de la Solution
Architecture
Logicielle
Architecture
matérielle
Schéma global
de la Solution
Architecture
matérielle

33. Analyse & Conception
ESI 201433
Etude Conceptuelle
Schéma global
de la Solution
Architecture
Logicielle
Schéma global
de la Solution
Architecture
matérielle
Architecture
matérielle
Architecture
Logicielle
Architecture 3-tiers

34. ESI 201434
Réalisation & Tests

35. 35
Réalisation & tests
Outils & technologies Réalisation Aperçu
Tests de
Fonctionnement
FreePbx
SIPML5

36. 36
Réalisation & tests
RéalisationOutils & technologies
Tests de
Fonctionnement
Aperçu
Etape 1
Etape 2
Etape 3
• Mise en place du iSymphony ( pour l’espace Agents )• Mise en place des différents serveurs et protocoles :
FreePbx, configuration d’asterisk.
• Déploiement du WebPhone développé

37. 37
Réalisation & tests
RéalisationOutils & technologies Réalisation
Partie administration
Page d’accueil FreePBXPage d’authentification « Administrateur »Espace Administrateur « Tableau de bord »Espace Administrateur «Configuration système»Espace Administrateur « Ajouter Compte »Page « Journal d’appels
Espace Agent
Page « Espace Agent »
Tests de
Fonctionnement
AperçuAperçu
Etape 1Etape 2

38. 38
Réalisation & tests
Outils &
technologies
RéalisationOutils & technologies Réalisation
Partie administration Espace Agent Application WebPhone
Tests de
Fonctionnement
Aperçu
Etape 3

39. Tests de
Fonctionnement
39
Réalisation & tests
Outils &
technologies
RéalisationOutils & technologies
Partie administration Espace Agent Application WebPhone
Tests de
Fonctionnement
AperçuAperçu
Etape 3

40. ESI 201440
Conclusion & perspectives

41. ESI 201441
Conclusion & Perspectives
Conclusion Perspectives
WebPhone à base d’Asterisk : Révolution VoIP.
Solution VoIP à base d’Asterisk.
Première version de WebPhone, indépendant de n’importe
quelle plate-forme, simple et conviviale.
Réalisation de la partie Agent du centre d’appel.

42. ESI 201442
Conclusion & Perspectives
Conclusion PerspectivesConclusion Perspectives
Un module de facturation (A2billing) des appels.
Intégration du WebPhone dans autres applications web ou site
web d’entreprises.
Fonctions de mise en attente, transfert d’appel et muet.
Possiblité d’integrer une extension WebPhone à un
navigateur(extension chrome, firfox, etc).

44. Questions