1. WebRtc
Introduction au WebRtc
Web Real-time communication
By
El Hadji A Waly Ndiaye
Twitter :@elwans
11/08/2012 Ndogou du Libre DarkarLug 1

2. WebRtc
● C'est quoi le WebRtc ?
– Framework Open standard supporté par google
mozilla opera …
– Offrant API Native C++ WebRTC
– Activation du Real time communication à
travers le web
– La communication Audio / video de haute
qualité à travers un navigateur web
11/08/2012 Ndogou du Libre DarkarLug 2

3. WebRtc
● La vision WebRtc ?
– Unifier une plate-forme de communication (Pc
,téléphone, tv ,tablette … )
– Favoriser le real-time communication pour les
applications futurs
– Plate-forme de real-time communication
accessible gratuit et interopérable
11/08/2012 Ndogou du Libre DarkarLug 3

4. WebRtc
● Les technologies supportés ...?
– Chrome 21
– Firefox 17
– Opera 12
– IE (via chromeframe )
– Navigateur mobile en cours ….
11/08/2012 Ndogou du Libre DarkarLug 4

5. WebRtc
● Architecture
11/08/2012 Ndogou du Libre DarkarLug 5

6. WebRtc
● Les Fonctionnalités
– MediaStream : offrant l'accés au
Caméra/microphone
– PeerConnection : offrant l'appel audio / vidéo
– Datachannels : permettant le transfert de
donnée P2P
11/08/2012 Ndogou du Libre DarkarLug 6

7. WebRtc
● MediaStream
– Synchronise les différents flux médias
– Transforme les urls et autorise les flux médias
– Utilise l'api GetUserMedia pour acceder au
périphérique (Caméra , microphones ) avec
l'autorisation de l'utilisateur
11/08/2012 Ndogou du Libre DarkarLug 7

8. WebRtc
● Mediastream
– L'Activation sur chrome 21 est automatique
– L'activation sur chrome < 21
11/08/2012 Ndogou du Libre DarkarLug 8

9. WebRtc
● MediaStream
● Script JS + HTML5
11/08/2012 Ndogou du Libre DarkarLug 9

10. WebRtc
● Mediastream
– Demo simple stream
● http://192.168.5.173/html5/dakarlug/simplestream.htm
– Demo capture
● http://192.168.5.173/html5/dakarlug/caputre.html
– Demo capture + Webgl
● http://neave.com/webcam/html5/
– Histogramme en 3D
● http://shinydemos.com/3d-color-histogram/
11/08/2012 Ndogou du Libre DarkarLug 10

11. WebRtc
● PeerConnection
– Offre les api neccessaires pour l’établissement
de session audio/video
● Connexion P2P
● La gestion des codecs
● La sécurité
● Gestion de la bande passante
11/08/2012 Ndogou du Libre DarkarLug 11

12. WebRtc
● PeerConnection
– Chrome 2x
11/08/2012 Ndogou du Libre DarkarLug 12

13. WebRtc
● PeerConnection
– Demo Application
● http://sipml5.org/
● http://apprtc.appspot.com
11/08/2012 Ndogou du Libre DarkarLug 13

14. WebRtc
● DataChannel
– Échange de données P2P avec un faible temps
de latence
● Use cases
– Jeux en ligne
– Transfert de données
– Message de texte Real-time
– Contrôle de machine a distance
11/08/2012 Ndogou du Libre DarkarLug 14

15. WebRtc
● Datachannel
– Pas encore disponible sur aucun des
navigateurs
– Encours d’implémentation ….
11/08/2012 Ndogou du Libre DarkarLug 15

16. WebRtc
Merci de votre attention !
?
11/08/2012 Ndogou du Libre DarkarLug 16