WebRTC est une technologie open-source permettant la communication en temps réel entre navigateurs sans plugins propriétaires. Il repose sur un ensemble de protocoles et d'APIs, notamment pour le traitement de l'audio et de la vidéo, et favorise le développement facile d'applications cross-platform. Bien qu'il soit puissant, WebRTC nécessite des technologies complémentaires pour une utilisation complète comme le signaling.

1. 1
MIF38 - Lyon1 présentation web 2016
présenté par:
CARAMAN Jocelyn
NGUYEN Thi Ngoc Bich
HOUNI Malik

2. 2
PLAN
Partie1 :
C’est quoi ?
Partie3:
Démo: application vidéo
Partie2:
La signalisation

3. 3
C’est quoi ?

4. Définition
● “WebRTC permet la communication en temps réel entre browsers en s’
afranchissant des modules d’extension propriétaires (pas de plugin)”
4
● un projet ‘open-source’
● réunis un ensemble de protocoles
● ‘inclus’ avec le browser compatible
● contient des API écrites en javascript

5. WebRTC
5
…. ce n’est pas JUSTE une
spécification.
C’est un ensemble de pièces, de
composants qui vont bien ensemble.
Protocoles de
communication
IETF
Media,
communication
libs(libjingle,..)
W3C APIs MediaCapture, Streams...
WebRTC

6. Qu’est ce qu’on peut faire avec
6

7. Un peu d’histoire
● Mai 2011: WebRTC est annoncé
● Novembre 2011: Chrome 23 l’intègre
● Janvier 2013 : Firefox 20 l’intègre
● Février 2013 : Intéropérabilité
WebRTC en quelques dates
7

8. Compatibilité
Compatible
Pas Compatible
Et le mobile ?
Avec Chrome sur Android. et Firefox
sur Android. IOS aussi.
8

9. 9
source: http://iswebrtcreadyyet.com/

10. 10
A travers les browser
Sur mobile
WebRTC : cross-platform

11. Comment ça se passe …
1 2
3
4
5
11
● Peer-To-Peer Networking

12. 4 étapes avec webrtc:
● obtenir audio et vidéo
● établir la connection avec les pairs
● communiquer l’audio et la vidéo
● communiquer les données arbitraires
12

13. WebRTC comporte 3 APIs Principaux
13
MediaStreams
(getUserMedia)
● accès à la vidéo,
● accès à l’audio,
● accès l’écran
RTCPeerConnection ● encode, décode les média
● envoie à travers le réseaux
● ...
RTCDataChannel ● envoie de données arbitraires
● ...

14. 14
Signalisation

15. Le Signaling
C’est quoi Signaling ?
Pourquoi Signaling est indispensable pour le WebRTC ?
Est-ce que WebRTC implémente le Signaling ? Pourquoi ?
15

16. SIP vs WebRTC
16Source : SINGH K. (2014)

17. Avantages ….
17
développement
facile
● cross platform
● pas besoin de
connaissances spécifiques
sur le VoIP
● Une grande communauté
de développeurs web
● composants qui vont bien
ensemble
● GRATUIT !
● Open Source
déploiement facile
● distribution via URL
● mise à jour rapide
● faible maintenance
sur plusieurs
appareils
● “clique pour accéder”
● n’importe quel appareil
● de plugin/app native
de plus en plus d’utilisateurs
dans le monde qui l’utilisent

18. 18
Démo
Un simple serveur qui permet de faire un chat vidéo entre 2
personnes

19. Index.html
19
- Balises <video>
- Bouton pour lancer le chat

20. Server.js
- un serveur WebSocket de
Node.js
- Nécessite un autre serveur
pour servir les fichiers
20

21. Script webrtc.js
- Déclarations des variables
globales
- Préfixation des fonctions
pour plus de compatibilité
21

22. Script webrtc.js
- Appelé quand la page est
prête
- Connexion au serveur de
signalisation
- Obtention de la caméra +
audio avec getUserMedia()
- Quand réussi, mise en place
du stream sur la page
22

23. Script webrtc.js
- Initier la connexion ou
répondre à une demande
- createOffer() /
createAnswer() :
initie/répond à une offre
SDP
- gotMessageFromServer() :
gère tous les messages
reçus
23

24. Script webrtc.js
- Fonctions callbacks
- gotRemoteStream() : appelé
quand la connexion est
établie
24

25. Schéma récapitulatif de la connexion
25
Initiateur Destinataire
start(true);
peerConnection.createOffer(SDP);
gotMessageFromServer()
start(false);
creation de peerConnection;
addIceCanditate();
gotMessageFromServer();
setRemoteDescription();
peer.createAnswer();
gotMessageFromServer();
addIceCanditate();
gotRemoteStream();
gotMessageFromServer();
setRemoteDescription;
gotRemoteStream();
ICE
ICE
SDP
SDP

26. Conclusion
WebRTC est une technologie
pas une solution
26
Pas une API
standalone
(ex : signaling)
On peut l’utiliser avec d’autres technologies pour créer un service, mais
seul on ne vas pas loin...

27. Références
27
● WebRTC, https://webrtc.org/, dernière consultation 06 avril 2016
● DODSON A., Peer - WebRTC audio chat, http://adodson.com/peer.js/#demo-
code, dernière consultation 05 avril 2016
● DUTTON S. (2014) Getting started with WebRTC, http://www.html5rocks.
com/en/tutorials/webrtc/basics/, dernière consultation 06 avril 2016
● SHANE T. (2014) A dead simple WebRTC exemple, https://shanetully.
com/2014/09/a-dead-simple-webrtc-example/, dernière consultation 06 avril
2016
● UBERTI J., DUTTON S. (2013) Real Time Communication with WebRTC :
GoogleI/O 2013,
https://www.youtube.com/watch?v=p2HzZkd2A40, dernière consultation 06
avril 2016

28. Références
● KORBAN (date de publication non indiquée) Tous les bonnes raisons d’
utiliser WebRTC dans vos projets, http://korben.info/toutes-les-bonnes-
raisons-dutiliser-webrtc-dans-vos-projets.html, dernière consultation 06 avril
2016
● SINGH K. (2014) WebRTC vs SIP/SDP, http://blog.kundansingh.
com/2014/12/webrtc-vs-sipsdp.html , dernière consultation 06 avril 2016
● LEVENT-LEVI T. (2014) Will WebRTC replace SIP, https://bloggeek.me/will-
webrtc-replace-sip/ , dernière consultation 06 avril 2016
28