Webrtc sur.gdgdevfest.com - @dperilla

1,043 views
904 views

Published on

Presentación sobre WebRTC en el Google Developer Fest Sur celebrado en Córdoba (España) el 31 de Octubre de 2013.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,043
On SlideShare
0
From Embeds
0
Number of Embeds
432
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webrtc sur.gdgdevfest.com - @dperilla

  1. 1. Web 3.0: WebRTC David Muñoz Padín @dperilla
  2. 2. ¿Quién soy? • David Muñoz - CEO Quaip - @dperilla • VoipEngineer con Asterisk / Kamailio desde 2003 • SysAdmin Linux desde 1999 • Formador online de Asterisk, Virtualización y Linux desde 2007 • Coworker en @Cosfera desde Mayo de 2013
  3. 3. · Desarrollo e infraestructuras avanzadas de Voip ! · Sistemas avanzados de E-learning ! · Servidores de streaming de radio y TV
 · Web Hosting Avanzado, VPS y Servidores Dedicados! 
 · Housing ! · Clientes en USA, UK, Venezuela y España
  4. 4. WebRTC Fase actual: Pruebas de vuelo Ready to fly in 2014
  5. 5. Pero.. ¿Qué es WebRTC?
  6. 6. Pero.. ¿Qué es WebRTC? ! • Comunicación directa entre navegadores web • Comunicaciones en tiempo real • Sencillas APIS Javascript! • Especificación de HTML5! • Proyecto Libre y Abierto, liberado por Google.! • Skype en la web
  7. 7. Navegadores soportados • Escritorio! • • Mozilla Firefox 22 • • Google Chrome 23 Opera 12 Android! • Google Chrome 28 • Mozilla Firefox 24 • Opera Mobile 12 • Google Chrome OS! • Firefox OS! • Próximamente Aplicaciones nativas
  8. 8. Evolución de WebRTC PCs Smartphones Tablets Millones de dispositivos 4000 3000 2000 1000 0 2012 2013 2014 Fuente: Disruptive Analysis WebRTC Strategy Report. Feb 2013 2015
  9. 9. El camino hacia WebRTC Fuente: jimmylee.info
  10. 10. Algunos Datos • API desarrollada por: • W3C (APIS para aplicaciones web) • IETF (Protocolos y formatos) • Plugin Free. #noflashplayer #nosilverlight ! • Soportado por Google, Mozilla y Opera • Protocolo en estado de arte
  11. 11. WebRTC APIs principales • MediaStream (getUserMedia) ! • Permite a un navegador web acceder a la cámara y el micrófono! ! • RTCPeerConnection! • Establece la comunicación de audio / vídeo! ! • RTCDataChannel! • Permite a los navegadores compartir datos a través de P2P
  12. 12. getUserMedia ! ! var constraints = {video: true}; ! function successCallback(localMediaStream) { var video = document.querySelector("video"); video.src = window.URL.createObjectURL(localMediaStream); } ! function errorCallback(error){ console.log("navigator.getUserMedia error: ", error); } ! navigator.getUserMedia(constraints, successCallback, errorCallback); !
  13. 13. https://simpl.info/getusermedia/
  14. 14. http://idevelop.ro/ascii-camera/
  15. 15. http://shinydemos.com/facekat/
  16. 16. www.webcamtoy.com
  17. 17. Compartir Escritorio
  18. 18. RTCPeerConnection pc = new RTCPeerConnection(null); pc.onaddstream = gotRemoteStream; pc.addStream(localStream); pc.createOffer(gotOffer); ! function gotOffer(desc) { pc.setLocalDescription(desc); sendOffer(desc); } ! function gotAnswer(desc) { pc.setRemoteDescription(desc); } ! function gotRemoteStream(e) { attachMediaStream(remoteVideo, e.stream); }
  19. 19. simpl.info/pc
  20. 20. RTCDataChannel var pc = new webkitRTCPeerConnection(servers, {optional: [{RtpDataChannels: true}]}); ! pc.ondatachannel = function(event) { receiveChannel = event.channel; receiveChannel.onmessage = function(event){ document.querySelector("div#receive").innerHTML = event.data; }; }; ! sendChannel = pc.createDataChannel("sendDataChannel", {reliable: false}); ! document.querySelector("button#send").onclick = function (){ var data = document.querySelector("textarea#send").value; sendChannel.send(data); };
  21. 21. simpl.info/dc
  22. 22. sharefest.me
  23. 23. Arquitectura WebRTC Fuente: ramonmillan.com
  24. 24. WebRTC vs Voip Característica Voip WebRTC Señalización SIP y H.323 (principalmente) Sin definir Medios RTP/RTCP RTP/RTCP Codecs de voz G.711 y Opus Codecs de vídeo Serie G.7xxx (principalmente) H.263, H.264 Seguridad de los medios SRTP/TLS/IPsec SRTP Fuente: ramonmillan.com VP8
  25. 25. SIP over WebRTC • Draft IETF: websockets draft-ietf-sipcore-sip-websockets. (Iñaki Baz, J.L. Millán, …) ! • Señalización SIP enviada vía websockets ! • Ejemplos de Uso: JSSIP, SIPML5
  26. 26. sipml5.org
  27. 27. Codecs soportados (A fecha de hoy) • Audio! • • G.711 • iLBC • • Opus iSAC Video! • VP8 • ¿H.264?
  28. 28. Codecs War (Octubre 2013) Patrocinadores de VP8 Patrocinadores de H.264 Google Ericsson Nokia BlackBerry Qualcomm Orange Cisco Microsoft Apple Fuente: webrtchacks.com
  29. 29. Opus: el codec definitivo Fuente: opus-codec.org
  30. 30. Opus Codec • Codec abierto y libre • Desarrollado por IETF • Bit-rates desde 6 kb/s a 510 kb/s • Frecuencias de muestreo desde 8 kHz (narrowband) a 48 kHz (fullband) • Soporta bit-rate constante (CBR) y bit-rate variable (VBR) • Basado en ILK de Skype y CELT de xiph.org
  31. 31. VP8 • Codec Abierto liberado por Google • Parte de WebM: junto con el codec de audio Vorbis y dentro de un contenedor Matroska. • High Quality • Optimizado para Real Time • Usado por Google Hangouts HD! • Soportado en Firefox, Chrome y Opera.
  32. 32. Sin NAT
  33. 33. Con NAT
  34. 34. Soluciones al NAT • STUN • TURN • ICE
  35. 35. STUN • permite a clientes NAT encontrar su dirección IP pública! • Económico • Datos van por directamente P2P
  36. 36. TURN • permite solucionar problemas de NAT donde STUN no puede! • Caro • Los datos pasan por el servidor y usa su ancho de banda
  37. 37. ICE • Un framework para buscar la mejor solución • Si puede usará STUN, si no puede TURN • La mayoría de las llamadas irán por STUN
  38. 38. Desplegando STUN/TURN • stun.l.google.com:19302 • WebRTC stunserver, turnserver • rfc5766-turn-server • restund
  39. 39. Seguridad en WEBRTC
  40. 40. P2P: Uno a Uno
  41. 41. Malla
  42. 42. Estrella
  43. 43. Media Server
  44. 44. ¿Podemos ver algunos ejemplos?
  45. 45. talky.io/quaip
  46. 46. twelephone.com
  47. 47. Gracias a la organización de GDG DevFest Sur
  48. 48. ¿Preguntas?

×