Embed Size (px)
Citation preview
1
MIF38 - Lyon1 présentation web 2016
présenté par:CARAMAN Jocelyn NGUYEN Thi Ngoc Bich HOUNI Malik
2
PLANPartie1 :
C’est quoi ?
Partie3:Démo: application vidéo
Partie2:La signalisation
3
C’est quoi ?
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
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
Qu’est ce qu’on peut faire avec
6
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
Compatibilité
Compatible Pas Compatible
Et le mobile ?
Avec Chrome sur Android. et Firefox sur Android. IOS aussi.
8
10
A travers les browser
Sur mobileWebRTC : cross-platform
Comment ça se passe …
1 2
3 4
5
11
● Peer-To-Peer Networking
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
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
Signalisation
Le Signaling
C’est quoi Signaling ?
Pourquoi Signaling est indispensable pour le WebRTC ?
Est-ce que WebRTC implémente le Signaling ? Pourquoi ?
15
SIP vs WebRTC
16Source : SINGH K. (2014)
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
DémoUn simple serveur qui permet de faire un chat vidéo entre 2 personnes
Index.html
19
- Balises <video>
- Bouton pour lancer le chat
Server.js
- un serveur WebSocket de Node.js
- Nécessite un autre serveur pour servir les fichiers
20
Script webrtc.js
- Déclarations des variables globales
- Préfixation des fonctions pour plus de compatibilité
21
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
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
Script webrtc.js
- Fonctions callbacks
- gotRemoteStream() : appelé quand la connexion est établie
24
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
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...
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
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
