$30 off During Our Annual Pro Sale. View Details »

WebRTC (Code d’Armor)

WebRTC (Code d’Armor)

Avec son évolution continue, le Web a vu apparaître le WebRTC !
Maintenant, plus besoin d'outils tiers et de plugins troués pour faire des communications temps-réel enrichies, WebRTC fait l'affaire !
Mais comment ça fonctionne au juste ?

Présentation faite lors d'un meetup du Google Developer Group Code d'Armor.
Support de présentation sous licence CC-BY.

Vidéo du meetup : https://www.youtube.com/watch?v=OatchrntpAM

Vous avez aimé ce support ? Payez moi une bière , merci <3
(https://pylapersonne.info/buymeacoffee)

Pierre-Yves Lapersonne

September 16, 2014
Tweet

More Decks by Pierre-Yves Lapersonne

Other Decks in Technology

Transcript

  1. WebRTC Communication temps-réel sans plugin Frédéric LUART - Apizee Pierre-Yves

    LAPERSONNE - Orange Version 9 - 09/2014 ✿✿✿✿ ʕ •ᴥ•ʔ/ ︻デ═一 Cette œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution 4.0 International.
  2. console.log(“Au menu ce soir...”) • La naissance de WebRTC •

    Les piliers de l’API • L’infrastructure WebRTC • apiRTC : un framework contre la migraine • Démos ! 3
  3. 6 • Pas de communication temps-réel “légères” • Mais déjà

    des solutions avec les browsers web... • ...technos propriétaires • ...à installer • ...à mettre à jour • ...pas compatibles partout !
  4. 7

  5. 8 • Problèmes : • Rien de natif dans les

    browsers web • Dépendance totale envers les plugins • Sécurité, stabilité, mise à jour... • Plugins lourds et gourmands • Aucune standardisation !
  6. 10 • Apparition de WebRTC : • Normalisation de la

    chaine de communication • Intégration native dans les browsers (lib C/C++) • API full web simplifiée ◦ HTML5 : <audio>, <video>, ... ◦ JavaScript, JavaScript, JavaScript • Environnement connu ◦ Codecs G711 et Opus, VP8 ◦ • Multiplateforme ! ◦ mobile natif & web, browsers “classiques”
  7. 11

  8. 13 • Pour Microsoft, double jeu : • Implication par

    le biais de Skype • Travail sur sa solution : CU-RTCWeb ◦ SDP non obligatoire pour la signalisation ◦ Pas de PeerConnection ◦ Codec propriétaire$ (H.264) • Pour Apple, silence radio total... • Aucune contribution au projet • Minimum de compatibilité pour Safari
  9. 15 • Les ingrédients de base : ✓ Un navigateur

    Web récent ✓ Du code JavaScript ➢ utilisant l’API ➢ faisant la signalisation ➢ gérant les éléments des pages Web ✓ WebSocket ➢ optionnel mais très pratique :) ➢ connexion avec le serveur
  10. 16 var maWS = null; function faireConnection() { maWS =

    new WebSocket(“ws://super.url:port/truc”); maWS.open = onWsOpen; maWS.onmessage = onWsMessage; maWS.onerror = onWsError; maWS.onclose = onWsClose; } function onWsMessage( msg ) { // Le code qui va bien } // Etc...
  11. 17 • Pilier #1 : les users medias / media

    streams • Concernent tous les flux temps-réel ➢ microphone, caméra, webcam • Demandés par le navigateur ➢ l’utilisateur doit accepter ➢ le périphérique est choisi à ce moment • Média Stream ➢ 1 entrée et 1 sortie ➢ local ◦ via périphérique de la machine ➢ non-local ◦ <video>, <audio>, peer connection
  12. 18 • Media Stream : • Flux de données audio

    et vidéo • Représenté par une URL • Composé de plusieurs MediaStreamTrack • Media Stream Track : • Comporte une piste audio ou vidéo • Composé de un ou plusieurs canaux ➢ signal HP gauche, signal HP droite, ...
  13. 19 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    if ( navigator.getUserMedia ){ navigator.getUserMedia( {video:true, audio:true}, onCaptureMediaSuccess, onCaptureMediaFailure ); } else { // Kaboum ! // Fonction non supportée dans ce navigateur }
  14. 20 // Callback en cas de succès :-) var onCaptureMediaSuccess

    = function ( stream ){ // Mise à jour d’un élément HTML maBaliseVideo.src = window.URL.createObjectURL(stream); // Ajout du flux média à la peer connection maPeerConnection.addStream(stream); // Génération offre SDP, ... }; // Callback d’échec :-( var onCaptureMediaFailure = function ( kaboum ){ console.error(“Boum!”); }
  15. 21

  16. 22 • Pilier #2 : la RTCPeerConnection API simple :

    getUserMedia + peerConnection -> remote MediaStream
  17. 23 • Pilier #2 : la RTCPeerConnection Process Audio &

    Video - suppression bruit - compression (codecs) - gestion du routage - media (NATs & firewalls) - encryption (SRTP) - gestion de la bande passante API - création d’une PeerConnection - ajout d’un MediaStream - et quelques methodes pour établir l’appel
  18. 24 • RTCPeerConnection : initialisation • Vérifie les conditions de

    médias locaux : résolution, capacités, codecs • Récupère les adresses réseaux de l’application : candidates (host, STUN, TURN) • Enfin échanges des infos via le canal de signalisation Exemple dans la norme : w3.org/TR/webrtc/#simple-peer-to-peer-example
  19. 25 • Pilier #2 : la RTCPeerConnection T CreatePeerConnection() CreateOffer()

    SetLocalDescription() offer CreatePeerConnection() CreateAnswer() SetLocalDescription() SetRemoteDescription() SetRemoteDescription() answer Start Ice process and connectivity checking onIceCandidate() Start Ice process and connectivity checking candidate candidate onIceCandidate() Audio, video
  20. 26 • Pilier #3 : le RTC Data Channel •

    API équivalente à WebSocket • Supporte String + type binaire JavaScript : Blob, ArrayBuffer, ArrayBufferView • Sécurisé avec DTLS (dérivé de SSL) - obligatoire TCP UDP SCTP Reliability reliable unreliable configurable Delivery ordered unordered configurable Transmission byte-oriented message-oriented message-oriented Flow control yes no yes Congestion control yes no yes
  21. 27 var dCOptions = { ordered: false, // do not

    guarantee order maxRetransmitTime: 3000, // in milliseconds }; var peerConnection = new RTCPeerConnection(); var dataChannel = peerConnection.createDataChannel("myLabel", dCOptions); dataChannel.onerror = function(error){console.log("Data Channel Error:", error);}; dataChannel.onmessage = function(event){console.log("Got Data Channel Message:", event.data);}; dataChannel.onopen = function () { dataChannel.send("Hello World!"); }; dataChannel.onclose = function (){console.log("The Data Channel is Closed");};
  22. 28 Web Socket RTC PeerConnection Media Stream RTC DataChannel Chrome

    16+ 20+ 18+ 26+ Firefox 11+ 24+ 20+ 24+ Opera (presto) 12 - 12 - Opera (webkit) 15+ 16+ mobile 18+ 16+ mobile 18+ 16+ mobile 18+ 16+ mobile Safari 6+ - - - Internet Explorer 10+ - - -
  23. 32 • ICE • permet d’établir la connection • détermine

    le meilleur chemin pour chaque appel • la majorité des appels utilise STUN
  24. 33 • RTCSessionDescription Use of SDP v=0 o=- 6225574337129023010 2

    IN IP4 127.0.0.1 s=- t=0 0 a=group:BUNDLE audio video a=msid-semantic: WMS 7ggGWSPAbwihaka6SUr59h9PqX4x5CGvM7VH m=audio 1 RTP/SAVPF 111 103 104 0 8 106 105 13 126 c=IN IP4 0.0.0.0 a=rtcp:1 IN IP4 0.0.0.0 a=ice-ufrag:k4o07seRUgvxGDO1 a=ice-pwd:NyOZCJbWUprps1Kuxmka3D9O a=ice-options:google-ice a=fingerprint:sha-256 67:E1:C7:C3:88:80:4B:05:4E:B1:9F:F7:75:CA:04:2B:7E:BC:D4:11:76:DF:E8:3D:97:20:1B:5F:01:3C:C8:8 C ... a=sendrecv a=rtcp-mux a=rtpmap:111 opus/48000/2 ….
  25. 34 • Candidate {"type":"candidate","label":0,"id":"audio","candidate":"a=candidate:1862263974 1 udp 2122260223 192.168.1.73 52046 typ

    host generation 0\r\n"} {"type":"candidate","label":0,"id":"audio","candidate":"a=candidate:2565840242 1 udp 1686052607 2.16.43.105 52046 typ srflx raddr 192.168.1.73 rport 52046 generation 0\r\n"} {"type":"candidate","label":0,"id":"audio","candidate":"a=candidate:2634085855 1 udp 41885439 46.145.45.125 52397 typ relay raddr 2.16.43.105 rport 63754 generation 0\r\n"}
  26. 37 • apiRTC : framework et plateforme de communication Instant

    Messaging Client Real time message exchange, Group Chat Whiteboard On Photo, color, shape picker .. WebRTC Client Call : One way, 1 to 1, N to 1, N to N, Mute audio, video, AutoAnswer, Media routing mode selection, take snapshot, screenSharing … Session Connection / Disconnection : Long polling, WebSocket, Authentication, Presence Conversation History (CDR, messages …) Co-Browsing Page Navigation, form ...
  27. 39 • apiRTC example <script> apiRTC.init({ apiKey : "myDemoApiKey", //apiCCId

    : "1234", onReady : function () { console.log('Session created with sessionId :' + apiRTC.session.apiCCId); var webRTCClient = apiRTC.session.createWebRTCClient({ localVideo : "myLocalVideo", minilocalVideo : "myMiniVideo", remoteVideo : "myRemoteVideo", status : "status", command : "command" }); } }); </script>
  28. • Share Fest ◦ https://www.sharefest.me/ • Facekat ◦ http://shinydemos.com/facekat/ •

    Frisb ◦ http://www.frisb.com/ • Izeeroom ◦ https://izeeroom.apizee.com/ • Magic Xylophone ◦ http://soundstep.com/blog/experiments/jsdetection/ • apiRTC ◦ IzeeChat - Web, iOS, android ◦ IzeeLink in social network ◦ IzeeDiag 41
  29. • Quelques démos / API supplémentaires ◦ Spacegoo ➢ http://www.spacegoo.com/chess/

    ◦ Browser Quest ➢ http:/browserquest.mozilla.org ◦ Banana Bread ➢ https://developer.mozilla.org/fr/demos/detail/bananabread ◦ Cubeslam ➢ https://www.cubeslam.com/xlkipm ◦ ScretlyMeet.me ➢ https://secretlymeet.me/ ◦ Peer5 ➢ https://peer5.com/ ◦ Twilio ➢ http://www.twilio.com/
  30. • Quelques liens ◦ Exemple tiré du W3C ➢ http://www.w3.org/TR/webrtc/#simple-example

    ◦ Architecture WebRTC côté navigateur ➢ http://www.webrtc.org/reference/architecture ◦ Lycode ➢ http://lynckia.com/licode/ ◦ Le code C/C++ à la base de tout ➢ http://www.webrtc.org/webrtc-native-code-package ◦ Supports des technos selon le navigateur ➢ http://caniuse.com/#feat=rtcpeerconnection ◦ Tutoriel sur HTML5ROCKS ➢ http://www.html5rocks.com/en/tutorials/webrtc/basics/ ◦ Les aspects STUN / TURN ➢ http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/