Web rtc 2016 - Malik Houni, Jocelyn Caraman et Bich NGUYEN

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

9

source: http://iswebrtcreadyyet.com/

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